{% extends "base.html" %}
{% from "fragments/export_menu.html" import export_menu %}
{% block title %}Voxint — {{ media_label }}{% endblock %}

{% block cb_breadcrumb %}media / <strong>{{ media_label|lower|replace(" ", "-") }}</strong>{% endblock %}
{% block cb_summary %}
{%- if progress.total > 0 -%}
  {{ progress.verified }}/{{ progress.total }} verified
{%- elif selected_run -%}
  {{ selected_run.status }}
{%- else -%}
  no runs
{%- endif -%}
{% endblock %}

{% block body %}
{# Media detail page with the editor island (Console 2.0 P3a/P3b, issues
   #156/#157). Renders run metadata, a run chooser, and — when a completed run
   is selected — the media-editor island with a server-rendered transcript
   table as JS-off fallback. #}

<div class="lib-two-col">

  {# ---- Main column: transcript or empty state ---- #}
  <div class="lib-main">

    {% if selected_run and island_props %}
      {# Media editor island (#157). The server-rendered table inside is the
         JS-off / hydration-failure fallback. #}
      <div data-island="media-editor" data-props='{{ island_props|tojson }}'>
        <div class="card" id="transcript-document">
          {% if not token %}
          <p class="notice">Read-only view. Claim this run to edit.</p>
          {% endif %}

          <table class="grid-table transcript-table">
            <thead>
              <tr>
                <th>Time</th>
                <th>Speaker</th>
                <th>Text</th>
              </tr>
            </thead>
            <tbody>
              {% for seg in island_props.segments %}
              <tr{% if seg.verified %} class="verified"{% endif %}>
                <td class="mono">{{ "%.1f"|format(seg.start) }}s</td>
                <td>{{ seg.speaker or seg.label or "—" }}</td>
                <td>{{ seg.text }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>

      <div id="export-menu" tabindex="-1">
        {{ export_menu(selected_run) }}
      </div>

    {% elif selected_run %}
      <div class="card">
        <p>Run <code>{{ selected_run.id.hex[:8] }}</code> is
        <strong>{{ selected_run.status }}</strong>. The transcript will be
        available once the run completes.</p>
        <p><a href="/jobs/{{ selected_run.id }}">View run details</a></p>
      </div>

    {% else %}
      <div class="card">
        <p>No runs for this media file yet.</p>
        <p><a href="/media">Back to the library</a></p>
      </div>
    {% endif %}

  </div>

  {# ---- Side rail: run chooser and media info ---- #}
  <div class="lib-sidebar">

    <div class="card">
      <h3>Media</h3>
      <dl class="oc-meta-list">
        <dt>File</dt>
        <dd title="{{ detail.media.source_path }}">{{ media_label }}</dd>
        {% if detail.media.duration_seconds is not none %}
        <dt>Duration</dt>
        <dd>{{ format_duration(detail.media.duration_seconds) }}</dd>
        {% endif %}
        {% if detail.media.size_bytes is not none %}
        <dt>Size</dt>
        <dd>{{ format_size(detail.media.size_bytes) }}</dd>
        {% endif %}
      </dl>
    </div>

    {% if detail.chooser %}
    <div class="card">
      <h3>Runs</h3>
      <ul class="run-chooser">
        {% for entry in detail.chooser %}
        <li{% if selected_run and entry.id == selected_run.id %} class="active"{% endif %}>
          <a href="/media/{{ detail.media.id }}/editor?run={{ entry.id }}{% if token %}&amp;token={{ token }}{% endif %}">
            {{ entry.created_at.strftime("%Y-%m-%d %H:%M") }}
            <span class="chip {{ entry.status }}">{{ entry.status }}</span>
            {% if entry.archived %}<span class="chip">archived</span>{% endif %}
          </a>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}

  </div>
</div>
{% endblock %}