{% extends "app.html" %}
{% import "components.html" as c %}
{% block content %}
<a class="btn btn-ghost" style="margin:0 0 var(--space-4);padding-left:0" href="/taches">{{ shell.tr.back_todos }}</a>

{% if let Some(e) = error %}<p class="form-error">{{ e }}</p>{% endif %}

<form method="post" action="{% if let Some(id) = edit_id %}/taches/{{ id }}{% else %}/taches{% endif %}">
  <input type="hidden" name="csrf" value="{{ csrf }}">

  <div class="field" style="margin-bottom:var(--space-4)">
    <label for="todo-nom">{{ shell.tr.todo_name_label }}</label>
    <input class="input" id="todo-nom" name="nom" value="{{ name }}" required
           placeholder="{{ shell.tr.todo_name_ph }}" style="min-height:46px">
  </div>

  <div class="field" style="margin-bottom:var(--space-2)">
    <label id="todo-cat-label">{{ shell.tr.category_label }}</label>
  </div>
  <div class="chips" role="radiogroup" aria-labelledby="todo-cat-label" style="margin-bottom:var(--space-6)">
    {% for c in cats %}
    <label class="chip">
      <input type="radio" name="categorie" value="{{ c.id }}" required {% if c.selected %}checked{% endif %}>
      <span class="cdot" style="background:{{ c.color }}"></span>{{ c.name }}
    </label>
    {% endfor %}
  </div>

  <div class="field" style="margin-bottom:var(--space-2)">
    <label for="todo-date">{{ shell.tr.activation_date }}</label>
    <div style="display:flex;gap:var(--space-2);align-items:center">
      <button type="button" class="btn btn-secondary btn-icon" data-day="-1" aria-label="{{ shell.tr.day_prev }}" hidden>
        {% call c::chevron_left(16) %}{% endcall %}
      </button>
      <input class="input" id="todo-date" name="date" type="date" value="{{ date }}" required
             style="flex:1;min-height:46px;text-align:center">
      <button type="button" class="btn btn-secondary btn-icon" data-day="1" aria-label="{{ shell.tr.day_next }}" hidden>
        {% call c::chevron_right(16) %}{% endcall %}
      </button>
    </div>
  </div>
  <p id="todo-date-label" class="hint" style="margin-bottom:var(--space-6)"
     data-pattern="{{ vocab.pattern }}" data-weekdays="{{ vocab.weekdays }}"
     data-months="{{ vocab.months }}" data-today="{{ vocab.today }}"
     data-today-suffix="{{ vocab.today_suffix }}">{{ date_label }}</p>

  <div class="field" style="margin-bottom:var(--space-2)">
    <label id="todo-prio-label">{{ shell.tr.prio_label }}</label>
  </div>
  <div class="chips" role="radiogroup" aria-labelledby="todo-prio-label" style="margin-bottom:var(--space-6)">
    {% for p in prios %}
    <label class="chip">
      <input type="radio" name="priorite" value="{{ p.code }}" required {% if p.selected %}checked{% endif %}>
      {{ p.label }}
    </label>
    {% endfor %}
  </div>

  <div class="field" style="margin-bottom:var(--space-2)">
    <label id="todo-asg-label">{{ shell.tr.assign_to }}</label>
  </div>
  <div class="chips" role="group" aria-labelledby="todo-asg-label" style="margin-bottom:var(--space-2)">
    {% for m in members %}
    <label class="chip">
      <input type="checkbox" name="assigne" value="{{ m.id }}" {% if m.selected %}checked{% endif %}>
      {{ m.name }}
    </label>
    {% endfor %}
  </div>
  <p class="hint-sm" style="margin:0 0 var(--space-8)">{{ shell.tr.assign_note }}</p>

  <button type="submit" class="btn btn-primary btn-block btn-lg">
    {% if edit_id.is_some() %}{{ shell.tr.save }}{% else %}{{ shell.tr.create_todo }}{% endif %}
  </button>
</form>

{% if let Some(id) = edit_id %}
<form method="post" action="/taches/{{ id }}/supprimer" style="margin-top:var(--space-3)">
  <input type="hidden" name="csrf" value="{{ csrf }}">
  <button type="submit" class="btn btn-secondary btn-block" style="min-height:48px">{{ shell.tr.delete_todo }}</button>
</form>
{% endif %}

<script>
// Amélioration progressive : steppers ± 1 jour (sans JS, l'input date suffit).
// Le libellé sous le champ suit la date, y compris quand elle est tapée à la
// main : il est refait avec le motif et les noms rendus par le serveur
// (data-*), jamais avec du texte écrit ici.
(function () {
  var input = document.getElementById('todo-date');
  var label = document.getElementById('todo-date-label');
  var weekdays = label.dataset.weekdays.split('|');
  var months = label.dataset.months.split('|');

  // Tout en UTC : les steppers restent justes en travers d'un changement d'heure.
  function parse(v) {
    var p = String(v || '').split('-');
    return p.length === 3 ? new Date(Date.UTC(+p[0], +p[1] - 1, +p[2])) : null;
  }
  function iso(d) { return d.toISOString().slice(0, 10); }

  function render() {
    var d = parse(input.value);
    if (!d) { label.textContent = ''; return; }
    var s = label.dataset.pattern
      .replace('{w}', weekdays[(d.getUTCDay() + 6) % 7])
      .replace('{d}', d.getUTCDate())
      .replace('{m}', months[d.getUTCMonth()]);
    label.textContent = s.charAt(0).toUpperCase() + s.slice(1)
      + (input.value === label.dataset.today ? label.dataset.todaySuffix : '');
  }

  document.querySelectorAll('button[data-day]').forEach(function (b) {
    b.hidden = false;
    b.addEventListener('click', function () {
      var d = parse(input.value) || parse(label.dataset.today);
      d.setUTCDate(d.getUTCDate() + (+b.dataset.day));
      input.value = iso(d);
      render();
    });
  });
  input.addEventListener('input', render);
  input.addEventListener('change', render);
})();
</script>
{% endblock %}