{% extends "base.html" %}
{% from "fragments/export_menu.html" import export_menu %}
{% block title %}Voxint — transcript {{ run.id.hex[:8] }}{% 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>

{{ export_menu(run, text) }}

{% 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 }}'>
  {% 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 }}
  </p>
  {% endfor %}
</div>
{% endif %}
{% endblock %}