{% load filters %}

{% if laps %}
    <div class="col-sm-5">
        <div class="card">
            <div class="card-header">
                <h4 class="card-title">Laps</h4>
            </div>
            <div class="card-body">
            <table class="table table-hover table-borderless">
                <thead>
                    <tr>
                        <th>#</th>
                        <th data-toggle="tooltip" data-placement="top" title="hh:mm:ss">Time</th>
                        <th data-toggle="tooltip" data-placement="top" title="m">Distance</th>
                        <th data-toggle="tooltip" data-placement="top" title="min/km">Pace</th>
                        <th>Label</th>
                    </tr>
                </thead>
                <tbody>
                {% for lap in laps %}
                    <tr class="lap_row">
                        <td>{{ forloop.counter }}</td>
                        <td>{{ lap.elapsed_time|h_m_s }}</td>
                        <td>{{ lap.distance|to_int }}</td>
                        <td>{{ lap.speed|speed_to_pace }}</td>
                        {% if lap.label %}
                            <td>{{ lap.label }}</td>
                        {% else %}
                            <td>-</td>
                        {% endif %}
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            </div>
        </div>
    </div>

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