{% extends "app.html" %}
{% block content %}
<div class="chrono-card">
  <p class="chrono-kicker">{{ shell.tr.chrono_kicker }}</p>
  <p class="chrono-time" data-started="{{ started_ms }}">{{ live_label }}</p>
  <p class="chrono-start">{{ started_line }}</p>
</div>
<p class="chrono-hint">{{ shell.tr.chrono_hint }}</p>
<div style="display:flex;flex-direction:column;gap:var(--space-3)">
  <form method="post" action="/timer/arreter" style="margin:0;display:flex">
    <input type="hidden" name="csrf" value="{{ shell.csrf }}">
    <button type="submit" class="btn btn-primary btn-block" style="flex:1;min-height:52px">{{ shell.tr.finish_timer }}</button>
  </form>
  <form method="post" action="/timer/abandonner" style="margin:0;display:flex">
    <input type="hidden" name="csrf" value="{{ shell.csrf }}">
    <button type="submit" class="btn btn-secondary btn-block" style="flex:1;min-height:48px">{{ shell.tr.cancel_timer }}</button>
  </form>
</div>
<script>
// Temps vivant à la seconde — le rendu serveur reste juste sans JS.
(function () {
  var el = document.querySelector('.chrono-time[data-started]');
  if (!el) return;
  function pad(n) { return n < 10 ? '0' + n : '' + n; }
  setInterval(function () {
    var s = Math.max(0, Math.floor((Date.now() - Number(el.dataset.started)) / 1000));
    var h = Math.floor(s / 3600), m = Math.floor(s / 60) % 60, sec = s % 60;
    el.textContent = (h ? h + ' h ' + pad(m) : m) + ' min ' + pad(sec) + ' s';
  }, 1000);
})();
</script>
{% endblock %}