{% extends "base.html" %}

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

{% block body %}
<div style="font-family: Arial, sans-serif; color: #333; background-color: #f9f9f9; padding: 15px; border-radius: 8px; max-width: 300px; margin: auto;">
  <p style="font-size: 18px; font-weight: bold; margin-bottom: 10px;">Total Nodes: <span style="font-weight: normal; color: #007bff;">{{ total_nodes }}</span></p>
  <p style="font-size: 18px; font-weight: bold; margin-bottom: 10px;">Total Packets: <span style="font-weight: normal; color: #007bff;">{{ total_packets }}</span></p>
  <p style="font-size: 18px; font-weight: bold;">Total MQTT Reports: <span style="font-weight: normal; color: #007bff;">{{ total_packets_seen }}</span></p>
</div>


{% endblock body %}