{% extends "app.html" %}
{% block content %}
<div class="todo-toolbar">
  <a class="btn btn-primary" style="min-height:40px" href="/taches/nouvelle">{{ shell.tr.new_todo }}</a>
</div>

{% if empty %}
<div class="todo-empty">
  <p class="te-title">{{ shell.tr.todos_empty_title }}</p>
  <p class="te-body">{{ empty_body }}</p>
</div>
{% endif %}

{% if has_doing %}
<div class="blk-head">
  <h2>{{ shell.tr.doing_block }}</h2>
  <a class="blk-toggle" role="switch" aria-checked="{{ doing_filter_on }}" href="{{ doing_toggle_href }}">
    {{ shell.tr.my_tasks }}
    <span class="swt{% if doing_filter_on %} on{% endif %}"><span class="knob"></span></span>
  </a>
</div>
{% if doing.is_empty() %}
<p class="blk-empty">{{ shell.tr.doing_filter_empty }}</p>
{% else %}
<div class="todo-grid">
  {% for t in doing %}
  <div class="todo-card{% if t.other %} other{% endif %}{% if t.for_me %} forme{% endif %}{% if t.high %} prio-haute{% endif %}">
    <div class="todo-main">
      <span class="team-dot" style="background:{{ t.color }}"></span>
      <div style="flex:1;min-width:0">
        <div class="todo-name">{{ t.name }}</div>
        <div class="todo-meta">{{ t.meta }}</div>
        {% if !t.assignees.is_empty() %}
        <div class="asg-chips">
          {% for a in t.assignees %}<span class="asg-chip{% if a.me %} me{% endif %}">{{ a.name }}</span>{% endfor %}
        </div>
        {% endif %}
      </div>
      {% if t.high %}
      <span class="prio-pill"><span aria-hidden="true">{{ shell.tr.prio_pill }}</span><span class="visually-hidden">{{ shell.tr.prio_high_aria }}</span></span>
      {% endif %}
      {% if t.mine %}
      <a class="btn btn-secondary btn-icon" style="flex:none" href="/taches/{{ t.id }}/modifier" aria-label="{{ t.edit_aria }}">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"></path></svg>
      </a>
      {% endif %}
    </div>
    {% if t.mine %}
    <div class="todo-actions">
      <a class="btn btn-primary" href="/taches/{{ t.id }}/terminer">{{ shell.tr.done_check }}</a>
      <form method="post" action="/taches/{{ t.id }}/relacher">
        <input type="hidden" name="csrf" value="{{ csrf }}">
        <button type="submit" class="btn btn-secondary" style="flex:0 1 auto">{{ shell.tr.release }}</button>
      </form>
    </div>
    {% endif %}
  </div>
  {% endfor %}
</div>
{% endif %}
{% endif %}

{% if has_open %}
<div class="blk-head">
  <h2>{{ shell.tr.todo_block }}</h2>
  <a class="blk-toggle" role="switch" aria-checked="{{ open_filter_on }}" href="{{ open_toggle_href }}">
    {{ shell.tr.my_tasks }}
    <span class="swt{% if open_filter_on %} on{% endif %}"><span class="knob"></span></span>
  </a>
</div>
{% if open.is_empty() %}
<p class="blk-empty">{{ shell.tr.open_filter_empty }}</p>
{% else %}
<div class="todo-grid">
  {% for t in open %}
  <div class="todo-card{% if t.for_me %} forme{% endif %}{% if t.high %} prio-haute{% endif %}">
    <div class="todo-main">
      <span class="team-dot" style="background:{{ t.color }}"></span>
      <div style="flex:1;min-width:0">
        <div class="todo-name">{{ t.name }}</div>
        <div class="todo-meta{% if t.late %} late{% endif %}">{{ t.meta }}</div>
        {% if !t.assignees.is_empty() %}
        <div class="asg-chips">
          {% for a in t.assignees %}<span class="asg-chip{% if a.me %} me{% endif %}">{{ a.name }}</span>{% endfor %}
        </div>
        {% endif %}
      </div>
      {% if t.high %}
      <span class="prio-pill"><span aria-hidden="true">{{ shell.tr.prio_pill }}</span><span class="visually-hidden">{{ shell.tr.prio_high_aria }}</span></span>
      {% endif %}
      <a class="btn btn-secondary btn-icon" style="flex:none" href="/taches/{{ t.id }}/modifier" aria-label="{{ t.edit_aria }}">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"></path></svg>
      </a>
    </div>
    <div class="todo-actions">
      <form method="post" action="/taches/{{ t.id }}/prendre">
        <input type="hidden" name="csrf" value="{{ csrf }}">
        <button type="submit" class="btn btn-secondary">{{ shell.tr.take }}</button>
      </form>
      <a class="btn btn-primary" href="/taches/{{ t.id }}/terminer">{{ shell.tr.done_check }}</a>
    </div>
  </div>
  {% endfor %}
