{% extends "base.html" %}
{% from "fragments/review_journey.html" import review_journey %}
{% block title %}Voxint — check the words: {{ run_source_title(run) }}{% endblock %}
{% block body %}
{# Backward nav only (issue #117 Phase B): "the people" is Step 1, the workbench.
   The sequence never promotes a sideways jump; a step's own Continue moves it
   forward. #}
<p><a href="/review/{{ run.id }}{% if token %}?token={{ token }}{% endif %}">← Back to the people</a></p>

{# Shared identity + two-step sequence (issue #117 Phase B); this is Step 2
   ("check the words"), matching the workbench header so the two screens read as
   one journey. The fragment is static; the claim-state line below OWNS the claim
   state. #}
<header class="review-head">
  {{ review_journey(run, 2) }}
  {# This server-rendered line OWNS the claim state, JS on or off — the island
     deliberately renders no unclaimed notice of its own (review finding: the two
     copies used to double up after hydration). The inner span keeps the text one
     flex item so it wraps normally beside the status dot. #}
  {% if token %}
  <p class="claim-state">Claimed by you — verify and edit are enabled.</p>
  {% else %}
  <p class="claim-state off"><span>Not claimed by this tab — verifying and editing
    are disabled. <a href="/review/{{ run.id }}">Claim this run in the workbench</a>
    to review.</span></p>
  {% endif %}
</header>

<p class="muted"><a href="/runs/{{ run.id }}/transcript">Read the full transcript</a>
  (you can switch between versions there).</p>

{% if not lines %}
<p>No transcript segments for this run.</p>
{% else %}
{# Island mount (issue #53): the review-stepper hydrates the verify-and-advance
   loop + inline edit over this fallback. JS-off, the list below is fully usable:
   each unverified segment carries a plain verify form that POSTs and redirects
   back here (the write route content-negotiates). Inline TEXT editing needs the
   island — stated honestly, never faked. The progress track (issue #92) keeps
   the count as visible text; the bar is aria-hidden decoration. #}
<div data-island="review-stepper" data-props='{{ island_props|tojson }}'>
  {# Same card the hydrated island renders, so JS-off/island-failure does not
     drop the flagship surface (hydration replaces this innerHTML wholesale). #}
  {% set all_checked = progress.total > 0 and progress.verified >= progress.total %}
  <div class="review-stepper">
    <div class="progress-wrap">
      <p><strong>{{ progress.verified }}</strong> of <strong>{{ progress.total }}</strong>
        segments verified.{% if all_checked %} You have checked every line.{% endif %}</p>
      {% if progress.total > 0 %}
      <span class="progress-track" aria-hidden="true"><span
        style="width: {{ "%.1f"|format(progress.verified / progress.total * 100) }}%"></span></span>
      {% endif %}
    </div>
    {# Step 2 terminal action (issue #117 Phase B). Checking the words is
       recommended navigation, never a durable whole-run completion flag (Phase 0
       contract), so this offers plain next actions and sets no state. It stays
       neutral: checking the words does not prove speaker labels are resolved, so
       it never calls the run "finished". The island renders the live equivalent
       once JS is on. #}
    {% if all_checked %}
    <div class="review-done card-actions">
      <a class="btn-primary" href="/runs/{{ run.id }}/transcript">Open the transcript to export</a>
      <a href="/review">Back to Review</a>
    </div>
    {% endif %}
  </div>
  {% for ln in lines %}
  {% set idx = palette.get(ln.diarization_label) %}
  {% set uncertain = ln.confidence is not none and ln.confidence < low_confidence_threshold %}
  <p class="preview tp-line{% if idx is not none %} spk-{{ idx }}{% endif %}{% if uncertain %} tp-uncertain{% endif %}">
    <span class="t">[{{ "%.2f"|format(ln.start_seconds) }}–{{ "%.2f"|format(ln.end_seconds) }}]</span>
    {% if uncertain %}<span class="tp-uncertain-chip" title="Low ASR confidence — uncertain, not necessarily wrong">uncertain</span>{% endif %}
    {% if ln.verified %}<span class="spk-badge" title="Verified by the operator">verified</span>{% endif %}
    {% if ln.corrected %}<span class="spk-badge" title="Edited by the operator">edited</span>{% endif %}
    {% if ln.diarization_label %}<span class="spk-badge">{{ ln.diarization_label }}</span>{% endif %}
    {% if ln.speaker != ln.diarization_label %}<strong>{{ ln.speaker }}:</strong>{% endif %}
    {{ ln.text }}
    {% if token and ln.segment_id and not ln.verified %}
    <form method="post" action="/review/{{ run.id }}/segments/{{ ln.segment_id }}/verify" class="inline">
      <input type="hidden" name="token" value="{{ token }}">
      <input type="hidden" name="verified" value="true">
      <button type="submit">Verify</button>
    </form>
    {% endif %}
  </p>
  {% endfor %}
  {# Highlights fallback (issue #86): a read-only list of the run's annotations for
     JS-off / pre-hydration. Sits INSIDE the island wrapper, so hydration replaces
     it with the interactive Highlights panel. Creating and editing highlights
     needs the island — stated honestly, never faked. #}
  {% if island_props.annotations %}
  <section class="highlights-fallback" aria-label="Highlights">
    <h2>Highlights ({{ island_props.annotations|length }})</h2>
    <p class="muted">Read-only list. Creating and editing highlights needs JavaScript.</p>
    <ul>
      {% for a in island_props.annotations %}
      <li>
        <span class="hl-swatch hl-{{ a.colorIndex }}" aria-hidden="true"></span>
        <span class="muted">
          {%- if a.startSeconds is not none and a.endSeconds is not none -%}
            {% if a.timingPrecision != "word" %}≈ {% endif %}{{ "%.2f"|format(a.startSeconds) }}–{{ "%.2f"|format(a.endSeconds) }}s
          {%- else -%}timing unavailable{%- endif -%}
        </span>
        {% if a.speakers %}<span class="spk-badge">{{ a.speakers|join(", ") }}</span>{% endif %}
        {% if a.stale %}<span class="hl-stale-locator">stale</span>{% endif %}
        <blockquote class="highlight-quote">“{{ a.quote }}”</blockquote>
        {% if a.tags %}<span class="highlight-tags">{% for t in a.tags %}<span class="tag-pill hl-{{ t.color }}">{{ t.name }}</span>{% endfor %}</span>{% endif %}
        {% if a.note %}<p class="highlight-note">{{ a.note }}</p>{% endif %}
      </li>
      {% endfor %}
    </ul>
  </section>
  {% endif %}
</div>
{% endif %}
{% endblock %}