{% extends "base.html" %}
{% block title %}{{ 'Transkrypcja' if state and state.kind=='transkrypcja' else 'Notatka' }}{% endblock %}
{% block crumb %}TRANSKRYPCJE <span class="sep">/</span> {{ (state.kind if state else '')|upper }}{% endblock %}
{% block view %}
{% if not state %}
  <h1>Nie znaleziono zadania</h1>
  <p class="sub">Restart panelu czyści listę zadań w toku. Gotowe transkrypcje
  są na <a href="/">stronie głównej</a>.</p>
{% else %}
<h1>{{ state.label }}</h1>
{% if state.kind == 'transkrypcja' %}
<p class="sub">Trwa transkrypcja całego nagrania. Tekst pojawia się na bieżąco,
od początku do końca — możesz zamknąć kartę, praca trwa na tym komputerze.</p>
{% else %}
<p class="sub">Tworzę szkic notatki na podstawie transkryptu (pseudonimizacja →
model lokalny). To Ty poprosiłeś o ten krok.</p>
{% endif %}

{% if state.error %}
<div class="errbox">
  <div class="errtitle">Nie udało się dokończyć</div>
  <p>{{ state.error }}</p>
  <div class="actbar">
    <form method="post" action="/retry/{{ job_id }}" style="display:inline">
      <button class="btn" type="submit">Spróbuj ponownie →</button>
    </form>
    <a class="btn sec" href="/">← Strona główna</a>
  </div>
</div>
{% else %}
<div class="livewrap">
  <div class="stageline"><span id="stage">{{ state.stage }}</span>
    <span id="pct">{{ (state.fraction*100)|round|int }}%</span></div>
  <div class="bigbar"><i id="bar" style="width:{{ (state.fraction*100)|round|int }}%"></i></div>
  <div class="tailbox" id="text">{{ state.text }}</div>

  <div class="actbar">
    <a class="btn sec" href="/">← Strona główna</a>
    <a class="btn" id="go" style="display:none" href="#">Otwórz wynik →</a>
  </div>
</div>
{% endif %}
{% endif %}
{% endblock %}
{% block scripts %}
{% if state and not state.done %}
<script>
const es = new EventSource("/events/{{ job_id }}");
const box = document.getElementById("text");
es.onmessage = (e) => {
  const d = JSON.parse(e.data);
  document.getElementById("stage").textContent = d.error ? "błąd" : d.stage;
  document.getElementById("pct").textContent = Math.round(d.fraction*100) + "%";
  document.getElementById("bar").style.width = (d.fraction*100) + "%";
  if (d.text) { box.textContent = d.text; box.scrollTop = box.scrollHeight; }
  if (d.error) { es.close(); location.reload(); return; }  // pokaż ekran błędu + „Spróbuj ponownie"
  if (d.done) {
    es.close();
    if (d.next) { const a = document.getElementById("go"); a.href = d.next; a.style.display = "inline-flex"; }
  }
};
</script>
{% endif %}
{% endblock %}