{% extends "base.html" %}
{% from "fragments/export_menu.html" import export_menu %}
{% from "fragments/review_journey.html" import review_journey %}
{% block title %}Voxint — review {{ run_source_title(run) }}{% endblock %}
{% block body %}
<p><a href="/review">← queue</a></p>

{# Review header card (issue #92): the run identity, the claim state, and the
   journey's actions in one surface. The claim wording is contract text the
   integration tests assert on — keep it verbatim. #}
<header class="review-head">
  {# Friendly run identity + the two-step sequence (issue #117 Phase B). This is
     Step 1 ("who is speaking"); the fragment is static and shared with the
     transcript page — it owns no progress counter and no actions. #}
  {{ review_journey(run, 1) }}
  {% if token %}
  <p class="claim-state">Claimed by you.</p>
  <div class="card-actions">
    {# Step 1 → Step 2 (issue #117 Phase B): the one dominant Continue. Carries
       the live claim token so the transcript stepper writes without re-claiming
       (a fresh claim would kill this tab's token). #}
    <a class="btn-primary" href="/review/{{ run.id }}/transcript?token={{ token }}">Continue to checking the words →</a>
    <form method="post" action="/review/{{ run.id }}/release" class="inline">
      <input type="hidden" name="token" value="{{ token }}">
      <button type="submit">Release claim</button>
    </form>
  </div>
  {% else %}
  <p class="claim-state off">Not claimed by this tab — decisions are disabled.</p>
  <div class="card-actions">
    <form method="post" action="/review/{{ run.id }}/claim" class="inline">
      <input type="hidden" name="csrf_token" value="{{ csrf_claim }}">
      <button type="submit" class="primary">Claim for review</button>
    </form>
  </div>
  {% endif %}
</header>

{{ export_menu(run) }}

{# Workbench-player island (issues #49 + #55). Mounted OUTSIDE #labels so it
   survives every htmx innerHTML swap of the decision cards. It owns the <audio>
   (React ref), the speed control, the visible capability banner, and — via a
   document-level delegated click listener + an htmx:afterSwap re-enable pass —
   drives the server-rendered `data-voxint-seek` buttons inside #labels. The
   server fallback is the bare <audio controls>, so JS-off still plays. The
   .player-surface wrapper (issue #92) is server-rendered so the styled panel
   frames the island and the JS-off fallback identically. #}
<section class="player-surface" aria-label="Recording playback">
  <div data-island="workbench-player" data-props='{{ workbench_props|tojson }}'>
    <audio controls preload="metadata" src="{{ workbench_props.mediaUrl }}"></audio>
  </div>
</section>

<div id="labels">
  {% include "fragments/labels.html" %}
</div>
{% endblock %}