{% load filters %}

{% if sport.icon %}
    <h5 class="text-center">
        <i class="fas fa-{{ sport.icon }}" style="color: {{ sport.color }};"></i>&nbsp;&nbsp;Summary&nbsp;&nbsp;
    </h5>
    <br>
{% endif %}
<center>
    Sum of all Activities:
</center>
<br>
<table class="table">
    <tr>
        <th scope="row"><i class="fas fa-hashtag" data-toggle="tooltip" data-placement="bottom"
                           title="Number of Activities"></i></th>
        <td>{{ summary.count }}</td>
    </tr>
    <tr>
        <th scope="row"><i class="fas fa-road" data-toggle="tooltip" data-placement="bottom"
                           title="Total Distance"></i></th>
        <td>{{ summary.distance }} km</td>
    </tr>
    <tr>
        <th scope="row"><i class="fas fa-history" data-toggle="tooltip" data-placement="bottom"
                           title="Total Duration"></i></th>
        <td>{{ summary.duration|duration }}</td>
    </tr>
</table>
<br>