{% extends "base.html" %}
{% from "_event.html" import event_row with context %}
{% from "_when.html" import when_field with context %}
{% block body %}
{% include "_timer.html" %}

{#- THE PLAY SURFACE. Four big doors, nothing to configure. The photo door submits the
    moment a file is picked — one tap, camera, done. Badges come from each module's
    dashboard_card ("due", "3 open", "ready"). -#}
<section class="actions">
  <form method="post" action="/checkin/photo" enctype="multipart/form-data" class="action">
    <label class="btn primary act"><span class="ico">📸</span><span>Photo check-in</span>
      {# 🔴 The auto-submit belongs to intake.js, not to an inline onchange: a HEIC has to
         be converted BEFORE the POST, and an attribute handler would fire first and send
         the original. `data-autosubmit` is what intake.js keys the one-tap flow off.
         ⚠️ With JS off this input no longer submits itself — the fold below is the
         no-JS door, which is why it has a real submit button. -#}
      <input type="file" name="photo" accept="image/*" capture="environment" hidden data-autosubmit></label>
    <input type="hidden" name="here" value="">
  </form>
  {% for m, c in cards %}{% if m.nav %}
  <a class="btn act {{ 'lit' if c.badge else '' }}" href="{{ m.nav[0][1] }}"><span class="ico">{{ m.icon }}</span><span>{{ m.title }}</span>{% if c.badge %}<em class="pill">{{ c.badge }}</em>{% endif %}</a>
  {% endif %}{% endfor %}
</section>
<details class="card fold photo-more">
  <summary>📸 with a caption, or a photo from earlier</summary>
  <form class="row" method="post" action="/checkin/photo" enctype="multipart/form-data">
    <label>Photo <input type="file" name="photo" accept="image/*" required></label>
    <input type="hidden" name="here" value="">
    <label>Caption <input name="caption" placeholder="optional — stays in the log, never on the API"></label>
    <button class="primary">📸 Log it</button>
  </form>
  {{ when_field('⏱ taken earlier? set the time') }}
</details>

<section class="grid2">
{% if not st.active %}
  <form class="card lockform" method="post" action="/session/lock">
    <h2>Cage up</h2>
    <div class="row">
      <label>Days <input type="number" name="days" min="0" value="0"></label>
      <label>Hours <input type="number" name="hours" min="0" value="4"></label>
      <label>Minutes <input type="number" name="minutes" min="0" value="0"></label>
    </div>
    <button class="primary big">🔒 Cage up, pup</button>
    <details class="fold">
      <summary>more: dice · hidden timer · note · started earlier</summary>
      <div class="row">
        <label>Min hours <input type="number" step="0.5" name="random_min_hours" min="0" value="0"></label>
        <label>Max hours <input type="number" step="0.5" name="random_max_hours" min="0" value="0"></label>
      </div>
      <p class="hint">If max &gt; min, a random duration in that range wins over the fields above.</p>
      <label class="check"><input type="checkbox" name="hidden" value="1"> Hidden timer — you only ever see elapsed</label>
      <label>Note <input name="note" placeholder="what is this lock for?"></label>
      {{ when_field('⏱ already locked? set when it started', 'Locked since') }}
    </details>
  </form>
  <div class="card">
    <h3>Last lock</h3>
    {% if last %}
      <p class="bigstat">{{ last_state.elapsed|dur }}</p>
      <p class="hint">ended {{ last.ended_at|local }} · base {{ last_state.base_seconds|dur }} · adjustments {{ last_state.adjust_seconds|sdur }}</p>
      <div class="chips">
        <a class="chip on" data-share data-name="latch-recap-{{ last.id }}.jpg" href="/session/{{ last.id }}/recap.jpg">📤 share recap</a>
        <a class="chip" href="/session/{{ last.id }}/recap.jpg" download>⬇ recap card</a>
        {% if last.note %}<a class="chip" href="/session/{{ last.id }}/recap.jpg?note=1" download
           title="Burns this lock's private note into the card. The card is the share artefact.">+ note</a>{% endif %}
      </div>
    {% else %}
      <p class="hint">The kennel is quiet. The first lock starts the log.</p>
    {% endif %}
  </div>
{% else %}
  <div class="card">
    <h2>Clock <a class="gear" href="/settings#clock" title="quick buttons, undo window">⚙</a></h2>
    <div class="quick">
      {% for m in quick %}<form method="post" action="/session/adjust"><input type="hidden" name="seconds" value="{{ m * 60 }}"><input type="hidden" name="reason" value="quick"><button class="plus">+{{ (m * 60)|dur }}</button></form>{% endfor %}
      {% for m in quick %}<form method="post" action="/session/adjust"><input type="hidden" name="seconds" value="{{ -m * 60 }}"><input type="hidden" name="reason" value="quick"><button class="minus">−{{ (m * 60)|dur }}</button></form>{% endfor %}
    </div>
    {% if st.frozen %}
      <form class="row" method="post" action="/session/unfreeze"><button class="primary">🔥 Unfreeze</button>{{ when_field('⏱ thawed earlier?') }}</form>
    {% else %}
      <form class="row" method="post" action="/session/freeze">
        <label>Freeze for (min, 0 = until you say) <input type="number" name="minutes" min="0" value="0"></label>
        <button>🧊 Freeze</button>
        {{ when_field('⏱ froze earlier?') }}
      </form>
    {% endif %}
    <details class="fold">
      <summary>fine adjust · with a reason · for earlier</summary>
      <form class="row" method="post" action="/session/adjust">
        <label>Minutes <input type="number" name="minutes" min="1" value="30" required></label>
        <label>Direction <select name="direction"><option value="add">add</option><option value="remove">remove</option></select></label>
        <label>Reason <input name="reason" placeholder="optional"></label>
        <button>Apply</button>
        {{ when_field() }}
      </form>
    </details>
  </div>
  <div class="card">
    <h2>Session</h2>
    <form class="row" method="post" action="/session/note">
      <label>Note <input name="text" placeholder="how is your head, pup?" required></label>
      <button>📝 Log</button>
      {{ when_field() }}
    </form>
    {% if undo_ev %}
    {#- The label MUST name its target. A wheel spin with effect=freeze emits the spin
        and then the freeze at the same ts, and the (ts, id) sort makes the FREEZE the
        newest — so a bare "Undo" pressed after a spin would eat the freeze and leave
        the spin standing. Naming it makes that visible instead of surprising. -#}
    <form class="row" method="post" action="/session/undo">
      <label>Undo <input name="reason" placeholder="why? (optional)"></label>
      <button {{ 'disabled' if undo_why else '' }}>↩ {{ kind_meta.get(undo_ev.kind, ('•', undo_ev.kind))[1] }}{% if undo_ev.delta_seconds %} ({{ undo_ev.delta_seconds|sdur }}){% endif %}</button>
    </form>
    {% if undo_why %}<p class="hint">{{ undo_why }}</p>{% endif %}
    {% endif %}
    <hr>
    {% if st.can_unlock %}
      <form method="post" action="/session/unlock"><button class="primary big">🔓 Unlock — time served, good boy</button></form>
    {% else %}
      {# 🔴 A FOURTH LEAK, and the most direct of them: this confirm() printed `remaining`
         VERBATIM on a hidden lock — not an operand of end_at, the countdown itself, in a
         dialog you cannot avoid reading because you must click it. Gated like the clock. #}
      <form method="post" action="/session/unlock" onsubmit="return confirm('Use the emergency key?{% if not st.hidden %} {{ st.remaining|dur }} still on the clock.{% else %} You do not get to know how much was left.{% endif %} This is logged as an early unlock.')">
        <input type="hidden" name="force" value="1">
        <button class="danger">🗝 Emergency key</button>
      </form>
    {% endif %}
    <p class="hint"><a data-share data-name="latch-recap-{{ st.session_id }}.jpg" href="/session/{{ st.session_id }}/recap.jpg">📤 share where this lock stands</a></p>
  </div>
{% endif %}
</section>

{% include "_acts.html" %}

<section class="cards">
  {% for m, c in cards %}
  <div class="card mod">
    <h3>{{ m.icon }} {{ m.title }} <a class="gear" href="/settings#{{ m.name }}" title="{{ m.title }} settings">⚙</a></h3>
    {% include c.template %}
  </div>
  {% endfor %}
</section>

<section class="card">
  <h3>Recent <a class="more" href="/timeline">timeline →</a></h3>
  {% if recent %}<ul class="events">{% for e in recent %}{{ event_row(e, now) }}{% endfor %}</ul>
  {% else %}<p class="hint">The log is empty.</p>{% endif %}
</section>
{% endblock %}