{% extends "base.html" %}
{% from "fragments/export_menu.html" import export_menu %}
{% from "fragments/outline_fallback.html" import outline_fallback %}
{% block title %}Voxint — transcript {{ run.id.hex[:8] }}{% endblock %}
{# Canonical parent, no origin tracking: transcripts belong to Runs. #}
{% block cb_breadcrumb %}runs / <strong>{{ run.id.hex[:8] }}</strong>{% endblock %}
{% block body %}
<p><a href="/runs/{{ run.id }}">← run</a></p>
<h1>Transcript <code>{{ run.id.hex[:8] }}</code></h1>
<p class="muted"><code>{{ run.media_item.source_path }}</code></p>

<nav class="top tab-strip" aria-label="Transcript version">
  {% for v in variants %}
  <a href="/runs/{{ run.id }}/transcript?text={{ v.value }}{% if read %}&read=1&timestamps={{ 'true' if read_timestamps else 'false' }}{% endif %}"
     {% if text == v %}aria-current="page"{% endif %}>{{ v.value }}</a>
  {% endfor %}
</nav>

{# Read mode (issue #65): plain-anchor toggles, no JS. Each link preserves the
   current text variant so switching views never loses the reading position. The
   reading-view entry deliberately opens timestamp-free (the shareable "reading
   copy"); a within-mode toggle brings timestamps back. #}
<nav class="top tab-strip" aria-label="Reading view options">
  {% if read %}
  <a href="/runs/{{ run.id }}/transcript?text={{ text.value }}">Exit reading view</a>
  <a href="/runs/{{ run.id }}/transcript?text={{ text.value }}&read=1&timestamps={{ 'false' if read_timestamps else 'true' }}">{% if read_timestamps %}Hide timestamps{% else %}Show timestamps{% endif %}</a>
  {% else %}
  <a href="/runs/{{ run.id }}/transcript?text={{ text.value }}&read=1&timestamps=false">Reading view</a>
  {% endif %}
</nav>

{# Translation toggle (issue #133): one link per current generation. A fresh
   generation links to the interleaved view; a stale one links to the run page
   card, where Re-translate lives. Rendered on the CORRECTED variant only —
   translations pair with the reviewed text, so raw/enhanced views never
   advertise a toggle whose links would silently switch the rendition (review
   finding). Absent in reading view and when the run has no translations. #}
{% if not read and text.value == "corrected" and translation_ctx.views %}
<nav class="top tab-strip" aria-label="Translation">
  <a href="/runs/{{ run.id }}/transcript?text=corrected"
     {% if not translation_ctx.active %}aria-current="page"{% endif %}>Original only</a>
  {% for tv in translation_ctx.views %}
  {% if tv.stale %}
  <a href="/runs/{{ run.id }}#run-translation-{{ run.id }}"
     title="Out of date — the transcript changed since this translation was generated. Re-translate on the run page.">{{ tv.label }} (out of date)</a>
  {% else %}
  <a href="/runs/{{ run.id }}/transcript?text=corrected&amp;translation={{ tv.code }}"
     {% if translation_ctx.active and translation_ctx.active.language == tv.code %}aria-current="page"{% endif %}>{{ tv.label }}</a>
  {% endif %}
  {% endfor %}
</nav>
{% endif %}
{% if not read and translation_ctx.note %}
<p class="muted">{{ translation_ctx.note }}</p>
{% endif %}
{% if not read and translation_ctx.active %}
<p class="muted">Machine-translated to {{ translation_ctx.active.label }}
  {%- if translation_ctx.active.source_language %} from {{ language_label(translation_ctx.active.source_language) }}{% endif %}
  by {{ translation_ctx.active.model }},
  {{ translation_ctx.active.completed_at.strftime("%Y-%m-%d %H:%M") }} —
  a working rendition, not a certified translation.</p>
{% endif %}

{{ export_menu(run, text, translation_ctx.fresh) }}

{% if not lines %}
<p>No transcript segments for this run.</p>
{% elif read %}
{# Server-rendered reading view: one heading + paragraph per contiguous
   same-speaker run. Grouping and timestamp formatting are done in Python
   (paragraphize_transcript / format_timespan); the template only lays out the
   supplied rows. Jinja autoescape keeps hostile transcript text literal. #}
<div class="read-mode">
  {% for row in read_rows %}
  <section class="read-para">
    <h2>{{ row.speaker }}</h2>
    <p class="read-body">{% if row.timespan %}<span class="t">{{ row.timespan }}</span> {% endif %}{% for tl in row.lines %}{% if not loop.first %}<br>{% endif %}{{ tl }}{% endfor %}</p>
  </section>
  {% endfor %}
</div>
{% else %}
{# Island mount point (issue #48): the transcript-player island renders the
   audio-synced view over this fallback once hydrated. The server-rendered loop
   below is fully functional with JS disabled, htmx off, or the asset route
   misconfigured — the same "degrades to plain HTML" guarantee the rest of the
   console has. Islands are leaf nodes htmx does not swap. #}
<div data-island="transcript-player" data-props='{{ island_props|tojson }}'>
  {# Navigable outline (issue #87): the same INERT JS-off / pre-hydration list
     the review workbench shows, from the shared macro. The transcript-player
     island root replaces this markup (OutlinePanel + player) on its first
     render; without JS it stays a readable, non-interactive list. #}
  {{ outline_fallback(island_props.outline) }}
  {% 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.diarization_label %}<span class="spk-badge">{{ ln.diarization_label }}</span>{% endif %}
    {% if ln.speaker != ln.diarization_label %}<strong>{{ ln.speaker }}:</strong>{% endif %}
    {{ ln.text }}
    {# Interleaved translation (issue #133): the fresh generation's line, by
       order — the same texts the hydrated island renders. Empty lines add no
       row. #}
    {% if translation_ctx.active and translation_ctx.active.texts[loop.index0] %}
    <span class="tp-translation" lang="{{ translation_ctx.active.language }}">{{ translation_ctx.active.texts[loop.index0] }}</span>
    {% endif %}
  </p>
  {% endfor %}
</div>
{% endif %}
{% endblock %}