{% extends "base.html" %}
{% block content %}
<div class="day-layout">
  {% if hours %}
  <nav class="hour-nav">
    {% for hour in hours %}<a href="#h{{ hour[-2:] }}">{{ hour[-2:] }}:00</a>
    {% endfor %}
  </nav>
  {% else %}
  <div></div>
  {% endif %}
  <div class="day-content">
    <h1>{{ day }}</h1>
    {% if pending_count %}
    <div class="processing-banner">
      {{ pending_count }} clip{% if pending_count != 1 %}s{% endif %} still being converted &mdash; refresh to see them when ready.
    </div>
    {% endif %}
    {% if hours %}
      {% for hour, clips in hours.items() %}
      <div id="h{{ hour[-2:] }}" class="hour-heading">{{ hour[-2:] }}:00</div>
      <div class="clip-grid">
        {% for clip in clips %}
        <div class="clip-tile">
          <div class="clip-meta">
            <span class="clip-camera">{{ clip["camera"] }}</span>
            {% if 'M' in (clip['flags'] or '') %}<span class="flag flag-motion">Motion</span>{% endif %}
            {% if 'F' in (clip['flags'] or '') %}<span class="flag flag-firstframe">First frame</span>{% endif %}
            <span class="clip-filename">{{ clip["filename"] }}</span>
          </div>
          <video
            src="/clips/video/{{ clip['camera'] }}/{{ clip['filename'] }}"
            {% if clip['thumbnail'] %}poster="/clips/{{ clip['id'] }}/thumbnail"{% endif %}
            controls
            preload="none"
            muted
          ></video>
          {% include "_keep_btn.html" %}
        </div>
        {% endfor %}
      </div>
      {% endfor %}
    {% else %}
    <p>No clips for this day.</p>
    {% endif %}
  </div>
</div>
{% endblock %}