{% extends "base.html" %}
{% block css %}
.table-title {
            font-size: 2rem;
            text-align: center;
            margin-bottom: 20px;
        }

        .traffic-table {
            width: 60%;
            border-collapse: collapse;
            margin: 0 auto;
            font-family: Arial, sans-serif;
        }

        .traffic-table th,
        .traffic-table td {
            padding: 10px 15px;
            text-align: left;
            border: 1px solid #474b4e;
        }

        .traffic-table th {
            background-color: #272b2f;
            color: white;
        }

        .traffic:nth-of-type(odd) {
            background-color: #272b2f; /* Lighter than #2a2a2a */
        }

        .traffic {
            border: 1px solid #474b4e;
            padding: 8px;
            margin-bottom: 4px;
            border-radius: 8px;
        }

        .traffic:nth-of-type(even) {
            background-color: #212529; /* Slightly lighter than the previous #181818 */
        }
{% endblock %}

{% block body %}
    <h2 class="table-title">Top Traffic Nodes (last 24 hours)</h2>
    <table class="traffic-table">
        <thead>
            <tr>
                <th>Node Name</th>
                <th>Role</th>
                <th>Packet Count</th>
            </tr>
        </thead>
        <tbody>
            {% for node in nodes %}
                <tr class="traffic">
                    <td><a href="/packet_list/{{ node[0] }}">{{ node[1] }}</a></td>  <!-- long_name -->
                    <td>{{ node[2] }}</td>
                    <td><a href="/top?node_id={{ node[0] }}">{{ node[3] }}</a></td> <!-- packet_count -->
                </tr>
            {% endfor %}
        </tbody>
    </table>

{% endblock %}