{% extends "base.html" %}
{% block content %}
  <div hx-get="/live-snapshots" hx-trigger="load, every 30s" hx-swap="outerHTML">
    <div class="live-strip" style="min-height: 200px;"></div>
  </div>
<div class="cal-nav">
  <a href="{{ prev_url }}">&#9664;</a>
  <a href="{{ next_url }}">&#9654;</a>
</div>
<div class="cal-grid">
  {% for month in months %}
  <div class="cal-month">
    <h2 class="cal-month-name">{{ month.name }}</h2>
    <table class="cal-table">
      <thead>
        <tr>
          <th>Mo</th><th>Tu</th><th>We</th><th>Th</th><th>Fr</th><th>Sa</th><th>Su</th>
        </tr>
      </thead>
      <tbody>
        {% for week in month.weeks %}
        <tr>
          {% for cell in week %}
          {% if cell is none %}
          <td class="cal-empty"></td>
          {% elif cell.has_footage %}
          <td class="cal-day{% if cell.is_today %} cal-today{% endif %}">
            <a href="/days/{{ cell.date }}">
              <span class="cal-num">{{ cell.day_num }}</span>
              <span class="cal-events">{{ cell.event_count }}e</span>
              <span class="cal-snaps">{{ cell.snapshot_count }}</span>
            </a>
          </td>
          {% else %}
          <td class="cal-day cal-no-footage">
            <span class="cal-num">{{ cell.day_num }}</span>
          </td>
          {% endif %}
          {% endfor %}
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endfor %}
</div>
{% endblock %}