{% 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">
  {% 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 style="display:block;font-size:16px">{{ t.name }}</span>
            <span style="display:block;font-size:12px;opacity:.7">{{ 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 refreshMinutes(root) {
    var min = root.querySelector('#minutes');
    var v = Math.round(+min.value) || 0;
    var h = Math.floor(v / 60), r = v % 60;
    root.querySelector('#minutes-pretty').textContent =
      !v ? '0 min' : !h ? r + ' min' : r ? h + ' h ' + (r < 10 ? '0' + r : r) : h + ' h';
    root.querySelectorAll('.preset[data-minutes]').forEach(function (p) {
      if (+p.dataset.minutes === v) { p.setAttribute('aria-current', 'true'); }
      else { p.removeAttribute('aria-current'); }
    });
  }
  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 = inp.valueAsDate || new Date();
      d.setDate(d.getDate() + (+b.dataset.dateStep));
      var v = d.toISOString().slice(0, 10);
      if (inp.max && v > inp.max) v = inp.max;
      inp.value = v;
      return;
    }
    var min = root.querySelector('#minutes');
    if (b.dataset.step) { min.value = Math.max(5, (Math.round(+min.value) || 0) + (+b.dataset.step)); }
    else { min.value = +b.dataset.minutes; }
    refreshMinutes(root);
  });
  document.addEventListener('input', function (e) {
    if (e.target.id === 'minutes' && e.target.closest && e.target.closest('form[data-duration]')) {
      refreshMinutes(e.target.closest('form[data-duration]'));
    }
  });
})();
// 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;
    });
  }
  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 %}