{% extends "base.html" %}

{% block css %}
    #packet_details{
        height: 95vh;
        overflow: scroll;
    }
{% endblock %}

{% block body %}

<div style="font-family: 'Segoe UI', Tahoma, sans-serif; color: #fff; background: linear-gradient(135deg, #6a11cb, #2575fc); padding: 25px; border-radius: 15px; max-width: 350px; margin: auto; text-align: center; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);">
    <h2 style="font-size: 22px; margin-bottom: 20px; font-weight: 600;">
        Mesh Statistics
    </h2>
    <!-- Section for Total Nodes -->
    <div style="background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px; margin-bottom: 15px;">
        <p style="font-size: 16px; margin: 0; font-weight: 500;">
            Total Active Nodes (Last 24 hours):
            <span style="font-weight: 700; color: #ffeb3b;">{{ total_nodes }}</span>
        </p>
    </div>
    <!-- Section for Total Nodes LongFast -->
    <div style="background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px; margin-bottom: 10px;">
        <p style="font-size: 14px; margin: 0; font-weight: 500;">
            Total Active Nodes LongFast: <br>
            <span style="font-weight: 700; color: #03dac6;">{{ total_nodes_longfast }}</span>
            <span style="font-size: 12px; color: #ffeb3b; font-weight: 400;">
                ({{ (total_nodes_longfast / total_nodes * 100) | round(2) }}%)
            </span>
        </p>
    </div>
    <!-- Section for Total Nodes MediumSlow -->
    <div style="background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px; margin-bottom: 10px;">
        <p style="font-size: 14px; margin: 0; font-weight: 500;">
            Total Active Nodes MediumSlow: <br>
            <span style="font-weight: 700; color: #03dac6;">{{ total_nodes_mediumslow }}</span>
            <span style="font-size: 12px; color: #ffeb3b; font-weight: 400;">
                ({{ (total_nodes_mediumslow / total_nodes * 100) | round(2) }}%)
            </span>
        </p>
    </div>
    <!-- Section for Total Packets -->
    <div style="background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px; margin-bottom: 10px;">
        <p style="font-size: 14px; margin: 0; font-weight: 500;">
            Total Packets:
            <span style="font-weight: 700; color: #03dac6;">{{ total_packets }}</span>
        </p>
    </div>
    <!-- Section for Total MQTT Reports -->
    <div style="background: rgba(255, 255, 255, 0.1); padding: 15px; border-radius: 10px;">
        <p style="font-size: 14px; margin: 0; font-weight: 500;">
            Total MQTT Reports:
            <span style="font-weight: 700; color: #03dac6;">{{ total_packets_seen }}</span>
        </p>
    </div>
</div>


{% endblock body %}