{% extends "base.html" %}

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

        .traffic-table {
            width: 50%;
            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 */
        }

        .footer {
            text-align: center;
            margin-top: 20px;
        }

{% endblock %}

{% block body %}
        <section>
          <h2 class="table-title">
        {% if traffic %}
            {{ traffic[0].long_name }} (last 24 hours)
        {% else %}
            No Traffic Data Available
        {% endif %}
        </h2>
        <table class="traffic-table">
            <thead>
                <tr>
                    <th>Port Number</th>
                    <th>Packet Count</th>
                </tr>
            </thead>
            <tbody>
                {% for port in traffic %}
                    <tr class="traffic">
                        <td>
                            {% if port.portnum == 1 %}
                                TEXT_MESSAGE_APP
                            {% elif port.portnum == 3 %}
                                POSITION_APP
                            {% elif port.portnum == 4 %}
                                NODEINFO_APP
                            {% elif port.portnum == 5 %}
                                ROUTING_APP
                            {% elif port.portnum == 8 %}
                                WAYPOINT_APP
                            {% elif port.portnum == 67 %}
                                TELEMETRY_APP
                            {% elif port.portnum == 70 %}
                                TRACEROUTE_APP
                            {% elif port.portnum == 71 %}
                                NEIGHBORINFO_APP
                            {% elif port.portnum == 73 %}
                                MAP_REPORT_APP
                            {% elif port.portnum == 0 %}
                                UNKNOWN_APP
                            {% else %}
                                {{ port.portnum }}
                            {% endif %}
                        </td>
                        <td>{{ port.packet_count }}</td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="2">No traffic data available for this node.</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </section>

    <footer class="footer">
        <a href="/top">Back to Top Nodes</a>
    </footer>
{% endblock %}