{# One run's translation block (issue #133): current generation(s) with
   freshness, plus generation controls. Included on the run detail page AND
   served standalone by GET /runs/{id}/translation — the div re-polls itself
   only while a job is active, so a terminal render stops the polling. #}
<div id="run-translation-{{ translation_state.run_id }}" class="card"
     {% if translation_state.any_active %}hx-get="/runs/{{ translation_state.run_id }}/translation"
     hx-trigger="every 3s" hx-swap="outerHTML"{% endif %}>
<h2>Translation</h2>
<p class="muted">Machine-translated from the transcript by the configured LLM — a
working rendition, not a certified translation.</p>

{% if translation_state.error %}<p class="error" role="alert">{{ translation_state.error }}</p>{% endif %}

{% if translation_state.job and not translation_state.job_active and translation_state.job.status != "succeeded" %}
<p class="muted">
  Last translation {{ translation_state.job.status }}
  {% if translation_state.job.finished_at %}at {{ translation_state.job.finished_at.strftime("%Y-%m-%d %H:%M") }}{% endif %}
  {% if translation_state.job.error %}<br><span class="error">{{ translation_state.job.error }}</span>{% endif %}
</p>
{% endif %}

{% if translation_state.job_active %}
<p class="muted">
  Translating to {{ language_label(translation_state.job.target_language) }} —
  {{ translation_state.job.status }}
  {% if translation_state.job.started_at %}· started {{ translation_state.job.started_at.strftime("%Y-%m-%d %H:%M") }}
  {% else %}· queued {{ translation_state.job.created_at.strftime("%Y-%m-%d %H:%M") }}{% endif %}
</p>
<form class="inline" method="post"
      action="/runs/{{ translation_state.run_id }}/translation/{{ translation_state.job.id }}/cancel"
      hx-post="/runs/{{ translation_state.run_id }}/translation/{{ translation_state.job.id }}/cancel"
      hx-target="#run-translation-{{ translation_state.run_id }}" hx-swap="outerHTML">
  <input type="hidden" name="csrf_token" value="{{ csrf_translation_cancel }}">
  <button type="submit">Cancel</button>
</form>
{% endif %}

{% for entry in translation_state.translations %}
<details class="run-translation" open>
  <summary>{{ language_label(entry.translation.target_language) }}
    {%- if entry.stale %} <span class="pill failed">out of date</span>{% endif %}
  </summary>
  {% if entry.stale %}
  <p class="muted">The transcript changed since this translation was generated —
     the translated text no longer matches it. Re-translate to refresh; the old
     rendition is not shown against the changed transcript.</p>
  {% else %}
  <p class="muted">
    <a href="/runs/{{ translation_state.run_id }}/transcript?translation={{ entry.translation.target_language }}">View
    it beneath each line on the transcript page</a> — translated downloads are in
    that page's export menu.
  </p>
  {% endif %}
  <p class="muted">
    Generated {{ entry.translation.completed_at.strftime("%Y-%m-%d %H:%M") }}
    · {{ entry.translation.model }} · generation {{ entry.translation.generation }}
    {% if entry.translation.source_language %}
    · from {{ language_label(entry.translation.source_language) }}
    {% endif %}
  </p>
</details>
{% endfor %}

{% if not translation_state.gates_open %}
<p class="muted">
  Translation is off. Turn on <strong>LLM transcript enhancement</strong> in
  <a href="/settings#llm">Settings → LLM</a> — no restart needed.
</p>
{% elif translation_state.source_problem %}
<p class="muted">{{ translation_state.source_problem }}</p>
{% elif not translation_state.job_active %}
<form class="inline" method="post" action="/runs/{{ translation_state.run_id }}/translation/generate"
      hx-post="/runs/{{ translation_state.run_id }}/translation/generate"
      hx-target="#run-translation-{{ translation_state.run_id }}" hx-swap="outerHTML">
  <input type="hidden" name="csrf_token" value="{{ csrf_translation_generate }}">
  <label>Translate to
    <select name="target_language">
      {% if not translation_state.default_target %}
      <option value="" selected>Choose a language…</option>
      {% endif %}
      {% for code, name in translation_state.language_options %}
      {% if code != translation_state.detected_language %}
      <option value="{{ code }}"{% if code == translation_state.default_target %} selected{% endif %}>{{ name }} ({{ code }})</option>
      {% endif %}
      {% endfor %}
    </select>
  </label>
  <button type="submit">{% if translation_state.translations %}Re-translate{% else %}Translate{% endif %}</button>
</form>
{% endif %}
</div>