{% extends "base.html" %}
{% block content %}
<div>
    <h1>{{ weekday }} &middot; {{ 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 %}

    <section class="events-section">
      <h2>Events</h2>
      {% if events %}
      <div class="event-grid">
        {% for event in events %}
        <a class="event-tile" href="{{ event['view_url'] }}">
          <img
            src="{{ event['thumbnail_url'] }}"
            alt="Event at {{ event['start_time'] }}"
            loading="lazy"
            onerror="this.style.display='none'"
          >
          <div class="event-meta">
            <span class="event-camera">{{ event['camera'] }}</span>
            <span class="event-time">{{ event['start_time'] }}</span>
            <span class="event-count">{{ event['snapshot_count'] }} frames</span>
          </div>
        </a>
        {% endfor %}
      </div>
      {% else %}
      <p>No motion events for this day.</p>
      {% endif %}
    </section>

    <section class="background-section">
      <a href="/days/{{ day }}/snapshots">Browse all snapshots</a>
    </section>

    {% if hours %}
    <details class="clips-section">
      <summary>Video clips ({{ hours | length }} hour{% if hours | length != 1 %}s{% endif %})</summary>
      {% 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 %}
          </div>
          <video
            src="/clips/{{ clip['id'] }}/video"
            {% if clip['thumbnail'] %}poster="/clips/{{ clip['id'] }}/thumbnail"{% endif %}
            controls
            preload="none"
            muted
          ></video>
          {% include "_keep_btn.html" %}
        </div>
        {% endfor %}
      </div>
      {% endfor %}
    </details>
    {% endif %}
</div>
{% endblock %}