{% extends "base.html" %}{% block title %}Trance · {{ app_name }}{% endblock %}
{% block body %}
<section class="card">
  <h1>🌀 Trance</h1>
  <p class="hint">
    Tones, a breath pacer, and a fixed length. Headphones on, on your side or your back —
    <strong>not face-down, and not face-down in a hood.</strong>
    <a href="/guide/trance">What this is and what is not watching you →</a>
  </p>

  {% if live %}
    <p class="flash ok">A sit is running — {{ live.score_title }}, started {{ live.started_at|rel(now) }}.</p>
    <a class="btn primary" href="/trance/play/{{ live.score_slug }}">🌀 back to it</a>
  {% endif %}

  {#- 🔴 The left/right check is not decoration and it is not a formality. Binaural exists
      only as a difference between two ears: on one earbud each channel is a featureless
      sine and the effect is simply absent, while a speaker sums them into a real acoustic
      beat, which is a DIFFERENT stimulus. No API can tell — destination.maxChannelCount
      reads 2 for a single AirPod and 8 on this machine. Only the human can answer. -#}
  {% if not channels_ok %}
  <div class="card fold" id="hpcheck">
    <h2>First, one check</h2>
    <p class="hint">Three taps. Nothing is stored but the answer.</p>
    <p>
      <button class="btn" type="button" data-hp="left">← left</button>
      <button class="btn" type="button" data-hp="right">right →</button>
      <button class="btn primary" type="button" data-hp="confirm" disabled>they came from different sides</button>
    </p>
    <p class="hint" id="hpsay">Play each one. If both sound like they are in the middle, or you
      only hear one, you are not set up for binaural — use a speaker-safe score when there is one.</p>
  </div>
  {% endif %}

  <form class="card" method="get" action="#" id="picker">
    <h2>Pick a sit</h2>
    {% for s, sc in library.items() %}
    <label class="row">
      <input type="radio" name="slug" value="{{ s }}" {{ 'checked' if s == slug }}>
      <span><strong>{{ sc.title }}</strong>
        <small class="hint">{{ sc.segments|map(attribute='name')|join(' → ') }}</small></span>
    </label>
    {% endfor %}
    <p class="row">
      <span>Length</span>
      {% for m in lengths.get(slug, [30, 45, 60]) %}
      <label class="chip"><input type="radio" name="minutes" value="{{ m }}" {{ 'checked' if m == minutes }}> {{ m }} min</label>
      {% endfor %}
    </p>
    <p class="hint">Ceiling is {{ ceiling }} minutes — raise it in <a href="/settings#trance">settings</a> if you mean it.</p>
    <p><a class="btn primary" id="go" href="/trance/play/{{ slug }}?minutes={{ minutes }}">Start →</a></p>
  </form>
</section>

{% if recent %}
<section class="card">
  <h2>Recent sits</h2>
  <p class="hint">{{ t.real_sits }} of them ran twenty minutes or more, across {{ t.days }} day{{ '' if t.days == 1 else 's' }}.</p>
  <table class="lib">
    <thead><tr><th>When</th><th>Score</th><th>Planned</th><th>Actual</th><th></th></tr></thead>
    <tbody>
    {% for r in recent %}
      <tr>
        <td>{{ r.started_at|local }}</td>
        <td>{{ r.score_title }}</td>
        <td>{{ r.planned_seconds|dur }}</td>
        {#- ⚠️ NULL actual_seconds is an abandoned sit: nobody knows how long it played and
            the wall clock is not an answer. It prints as a dash, never as a number. -#}
        <td>{% if r.actual_seconds is none %}<span class="hint">—</span>{% else %}{{ r.actual_seconds|dur }}{% endif %}</td>
        <td><small class="hint">{{ r.outcome }}{% if r.interrupted_seconds %} · {{ r.interrupted_seconds|dur }} interrupted{% endif %}</small></td>
      </tr>
    {% endfor %}
    </tbody>
  </table>
</section>
{% endif %}
{% endblock %}
{% block scripts %}<script src="/static/trance-door.js"></script>{% endblock %}