{% extends "base.html" %}
{% block content %}
<div>
    <h1>{{ weekday }} &middot; {{ day }}</h1>

    <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>
</div>
{% endblock %}