{% extends "modal/content.html" %}

{% load converter %}

{% block modal_title %}
    Session <strong>{{ object.name }}</strong>
{% endblock %}

{% block modal_body %}
    <div class="row">
        <div class="col-12">
            <table class="small table table-sm">
                <tr>
                    <th>Start</th>
                    <th class="text-right">End</th>
                    <th class="text-right">Uptime</th></tr>
                {% for stretch in object.stretches.with_duration.active %}
                    <tr>
                        <td>{{ stretch.start }}</td>
                        <td class="text-right">{{ stretch.end }}</td>
                        <td class="text-right">{{ stretch.duration|default:"Active" }} {% if stretch.duration|natural_duration %}minutes{% endif %}</td>
                    </tr>
                {% endfor %}
                {% for stretch in object.stretches.with_duration %}
                    <tr>
                        <td>{{ stretch.start }}</td>
                        <td class="text-right">{{ stretch.end }}</td>
                        <td class="text-right">{{ stretch.duration | natural_duration }}</td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    </div>
{% endblock %}