{% extends "app.html" %}
{% block content %}
<p class="step-hint">{{ hint }}</p>
<form method="post" action="/parametres/categories" class="category-add-row">
  <input type="hidden" name="csrf" value="{{ csrf }}">
  <input class="input" name="name" placeholder="{{ shell.tr.new_category_ph }}" required aria-label="{{ shell.tr.new_category_ph }}">
  <button type="submit" class="btn btn-primary">{{ shell.tr.add }}</button>
</form>
{% for t in categories %}
<div class="category-row {% if t.archived %}archived{% endif %}">
  <span class="dot dot-12" style="background:{{ t.color }}"></span>
  <form method="post" action="{{ t.rename_action }}" class="rename">
    <input type="hidden" name="csrf" value="{{ csrf }}">
    <input class="input" name="name" value="{{ t.name }}" required aria-label="{{ shell.tr.rename_cat_aria }}">
    {# tabindex=-1 : la soumission clavier passe par Entrée dans l'input ;
       sans ça, ce bouton invisible est un stop de tabulation sans focus visible. #}
    <button type="submit" class="visually-hidden" tabindex="-1">{{ shell.tr.rename }}</button>
  </form>
  <form method="post" action="{{ t.toggle_action }}">
    <input type="hidden" name="csrf" value="{{ csrf }}">
    {% if t.archived %}
    <input type="hidden" name="restaure" value="1">
    <button type="submit" class="btn btn-ghost" style="font-size:0.75rem">{{ shell.tr.restore }}</button>
    {% else %}
    <button type="submit" class="btn btn-secondary btn-icon-sm" aria-label="{{ shell.tr.archive_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"><rect x="3" y="4" width="18" height="4" rx="1"></rect><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8"></path><path d="M10 12h4"></path></svg>
    </button>
    {% endif %}
  </form>
</div>
{% endfor %}
<p class="text-muted" style="font-size:0.75rem;margin-top:var(--space-3)">{{ shell.tr.rename_help }}</p>

<h2 class="groups-title">{{ shell.tr.groups_title }}</h2>
<p class="groups-hint">{{ shell.tr.groups_hint }}</p>
{% for g in groups %}
<div class="group-card">
  <div class="group-name">{{ g.name }}</div>
  <div class="group-chips">
    {% for c in g.chips %}
    <span class="group-chip">
      <span class="dot" style="background:{{ c.color }}"></span>{{ c.name }}
      <form method="post" action="/parametres/categories/groupe" style="margin:0;display:flex">
        <input type="hidden" name="csrf" value="{{ csrf }}">
        <input type="hidden" name="categorie" value="{{ c.cat_id }}">
        <input type="hidden" name="groupe" value="">
        <input type="hidden" name="nom" value="{{ c.name }}">
        <button type="submit" class="chip-x" aria-label="{{ c.remove_aria }}">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round"><path d="M18 6L6 18M6 6l12 12"></path></svg>
        </button>
      </form>
    </span>
    {% endfor %}
  </div>
</div>
{% endfor %}
{% if !group_options.is_empty() %}
<form method="post" action="/parametres/categories/groupe" class="group-form">
  <input type="hidden" name="csrf" value="{{ csrf }}">
  <div class="field">
    <label for="grp-cat">{{ shell.tr.category_label }}</label>
    <select class="input" id="grp-cat" name="categorie" required>
      {% for o in group_options %}
      <option value="{{ o.id }}">{{ o.name }}</option>
      {% endfor %}
    </select>
  </div>
  <div class="field">
    <label for="grp-nom">{{ shell.tr.group_name_label }}</label>
    <input class="input" id="grp-nom" name="groupe" list="grp-suggestions" placeholder="{{ shell.tr.group_name_ph }}" required>
    <datalist id="grp-suggestions">
      {% for g in groups %}
      <option value="{{ g.name }}"></option>
      {% endfor %}
    </datalist>
  </div>
  <button type="submit" class="btn btn-secondary">{{ shell.tr.set_apart }}</button>
</form>
{% endif %}

<a class="btn btn-ghost" style="margin-top:var(--space-4)" href="/temps/nouveau">{{ shell.tr.back_add }}</a>
{% endblock %}