<style>
    .table-scroll {
        height: 140px;
        overflow: scroll;
    }
</style>


{% load filters %}
<div class="table-scroll">
    <table class="table table-hover table-borderless text-muted table-sm">
        {% for section in fastest_sections %}
        <tr class="section_row">
            <td><i class="fas fa-medal"></i>&nbsp; {{ section.section_distance }}km</td>
            <td>{{ section.max_value | m_per_s_to_km_per_h }} km/h</td>
            <td>
                {% for top_award in top_awards %}
                    {% if section.pk == top_award.pk %}
                        {% if top_award.rank == 1 %}
                            <i class="fas fa-trophy" data-toggle="tooltip" data-placement="bottom" title="1st Place in this Section"
                                style="color: gold;"></i>
                        {% elif top_award.rank == 2 %}
                            <i class="fas fa-trophy" data-toggle="tooltip" data-placement="bottom" title="2nd Place in this Section"
                                style="color: silver;"></i>
                        {% elif top_award.rank == 3 %}
                            <i class="fas fa-trophy" data-toggle="tooltip" data-placement="bottom" title="3rd Place in this Section"
                                style="color: burlywood;"></i>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            </td>
            </td>
        </tr>
        {% endfor %}
    </table>
</div>
<br>

<script>
var tableRows=document.getElementsByClassName('section_row');
for (var i=0; i < tableRows.length; i +=1) {
    tableRows[i].addEventListener('mouseover', function(e) {
        let row_index = $(this).index();
            render_fastest_sections(row_index);
        }
    );
    tableRows[i].addEventListener('mouseout', function(e) {
        let row_index = $(this).index();
            hide_fastest_sections(row_index);
        }
    );
}
</script>
