{% extends "base.html" %}
{% block title %}Calendar · {{ app_name }}{% endblock %}
{#
  🔴 THE COLOURS ARE THE DATA. Each pip is one activity in that activity's own colour,
  so a day's colours name WHAT was done — strictly more informative than one channel of
  intensity-green, and it needs no palette decision because the colours are user rows.

  🔴 THE `late` MARK IS LOAD-BEARING, NOT DECORATION. Latch has had a retroactive log
  since 0.2.0, so a backdated entry can repair a broken streak — which is what the
  feature is for. But a grid that draws a repaired day identically to a lived one turns
  the retroactive log into a way to quietly rewrite history to yourself. The timeline
  already prints "↶ logged later"; the calendar says it too.
#}
{% block body %}
<h1>📅 {{ cal.label }} <small class="hint">what you did, in each thing's own colour</small></h1>

<section class="card">
  <div class="cal-head">
    <a class="btn" href="/calendar?m={{ cal.prev }}">← prev</a>
    <a class="btn" href="/calendar">today</a>
    {# a month in the future has nothing in it and a stepper that walks into empty grids
       forever reads as a bug — the link is simply absent past the current month. #}
    {% if cal.has_next %}<a class="btn" href="/calendar?m={{ cal.next }}">next →</a>
    {% else %}<span class="btn disabled" aria-disabled="true">next →</span>{% endif %}
  </div>

  <div class="cal">
    <div class="cal-dow">{% for d in ("Mon","Tue","Wed","Thu","Fri","Sat","Sun") %}<span>{{ d }}</span>{% endfor %}</div>
    {% for week in cal.weeks %}
    <div class="cal-week">
      {% for d in week %}
      <div class="cal-day{{ ' out' if not d.in_month }}{{ ' today' if d.today }}{{ ' fut' if d.future }}">
        <b>{{ d.dom }}</b>
        {% if d.acts %}
        <div class="pips">
          {% for a in d.acts %}
          <i class="pip{{ ' late' if a.late }}" style="--c:{{ a.color }}"
             title="{{ a.icon }} {{ a.title }} · {{ a.n }}×{{ ' · logged later' if a.late else '' }}"></i>
          {% endfor %}
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
    {% endfor %}
  </div>

  <div class="cal-legend">
    {% for a in cal.activities %}
    <span class="lg"><i style="--c:{{ a.color }}"></i>{{ a.icon }} {{ a.title }}</span>
    {% endfor %}
    <span class="lg"><i class="late-key"></i>↶ logged later</span>
  </div>
  {% if not cal.activities %}
  <p class="hint">No activities yet — add one in <a href="/settings#activities">Settings</a> and this
    fills in from the log you already have.</p>
  {% endif %}
</section>

{% include "_acts.html" %}
{% endblock %}