</div>
{% endif %}
{% endif %}

{% if !later.is_empty() %}
<details class="later">
  <summary>{{ shell.tr.upcoming }} · {{ later.len() }}</summary>
  <div style="margin-top:var(--space-3)">
    {% for t in later %}
    <div class="later-row">
      <span class="team-dot" style="background:{{ t.color }}"></span>
      <div style="flex:1;min-width:0">
        <div style="font-size:15px">{{ t.name }}</div>
        <div class="todo-meta">{{ t.meta }}</div>
        {% if !t.assignees.is_empty() %}
        <div class="asg-chips">
          {% for a in t.assignees %}<span class="asg-chip{% if a.me %} me{% endif %}">{{ a.name }}</span>{% endfor %}
        </div>
        {% endif %}
      </div>
      <a class="btn btn-secondary btn-icon" style="flex:none" href="/taches/{{ t.id }}/modifier" aria-label="{{ t.edit_aria }}">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"></path><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"></path></svg>
      </a>
    </div>
    {% endfor %}
  </div>
</details>
{% endif %}
<script>
// Amélioration progressive : « Fait ✓ » ouvre le flux de complétion en
// bottom sheet par-dessus la liste (sans JS : navigation vers la page).
(function () {
  var trigger = null;
  function close(wrap) {
    wrap.remove();
    document.removeEventListener('keydown', wrap.tt_esc);
    if (trigger && document.contains(trigger)) trigger.focus();
  }
  function open(html, url) {
    var doc = new DOMParser().parseFromString(html, 'text/html');
    var title = doc.querySelector('.done-title');
    var form = doc.querySelector('form[data-done]');
    if (!form) { location.href = url; return; }
    var wrap = document.createElement('div');
    wrap.className = 'sheet-wrap open';
    wrap.setAttribute('role', 'dialog');
    wrap.setAttribute('aria-label', '{{ shell.tr.title_todo_done }}');
    wrap.innerHTML = '<span class="sheet-backdrop"></span>' +
      '<div class="sheet sheet-scroll"><div class="sheet-head">' +
      '<span class="pname">{{ shell.tr.title_todo_done }}</span>' +
      '<button type="button" class="btn btn-ghost close">{{ shell.tr.close }}</button></div></div>';
    var sheet = wrap.querySelector('.sheet');
    if (title) sheet.appendChild(title);
    sheet.appendChild(form);
    wrap.tt_esc = function (e) { if (e.key === 'Escape') close(wrap); };
    wrap.querySelector('.sheet-backdrop').addEventListener('click', function () { close(wrap); });
    wrap.querySelector('.close').addEventListener('click', function () { close(wrap); });
    document.addEventListener('keydown', wrap.tt_esc);
    document.querySelector('.shell').appendChild(wrap);
    // Le formulaire arrive après le passage initial d'app.html : une fois
    // dans le document, un change synthétique par section lui applique
    // l'état désactivé (le listener d'app.html est délégué sur document).
    form.querySelectorAll('.swt-check input[type="checkbox"]').forEach(function (c) {
      c.dispatchEvent(new Event('change', { bubbles: true }));
    });
    wrap.querySelector('.close').focus();
  }
  document.addEventListener('click', function (e) {
    var a = e.target.closest ? e.target.closest('a[href$="/terminer"]') : null;
    if (!a) return;
    e.preventDefault();
    trigger = a;
    fetch(a.getAttribute('href'))
      .then(function (r) { return r.ok ? r.text() : Promise.reject(); })
      .then(function (t) { open(t, a.getAttribute('href')); })
      .catch(function () { location.href = a.getAttribute('href'); });
  });
})();
</script>
{% endblock %}