{% extends "base.html" %}
{% block title %}Translating — deepl-i18n{% endblock %}
{% block content %}

<h3 class="page-h">Translating <span class="t2">— {{ title }}</span></h3>
<p class="page-sub">
  {% if engine == 'local' %}Your local model is translating.{% else %}DeepL is translating.{% endif %}
  You can leave this page — it keeps running, and the header shows the progress.
</p>

<div class="card" id="prog-card" data-token="{{ token }}" data-total="{{ total }}">
  <div class="prog-head">
    <span class="prog-label" id="prog-label">Starting…</span>
    <span class="prog-count" id="prog-count">0 / {{ total }}</span>
  </div>
  <div class="prog-track"><div class="prog-fill" id="prog-fill" style="width: 0%"></div></div>
  <div style="display: flex; align-items: center; justify-content: space-between; margin-top: 14px">
    <p class="engine-note" id="prog-note" style="margin: 0">Working…</p>
    <button type="button" class="btn btn-ghost btn-sm" id="prog-cancel">Cancel</button>
  </div>
</div>

<script>
  (function () {
    var card = document.getElementById('prog-card');
    var token = card.dataset.token;
    var total = parseInt(card.dataset.total, 10) || 0;
    var fill = document.getElementById('prog-fill');
    var count = document.getElementById('prog-count');
    var label = document.getElementById('prog-label');
    var note = document.getElementById('prog-note');

    var cancelBtn = document.getElementById('prog-cancel');
    cancelBtn.addEventListener('click', function () {
      cancelBtn.disabled = true;
      cancelBtn.textContent = 'Cancelling…';
      note.textContent = 'Stopping after the current batch — already translated keys are kept.';
      fetch('/upload/cancel/' + token, { method: 'POST' });
      // Der Poll unten faengt den Uebergang auf "done" (abgebrochen) ab und leitet weiter.
    });

    function poll() {
      fetch('/upload/status/' + token, { headers: { 'Accept': 'application/json' } })
        .then(function (r) { return r.json(); })
        .then(function (s) {
          if (s.status === 'done') {
            fill.style.width = '100%';
            count.textContent = total + ' / ' + total;
            label.textContent = 'Done';
            window.location = '/upload/result/' + token;
            return;
          }
          if (s.status === 'error') {
            window.location = '/upload/result/' + token; // rendert die Fehlermeldung
            return;
          }
          if (s.status === 'missing') {
            note.textContent = 'This run is no longer available.';
            return;
          }
          var done = s.done || 0;
          var tot = s.total || total || 1;
          var pct = tot ? Math.min(100, Math.round(done / tot * 100)) : 0;
          fill.style.width = pct + '%';
          count.textContent = done + ' / ' + tot;
          label.textContent = pct + '%';
          setTimeout(poll, 900);
        })
        .catch(function () { setTimeout(poll, 1500); });
    }
    poll();
  })();
</script>

{% endblock %}