{% extends "base.html" %}

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

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

    .card-section {
        background-color: #272b2f;
        border: 1px solid #474b4e;
        padding: 15px 20px;
        margin-bottom: 10px;
        border-radius: 10px;
        transition: background-color 0.2s ease;
    }

    .card-section:hover {
        background-color: #2f3338;
    }

    .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-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 (24 hours): <br>
            <span class="section-value">{{ "{:,}".format(total_nodes) }}</span>
        </p>
    </div>

    <!-- Section for Total Packets -->
    <div class="card-section">
        <p class="section-header">
            Total Packets (14 days):
            <span class="section-value">{{ "{:,}".format(total_packets) }}</span>
        </p>
    </div>

    <!-- Section for Total MQTT Reports -->
    <div class="card-section">
        <p class="section-header">
            Total MQTT Reports (14 days):
            <span class="section-value">{{ "{:,}".format(total_packets_seen) }}</span>
        </p>
    </div>
</div>
{% endblock %}