{% extends "base.html" %}

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

    /* Set the maximum width of the page to 600px */
    .container {
        max-width: 600px;
        margin: 0 auto; /* Center the content horizontally */
    }

    /* Adjust styling for sections */
    .card-section {
        background-color: #272b2f;
        border: 1px solid #474b4e;
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .section-header {
        font-size: 16px;
        margin: 0;
        font-weight: 500;
    }

    .section-value {
        font-weight: 700;
        color: #03dac6;
    }

    .percentage {
        font-size: 12px;
        color: #ffeb3b;
        font-weight: 400;
    }

    .main-container {
        max-width: 600px;
        margin: auto;
        text-align: center;
    }

    .main-header {
        font-size: 22px;
        margin-bottom: 20px;
        font-weight: 600;
    }
{% endblock %}

{% block body %}

<div class="main-container">
    <h2 class="main-header">Mesh Statistics</h2>

    <!-- Section for Total Nodes -->
    <div class="card-section">
        <p class="section-header">
            Total Active Nodes (Last 24 hours):
            <span class="section-value">{{ total_nodes }}</span>
        </p>
    </div>

    <!-- Section for Total Nodes LongFast -->
    <div class="card-section">
        <p class="section-header">
            Total Active Nodes LongFast: <br>
            <span class="section-value">{{ total_nodes_longfast }}</span>
            <span class="percentage">
                ({{ (total_nodes_longfast / total_nodes * 100) | round(2) }}%)
            </span>
        </p>
    </div>

    <!-- Section for Total Nodes MediumSlow -->
    <div class="card-section">
        <p class="section-header">
            Total Active Nodes MediumSlow: <br>
            <span class="section-value">{{ total_nodes_mediumslow }}</span>
            <span class="percentage">
                ({{ (total_nodes_mediumslow / total_nodes * 100) | round(2) }}%)
            </span>
        </p>
    </div>

    <!-- Section for Total Packets -->
    <div class="card-section">
        <p class="section-header">
            Total Packets:
            <span class="section-value">{{ total_packets }}</span>
        </p>
    </div>

    <!-- Section for Total MQTT Reports -->
    <div class="card-section">
        <p class="section-header">
            Total MQTT Reports:
            <span class="section-value">{{ total_packets_seen }}</span>
        </p>
    </div>
</div>

{% endblock %}