{% 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" style="border: 0; margin: .5rem 0;">
  {% for v in variants %}
  <a href="/runs/{{ run.id }}/transcript?text={{ v.value }}"
     {% if text == v %}aria-current="page"{% endif %}>{{ v.value }}</a>
  {% endfor %}
</nav>

{{ export_menu(run) }}

{% if not lines %}
<p>No transcript segments for this run.</p>
{% 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) %}
  <p class="preview tp-line{% if idx is not none %} spk-{{ idx }}{% endif %}">
    <span class="t">[{{ "%.2f"|format(ln.start_seconds) }}–{{ "%.2f"|format(ln.end_seconds) }}]</span>
    {% 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 %}