{% load filters %}
<style>
    .table-scroll {
        height: 300px;
        overflow: scroll;
    }

    thead tr:nth-child(1) th {
        background: white;
        position: sticky;
        top: 0;
        z-index: 10;
    }
</style>

<div class="table-scroll">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Rank</th>
                <th>Fastest</th>
                <th>Date</th>
                <th>Activity</th>
                <th>Speed</th>
            </tr>
        </thead>
        <tbody>
            {% for award in top_award %}
            <tr>
                {% if award.rank == 1 %}
                    <td><i class="fas fa-trophy" style="color: gold;" data-toggle="tooltip" data-placement="bottom"
                            title="1st Place"></i></td>
                {% elif award.rank == 2 %}
                    <td><i class="fas fa-trophy" style="color: silver;" data-toggle="tooltip" data-placement="bottom"
                            title="2nd Place"></i></td>
                {% elif award.rank == 3 %}
                    <td><i class="fas fa-trophy" style="color: burlywood;" data-toggle="tooltip" data-placement="bottom"
                            title="3rd Place"></i></td>
                {% else %}
                    <td>{{ award.rank }}</td>
                {% endif %}
                <td>{{ award.section_distance }} km</td>
                <td>{{ award.activity.date|date:"M d, Y" }}</td>
                <td class="limit">
                    <a href="/activity/{{ award.activity.pk }}">{{ award.activity.name }}</a>
                </td>
                <td>{{ award.max_value | m_per_s_to_km_per_h }} km/h</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
