{% extends "base.html" %}
{% block title %}Voxint — review transcript {{ run.id.hex[:8] }}{% endblock %}
{% block body %}
<p><a href="/review/{{ run.id }}{% if token %}?token={{ token }}{% endif %}">← workbench</a></p>
<h1>Review transcript <code>{{ run.id.hex[:8] }}</code></h1>
<p class="muted"><code>{{ run.media_item.source_path }}</code></p>

{# 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 %}

<p class="muted"><a href="/runs/{{ run.id }}/transcript">Read-only transcript</a>
  (raw ASR evidence, all variants).</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). #}
  <div class="review-stepper">
    <div class="progress-wrap">
      <p><strong>{{ progress.verified }}</strong> of <strong>{{ progress.total }}</strong>
        segments verified.</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>
  </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 %}