{% if not q %}
  <div class="empty">This question no longer exists.</div>
{% else %}
<article class="detail" data-qkey="{{ qkey }}">
  <header>
    <span class="mono">{{ qkey }}</span>
    <span class="pill st-{{ q.state }}"><span class="dot"></span>{{ LABELS[q.state] }}</span>
    {% if q.asked_at %}<span class="muted small">asked {{ q.asked_at[:16]|replace('T', ' ') }}</span>{% endif %}
  </header>

  {% if done %}<div class="banner ok">{{ done }} — saved. The change is measured on the next run.</div>{% endif %}
  {% if error %}<div class="banner err">{{ error }}</div>{% endif %}
  {% if conflict %}<div class="banner warn">Changed by {{ conflict.who }} {{ (conflict.at or '')[:16]|replace('T', ' ') }} while you were looking. The panel was reloaded — decide again.</div>{% endif %}

  <form hx-post="/action/{{ qkey }}" hx-target="#panel" hx-swap="innerHTML" hx-indicator="#panel">
    <input type="hidden" name="agent" value="{{ agent }}">
    <input type="hidden" name="version" value="{{ q.version }}">
    <input type="hidden" name="filter" value="{{ filter or 'inbox' }}">

    {% if q.state == 'new' %}
      <label>The question, standing alone <span class="muted">(rewrite if it builds on earlier turns)</span>
        <input name="question_text" value="{{ q.question }}"></label>
      {% if context %}<div class="ctx">Earlier in the conversation: {% for c in context|reverse %}<b>{{ c.question }}</b>{% if not loop.last %} → {% endif %}{% endfor %}</div>{% endif %}
    {% else %}
      <h2>{{ q.question }}</h2>
    {% endif %}

    {% set editable = actions|select('in', ['promote_test', 'promote_example', 'write_golden', 'fix_golden'])|list %}
    {% set sql_now = q.golden_sql or (q.genie_sql if editable else none) %}
    {% set failed = last and last.assessment != 'good' and last.actual_sql %}
    {# The truth check is the NUMBER (decision #30): result rows first, loaded on open; SQL folded below. Failed tests show both answers side by side.
       hx-target="this" is not optional: htmx inherits the form's hx-target="#panel", and the rows would replace the whole panel (odense, 2026-09-20). #}
    <div class="{% if failed %}compare{% endif %}">
      <section>
        <label>{% if q.state == 'new' %}What the user saw <span class="muted">— Genie's answer; is the number right?</span>{% else %}The correct answer{% endif %}</label>
        {% if sql_now %}<div class="preview" hx-post="/run_sql" hx-trigger="load" hx-target="this" hx-indicator="this" hx-vals='{{ {"statement": sql_now}|tojson }}' hx-swap="innerHTML"><span class="muted small">running…</span></div>
        {% else %}<div class="muted small">No SQL yet.</div>{% endif %}
      </section>
      {% if failed %}
      <section>
        <label>Genie's answer now <span class="muted">— {{ last.started_at[:16]|replace('T', ' ') }} · <b class="as-{{ last.assessment }}">{{ {'good':'correct','bad':'wrong'}.get(last.assessment, 'needs review') }}</b></span></label>
        {% if reasons %}<ul class="reasons">{% for x in reasons %}<li>{{ REASON.get(x, x) }}</li>{% endfor %}</ul>{% endif %}
        <div class="preview" hx-post="/run_sql" hx-trigger="load" hx-target="this" hx-indicator="this" hx-vals='{{ {"statement": last.actual_sql}|tojson }}' hx-swap="innerHTML"><span class="muted small">running…</span></div>
      </section>
      {% endif %}
    </div>

    {% if editable %}
      <details class="sqlbox"><summary>SQL <span class="muted small">{% if q.state == 'new' %}— Genie's draft; fix it to what the user should have seen{% elif q.state == 'candidate' %}— write it here first{% else %}— edit only if the number above is wrong{% endif %}</span></summary>
        <textarea name="golden_sql" rows="8" spellcheck="false">{{ q.golden_sql or q.genie_sql or '' }}</textarea>
        <div class="bar"><button type="button" class="ghost small" hx-post="/run_sql" hx-include="closest form" hx-target="next .preview">Run</button><span class="muted small">first 20 rows</span></div>
        <div class="preview"></div>
      </details>
    {% elif q.golden_sql %}
      <details class="sqlbox"><summary>SQL</summary><pre>{{ q.golden_sql }}</pre></details>
    {% endif %}
    {% if last and last.actual_sql %}<details class="sqlbox"><summary>Genie's SQL</summary><pre>{{ last.actual_sql }}</pre></details>
    {% elif last %}<p class="muted small">Genie gave no SQL on {{ last.started_at[:16]|replace('T', ' ') }} · <b class="as-{{ last.assessment }}">{{ {'good':'correct','bad':'wrong'}.get(last.assessment, 'needs review') }}</b></p>{% endif %}

    {% set tags = [q.difficulty, q.measure, q.measure_variant, q.time_period, q.filters]|select|list %}
    {% if tags or q.expected_answer or q.note %}<details class="note"><summary>From the test set</summary>
      {% if tags %}<p class="tags">{% for t in tags %}<span class="tag">{{ t }}</span>{% endfor %}</p>{% endif %}
      {% if q.expected_answer %}<p><b>Expected:</b> {{ q.expected_answer }}</p>{% endif %}
      {% if q.note %}<p>{{ q.note }}</p>{% endif %}</details>{% endif %}

    {% if actions %}
    <label>Note <span class="muted">(why)</span><input name="note" placeholder="optional"></label>
    <div class="actions">
      {% for a in actions if a not in DISMISS %}<button name="action" value="{{ a }}" class="{% if a in PRIMARY %}primary{% endif %}">{{ ACTIONS[a][2] }}</button>{% endfor %}
      <span class="spacer"></span>
      {% for a in actions if a in DISMISS %}<button name="action" value="{{ a }}" class="ghost">{{ ACTIONS[a][2] }}</button>{% endfor %}
    </div>
    {% endif %}
  </form>

  {% if events %}
  <details class="timeline" open><summary>History</summary>
    <ol>{% for e in events %}<li><span class="muted">{{ e.at[:16]|replace('T', ' ') }}</span> {{ e.who }} · {{ e.action }}{% if e.from_state %} {{ LABELS.get(e.from_state, e.from_state) }} →{% endif %} {{ LABELS.get(e.to_state, e.to_state) }}{% if e.note %} — <i>{{ e.note }}</i>{% endif %}</li>{% endfor %}</ol>
  </details>
  {% endif %}
</article>
{% endif %}