{% extends "backoffice/base.html" %}
{% block page_title %}Mots-clés{% endblock %}
{% block breadcrumb %}Contenus <span class="mx-1 text-slate-300">/</span> <span class="font-semibold text-brand-900">Mots-clés</span>{% endblock %}
{% block content %}
<c-page-header title="Mots-clés" subtitle="Thèmes transversaux associés aux articles." />
<div class="grid gap-6 lg:grid-cols-[22rem_minmax(0,1fr)]">
  <c-card title="Ajouter un mot-clé" class="self-start">
    <form method="post" class="space-y-4" novalidate>
      {% csrf_token %}
      <c-field :field="form.nom" />
      <c-field :field="form.slug" help="Optionnel." />
      <button class="btn btn-primary w-full">{% icon "plus" %} Ajouter</button>
    </form>
  </c-card>
  <div class="card overflow-hidden">
    <form method="get" class="border-b border-slate-100 p-4"><input type="search" name="q" value="{{ request.GET.q }}" placeholder="Rechercher…" class="form-input" aria-label="Rechercher"></form>
    {% if page_obj.object_list %}
    <div class="table-wrap"><table class="table">
      <thead><tr><th>Mot-clé</th><th class="text-right">Articles</th><th class="text-right">Actions</th></tr></thead>
      <tbody>
      {% for t in page_obj %}
        <tr>
          <td><span class="font-semibold text-brand-900">#{{ t.nom }}</span> <span class="text-xs text-slate-400">/tag/{{ t.slug }}</span></td>
          <td class="text-right tabular-nums">{{ t.nb }}</td>
          <td><div class="flex justify-end gap-1">
            <a href="{% url 'taxonomy:tag-edit' t.pk %}" class="btn btn-ghost btn-icon" title="Modifier">{% icon "pencil" "size-4" %}</a>
            <c-post-button action="{% url 'taxonomy:tag-delete' t.pk %}" variant="ghost" size="" class="btn-icon text-signal-600 hover:bg-signal-50" icon="trash" title="Supprimer"
              confirm="Supprimer le mot-clé « {{ t.nom }} » ? Il sera retiré de {{ t.nb }} article(s)." confirm_label="Supprimer" />
          </div></td>
        </tr>
      {% endfor %}
      </tbody>
    </table></div>
    {% else %}<c-empty icon="tag" title="Aucun mot-clé" />{% endif %}
  </div>
</div>
<div class="mt-5"><c-pagination :page="page_obj" label="mots-clés" /></div>
{% endblock %}