{% extends "layout.html" %}
{% block body %}
<summary>
    <div id=status class=center>
        <div>
            <div>Capture</div>
            {% if recording %}
            <div class=active>Recording</div>
            {% else %}
            <div class=inactive>Idle</div>
            {% endif %}
        </div>

        <div>
            <div>Upload</div>
            {% if uploading %}
            <div class=active>Uploading</div>
            {% else %}
            <div class=inactive>Idle</div>
            {% endif %}
        </div>

        <div>
            <div>Upcoming</div>
            <div class=inactive>{{ upcoming }}</div>
        </div>

        <div>
            <div>Processed</div>
            <div class=inactive>{{ processed }}</div>
        </div>
    </div>
</summary>

<main class=center>
<section id=preview>
    <h2>Preview Images</h2>
    {% for p in preview %}
        <img src="/img/{{ p }}" />
    {% else %}
        No preview image
    {% endfor %}
</section>

<section>
    <h2>Recordings</h2>
    <table>
        <tr>
            <th>Start</th>
            <th>End</th>
            <th>Status</th>
        </tr>
        {% if upcoming > limit_upcoming %}
        <tr class=extendlist>
            <td colspan=3>
                <a href={{ url_for('home', limit_processed=limit_processed,
                                   limit_upcoming=limit_upcoming+5) }}>…</a>
            </td>
        </tr>
        {% endif %}
        {% for e in upcoming_events %}
        <tr class=upcoming>
            <td>{{ dtfmt(e.start) }}</td>
            <td>{{ dtfmt(e.end) }}</td>
            <td>upcoming</td>
        </tr>
        {% endfor %}
        {% for e in recorded_events %}
        <tr>
            <td>{{ dtfmt(e.start) }}</td>
            <td>{{ dtfmt(e.end) }}</td>
            <td>{{ e.status_str() }}</td>
        </tr>
        {% endfor %}
        {% if processed > limit_processed %}
        <tr class=extendlist>
            <td colspan=3>
                <a href={{ url_for('home', limit_processed=limit_processed+10,
                                   limit_upcoming=limit_upcoming) }}>…</a>
            </td>
        </tr>
        {% endif %}
    </table>

</section>
</main>
{% endblock %}