{% extends 'layout.html' %}

{% block content %}
    <h2>Graph: Download vs. Upload Speeds</h2>
    <canvas id="speedChart"></canvas>

    <h2>Test Results</h2>

    <table border="1">
        <thead>
            <tr>
                <th>Timestamp</th>
                <th>ISP</th>
                <th>Latency</th>
                <th>Jitter</th>
                <th>Download (90th Percentile)</th>
                <th>Upload (90th Percentile)</th>
            </tr>
        </thead>
        <tbody>
            {% for row in data|reverse %}
            <tr>
                <td>{{ row.timestamp }}</td>
                <td>{{ row.isp }}</td>
                <td>{{ row.latency }}</td>
                <td>{{ row.jitter }}</td>
                <td>{{ row.down_90th }}</td>
                <td>{{ row.up_90th }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}