{% extends "base.html" %}
{% block title %}{{ shell.title }} · Ex Ego{% endblock %}
{% block lang %}{{ shell.lang_code }}{% endblock %}
{% block themeattr %}{% if shell.hc %} data-theme="hc"{% endif %}{% endblock %}
{% block themecolor %}{% if shell.hc %}#000000{% else %}#f5ead8{% endif %}{% endblock %}
{% block body %}
<header class="app-header">
  <div class="app-topline">
    {% if !shell.teams.is_empty() %}
    <a class="team-pill" href="#equipes" aria-label="{{ shell.tr.change_team }}" style="--team-color:{{ shell.team_color }}">
      <span class="team-dot" style="background:{{ shell.team_color }}"></span>
      {{ shell.team_name }}
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg>
    </a>
    {% else %}
    <span class="team-pill" style="--team-color:{{ shell.team_color }}">
      <span class="team-dot" style="background:{{ shell.team_color }}"></span>
      {{ shell.team_name }}
    </span>
    {% endif %}
    <span class="who">{{ shell.username }}</span>
  </div>
  <h1>{{ shell.title }}</h1>
</header>
{#- Dock du minuteur : masqué sur l'onglet Ajouter (l'écran y porte déjà le
    chrono ou le bandeau « X min mesurées »), sauf quand le timer tourne dans
    une AUTRE équipe — là, rien d'autre ne le signale. -#}
{% if let Some(t) = shell.timer %}{% if shell.tab != "add" || t.foreign %}
<div class="timer-dock" role="region" aria-label="{{ shell.tr.timer_dock_aria }}">
  {% if t.running || t.foreign %}
  {#- Arrêter : bascule au passage sur l'équipe du timer si besoin. -#}
  <form method="post" action="/timer/arreter" style="margin:0">
    <input type="hidden" name="csrf" value="{{ shell.csrf }}">
    <button type="submit" class="timer-btn" aria-label="{{ t.aria }}">
      <span class="t-dot"></span>
      <span class="t-elapsed"{% if t.running %} data-started="{{ t.started_ms }}"{% endif %}>{{ t.label }}</span>
      <span class="t-note">{{ t.note }}</span>
      <span class="t-cta">{{ t.cta }}</span>
    </button>
  </form>
  {% else %}
  <a class="timer-btn" href="/temps/nouveau" aria-label="{{ t.aria }}">
    <span class="t-dot"></span>
    <span class="t-elapsed">{{ t.label }}</span>
    <span class="t-note">{{ t.note }}</span>
    <span class="t-cta">{{ t.cta }}</span>
  </a>
  {% endif %}
</div>
{% endif %}{% endif %}
<main class="app-main">
{% block content %}{% endblock %}
</main>
{# Sheets :target des pages — HORS de .app-main : sur iOS, son
   -webkit-overflow-scrolling crée un contexte d'empilement composité qui
   piégerait la sheet sous la tab bar, quel que soit le z-index. #}
{% block sheets %}{% endblock %}
{% if !shell.teams.is_empty() %}
<div class="sheet-wrap" id="equipes" role="dialog" aria-label="{{ shell.tr.change_team }}">
  <a class="sheet-backdrop" href="#fermer" aria-label="{{ shell.tr.close }}"></a>
  <div class="sheet">
    <div class="sheet-head">
      <span class="pname">{{ shell.tr.change_team }}</span>
      <a class="btn btn-ghost close" href="#fermer">{{ shell.tr.close }}</a>
    </div>
    <div style="display:grid;gap:var(--space-2)">
      {% for t in shell.teams %}
      <form method="post" action="/equipes/basculer" style="margin:0">
        <input type="hidden" name="csrf" value="{{ shell.csrf }}">
        <input type="hidden" name="equipe" value="{{ t.id }}">
        <input type="hidden" name="retour" value="{{ shell.start_return }}">
        <button type="submit" class="team-choice{% if t.current %} current{% endif %}">
          <span class="team-dot" style="background:{{ t.color }}"></span>
          <span style="flex:1;text-align:left">
            <span class="option-title">{{ t.name }}</span>
            <span class="option-sub">{{ t.meta }}</span>
          </span>
          {% if t.current %}<svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"></path></svg>{% endif %}
        </button>
      </form>
      {% endfor %}
    </div>
  </div>
</div>
{% endif %}
{% if let Some(t) = shell.toast %}<div class="toast" role="status">{{ t }}</div>{% endif %}
<nav class="tabbar">
  <span class="rail-brand">
    <svg width="30" height="30" viewBox="0 0 96 96" aria-hidden="true">
      <circle cx="48" cy="48" r="44" fill="var(--color-surface)"></circle>
      <circle cx="48" cy="48" r="40" fill="none" stroke="var(--color-text)" stroke-width="2.4" opacity=".38"></circle>
      <circle cx="48" cy="14" r="3.3" fill="var(--color-text)" opacity=".7"></circle>
      <circle cx="48" cy="82" r="3.3" fill="var(--color-text)" opacity=".5"></circle>
      <circle cx="14" cy="48" r="3.3" fill="var(--color-text)" opacity=".5"></circle>
      <circle cx="82" cy="48" r="3.3" fill="var(--color-text)" opacity=".5"></circle>
      <rect x="27" y="35.5" width="42" height="10.5" rx="5.25" fill="var(--color-accent)"></rect>
      <path d="M53.5 35.5 h10.25 a5.25 5.25 0 0 1 0 10.5 h-10.25 z" fill="var(--color-accent-2)"></path>
      <rect x="27" y="50" width="42" height="10.5" rx="5.25" fill="var(--color-accent-2)"></rect>
      <path d="M43.5 50 h20.25 a5.25 5.25 0 0 1 0 10.5 h-20.25 z" fill="var(--color-accent)"></path>
    </svg>
    Ex Ego
  </span>
  <a class="tab" href="/temps/nouveau" {% if shell.tab == "add" %}aria-current="page"{% endif %}>
    <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M12 8v8M8 12h8"></path></svg>
    <span>{{ shell.tr.tab_add }}</span>
  </a>
  <a class="tab" href="/stats" {% if shell.tab == "stats" %}aria-current="page"{% endif %}>
    <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"><path d="M5 20V10M12 20V4M19 20v-6"></path></svg>
    <span>{{ shell.tr.tab_stats }}</span>
  </a>
  <a class="tab" href="/taches" {% if shell.tab == "todos" %}aria-current="page"{% endif %}>
    <span class="tab-ico">
      <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"><path d="M11 6h10M11 12h10M11 18h10"></path><path d="M3 6.5l1.6 1.6L7.5 5"></path><path d="M3 12.5l1.6 1.6L7.5 11"></path><path d="M3 18.5l1.6 1.6L7.5 17"></path></svg>
      {% if shell.todo_count > 0 %}<span class="tab-badge">{{ shell.todo_count }}</span>{% endif %}
    </span>
    <span>{{ shell.tr.tab_todos }}</span>
  </a>
  <a class="tab" href="/parametres" {% if shell.tab == "settings" %}aria-current="page"{% endif %}>
    <span class="tab-ico">
      <svg width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 1 1-4 0v-.1A1.6 1.6 0 0 0 7 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1A1.6 1.6 0 0 0 3 14.9a1.6 1.6 0 0 0-1.5-1H1a2 2 0 1 1 0-4h.1A1.6 1.6 0 0 0 2.6 8a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 7 3.7h.1A1.6 1.6 0 0 0 8.1 2.2V2a2 2 0 1 1 4 0v.1a1.6 1.6 0 0 0 2.7 1.1"></path></svg>
      {% if shell.invite_count > 0 %}<span class="tab-badge">{{ shell.invite_count }}</span>{% endif %}
    </span>
    <span>{{ shell.tr.tab_settings }}</span>
  </a>
</nav>
<script>
// Pastille sur l'icône de l'app tant qu'un timer ou une mesure existe.
// iOS exige la permission notifications : demandée une seule fois, dans le
// geste « Lancer le minuteur » (Safari refuse les demandes hors interaction).
(function () {
  if (!('setAppBadge' in navigator)) return;
  navigator.{% if shell.badge %}setAppBadge(1){% else %}clearAppBadge(){% endif %}.catch(function () {});
  var start = document.querySelector('form[action="/timer/demarrer"]');
  if (start && 'Notification' in window && Notification.permission === 'default') {
    start.addEventListener('submit', function (e) {
      e.preventDefault();
      Notification.requestPermission().catch(function () {}).finally(function () { start.submit(); });
    }, { once: true });
  }
})();
// Amélioration progressive : focus des bottom sheets (:target). Sans JS les
// sheets s'ouvrent et se ferment déjà par liens ; ceci déplace le focus sur
// « Fermer » à l'ouverture, le rend au déclencheur à la fermeture, et ajoute
// la fermeture par Échap.
(function () {
  var trigger = null;
  function openSheet() {
    var id = location.hash.slice(1);
    var el = id && document.getElementById(id);
    return el && el.classList.contains('sheet-wrap') ? el : null;
  }
  document.addEventListener('click', function (e) {
    var a = e.target.closest ? e.target.closest('a[href*="#"]') : null;
    if (!a) return;
    var el = a.hash && document.getElementById(a.hash.slice(1));
    if (el && el.classList.contains('sheet-wrap')) trigger = a;
  });
  window.addEventListener('hashchange', function () {
    var w = openSheet();
    if (w) {
      var f = w.querySelector('.close') || w.querySelector('a, button');
      if (f) f.focus();
    } else if (trigger && document.contains(trigger)) {
      trigger.focus();
      trigger = null;
    }
  });
  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape' && openSheet()) location.hash = 'fermer';
  });
})();
// Amélioration progressive des formulaires à sélecteur de durée/date
// (form[data-duration] : ajout étape 2, tâche effectuée — page dédiée ou
// sheet injectée par l'écran Tâches) : steppers, presets et libellé sans
// recharger. Délégation : fonctionne aussi sur du contenu injecté.
(function () {
  function fmtMinutes(v) {
    var h = Math.floor(v / 60), r = v % 60;
    return !v ? '0 min' : !h ? r + ' min' : r ? h + ' h ' + (r < 10 ? '0' + r : r) : h + ' h';
  }
  // Répartition d'une mesure de minuteur (réservée au JS) : le toggle vit
  // quand la durée saisie laisse un reste, se décoche sinon, et le bouton
  // d'envoi annonce la suite. Les textes viennent des data-* du serveur.
  // Quand il redevient actif, il reprend data-want : le dernier choix
  // explicite de l'utilisateur, sinon « coché » si une répartition est
  // déjà entamée (le serveur le pose) — commencer à répartir engage à
  // aller jusqu'au bout.
  function refreshSplit(root, v) {
    var box = root.querySelector('[data-split]');
    if (!box) return;
    var cb = box.querySelector('input[type="checkbox"]');
    var label = box.querySelector('.split-label');
    var rest = (+box.dataset.remaining) - v;
    var on = v > 0 && rest > 0;
    if (on && cb.disabled) cb.checked = box.dataset.want === '1';
    cb.disabled = !on;
    if (!on) cb.checked = false;
    label.textContent = on ? label.dataset.pat.replace('{}', fmtMinutes(rest)) : label.dataset.idle;
    refreshSubmit(root);
  }
  function refreshSubmit(root) {
    var btn = root.querySelector('button[type="submit"][data-label-continue]');
    var cb = root.querySelector('[data-split] input[type="checkbox"]');
    if (!btn || !cb) return;
    btn.textContent = cb.checked && !cb.disabled ? btn.dataset.labelContinue : btn.dataset.labelAdd;
  }
  // Total en minutes du formulaire : capsule « h » (étape 2) × 60 + minutes.
  function totalMinutes(root) {
    var h = root.querySelector('#heures'), min = root.querySelector('#minutes');
    return (h ? (Math.round(+h.value) || 0) * 60 : 0) + (Math.round(+min.value) || 0);
  }
  // Pose un total : ventilé sur h / min quand la capsule « h » existe.
  function setTotal(root, v) {
    var h = root.querySelector('#heures'), min = root.querySelector('#minutes');
    if (h) { h.value = Math.floor(v / 60); min.value = v % 60; }
    else { min.value = v; }
    refreshMinutes(root);
  }
  function refreshMinutes(root) {
    var v = totalMinutes(root);
    var pretty = root.querySelector('#minutes-pretty');
    if (pretty) pretty.textContent = fmtMinutes(v);
    var hint = root.querySelector('[data-hint-pat]');
    if (hint) hint.textContent = hint.dataset.hintPat.replace('{}', v);
    root.querySelectorAll('.preset[data-minutes]').forEach(function (p) {
      if (+p.dataset.minutes === v) { p.setAttribute('aria-current', 'true'); }
      else { p.removeAttribute('aria-current'); }
    });
    refreshSplit(root, v);
  }
  document.querySelectorAll('form[data-duration] [data-split][hidden]').forEach(function (box) {
    box.hidden = false;
    refreshMinutes(box.closest('form[data-duration]'));
  });
  // Tout en UTC : les steppers restent justes en travers d'un changement d'heure.
  function parseDate(v) {
    var p = String(v || '').split('-');
    return p.length === 3 ? new Date(Date.UTC(+p[0], +p[1] - 1, +p[2])) : null;
  }
  // Après un changement de date : la flèche → suit le plafond (max) et le
  // libellé est refait avec le motif et les noms rendus par le serveur
  // (data-* d'un DateVocab), jamais avec du texte écrit ici.
  function refreshDate(root, inp) {
    if (inp.disabled) return;
    var atMax = !!inp.max && inp.value >= inp.max;
    root.querySelectorAll('a[data-date-step="1"][data-date-for="' + inp.id + '"]').forEach(function (a) {
      a.setAttribute('aria-disabled', atMax ? 'true' : 'false');
      if (!atMax && !a.getAttribute('href')) { a.setAttribute('href', '#'); a.removeAttribute('role'); }
    });
    var label = root.querySelector('[data-date-label-for="' + inp.id + '"]');
    if (!label) return;
    var d = parseDate(inp.value);
    if (!d) { label.textContent = ''; return; }
    var s = label.dataset.pattern
      .replace('{w}', label.dataset.weekdays.split('|')[(d.getUTCDay() + 6) % 7])
      .replace('{d}', d.getUTCDate())
      .replace('{m}', label.dataset.months.split('|')[d.getUTCMonth()]);
    label.textContent = s.charAt(0).toUpperCase() + s.slice(1)
      + (inp.value === label.dataset.today ? label.dataset.todaySuffix : '');
  }
  document.addEventListener('click', function (e) {
    if (!e.target.closest) return;
    var root = e.target.closest('form[data-duration]');
    if (!root) return;
    var b = e.target.closest('.stepper-btn[data-step], .preset[data-minutes], a[data-date-step]');
    if (!b) return;
    e.preventDefault();
    if (b.getAttribute('aria-disabled') === 'true') return;
    if (b.dataset.dateStep) {
      var inp = root.querySelector('#' + b.dataset.dateFor);
      var d = parseDate(inp.value) || parseDate(inp.max) || new Date();
      d.setUTCDate(d.getUTCDate() + (+b.dataset.dateStep));
      var v = d.toISOString().slice(0, 10);
      if (inp.max && v > inp.max) v = inp.max;
      inp.value = v;
      refreshDate(root, inp);
      return;
    }
    if (b.dataset.step) { setTotal(root, Math.max(1, totalMinutes(root) + (+b.dataset.step))); }
    else { setTotal(root, +b.dataset.minutes); }
  });
  ['input', 'change'].forEach(function (ev) {
    document.addEventListener(ev, function (e) {
      var root = e.target.closest && e.target.closest('form[data-duration]');
      if (!root) return;
      // Saisie libre : recalcul à chaque frappe, ventilation h / min
      // (90 min → 1 h 30) seulement une fois le champ quitté.
      if (e.target.id === 'minutes' || e.target.id === 'heures') {
        if (ev === 'change') setTotal(root, Math.max(1, totalMinutes(root))); else refreshMinutes(root);
      }
      else if (e.target.type === 'date') refreshDate(root, e.target);
      else if (e.target.closest('[data-split]')) {
        if (ev === 'change') e.target.closest('[data-split]').dataset.want = e.target.checked ? '1' : '0';
        refreshSubmit(root);
      }
    });
  });
})();
// Amélioration progressive : sur « Tâche effectuée », l'interrupteur d'une
// section pilote l'état désactivé de ses contrôles (disabled sur les champs,
// aria-disabled + retrait du tab order sur les liens stepper/preset). Sans
// JS, l'atténuation CSS suffit : les aplats s'effacent et tous les libellés
// restent au contraste AA. Le serveur ignore déjà les champs d'une section
// décochée, donc ne pas les soumettre ne change rien.
(function () {
  function sync(sec) {
    var sw = sec.querySelector('.swt-check input[type="checkbox"]');
    var on = !sw || sw.checked;
    sec.querySelectorAll('.done-body input').forEach(function (el) { el.disabled = !on; });
    sec.querySelectorAll('.done-body a').forEach(function (el) {
      el.setAttribute('aria-disabled', on ? 'false' : 'true');
      el.tabIndex = on ? 0 : -1;
    });
    // La flèche → d'une date au plafond doit rester éteinte : on repasse par
    // la synchro de date (délégation ci-dessus).
    sec.querySelectorAll('.done-body input[type="date"]').forEach(function (el) {
      el.dispatchEvent(new Event('change', { bubbles: true }));
    });
  }
  document.addEventListener('change', function (e) {
    if (!e.target.closest || !e.target.matches('.swt-check input[type="checkbox"]')) return;
    var sec = e.target.closest('.done-sec');
    if (sec) sync(sec);
  });
  document.querySelectorAll('.done-sec').forEach(sync);
})();
// Amélioration progressive : le temps écoulé rendu par le serveur reste
// juste sans JS, ceci le rafraîchit toutes les 10 s sans recharger.
(function () {
  var els = document.querySelectorAll('.t-elapsed[data-started]');
  if (!els.length) return;
  function fmt(m) {
    var h = Math.floor(m / 60), r = m % 60;
    if (!h) return m + ' min';
    return r ? h + ' h ' + (r < 10 ? '0' + r : r) : h + ' h';
  }
  setInterval(function () {
    els.forEach(function (el) {
      var m = Math.round((Date.now() - Number(el.dataset.started)) / 60000);
      el.textContent = fmt(Math.max(0, m));
    });
  }, 10000);
})();
</script>
{% endblock %}