{% extends "backoffice/base.html" %}
{% block page_title %}Rubriques{% endblock %}
{% block breadcrumb %}Contenus <span class="mx-1 text-slate-300">/</span> <span class="font-semibold text-brand-900">Rubriques</span>{% endblock %}
{% block content %}
<c-page-header title="Rubriques" subtitle="Organisez les articles et composez le menu principal du site.">
  <c-slot name="toolbar"><c-button href="{% url 'taxonomy:category-create' %}" icon="plus">Nouvelle rubrique</c-button></c-slot>
</c-page-header>

<form method="get" class="card mb-4 flex flex-col gap-3 p-4 sm:flex-row">
  <input type="search" name="q" value="{{ request.GET.q }}" placeholder="Rechercher une rubrique…" class="form-input flex-1" aria-label="Rechercher">
  <select name="menu" class="form-select sm:w-52" onchange="this.form.submit()" aria-label="Filtrer par menu">
    <option value="">Toutes</option>
    <option value="1" {% if request.GET.menu == "1" %}selected{% endif %}>Dans le menu</option>
    <option value="0" {% if request.GET.menu == "0" %}selected{% endif %}>Hors menu</option>
  </select>
  <button class="btn btn-primary">Filtrer</button>
</form>

<div class="card overflow-hidden">
  {% if page_obj.object_list %}
  <div class="table-wrap"><table class="table">
    <thead><tr><th>Rubrique</th><th>Menu</th><th class="text-right">Articles</th><th class="text-right">Actions</th></tr></thead>
    <tbody>
    {% for c in page_obj %}
      <tr>
        <td>
          <a href="{% url 'taxonomy:category-edit' c.pk %}" class="font-semibold text-brand-900 hover:text-brand-600">{{ c.nom }}</a>
          <p class="text-xs text-slate-500">/categorie/{{ c.slug }}{% if c.description %} · {{ c.description|truncatechars:70 }}{% endif %}</p>
        </td>
        <td>{% if c.est_dans_menu %}<span class="badge badge-blue">Position {{ c.ordre|default:"—" }}</span>{% else %}<span class="badge badge-neutral">Hors menu</span>{% endif %}</td>
        <td class="text-right font-semibold tabular-nums text-brand-900">{{ c.nb }}</td>
        <td>
          <div class="flex justify-end gap-1">
            <a href="{{ c.get_absolute_url }}" target="_blank" class="btn btn-ghost btn-icon" title="Voir sur le site">{% icon "external" "size-4" %}</a>
            <a href="{% url 'taxonomy:category-edit' c.pk %}" class="btn btn-ghost btn-icon" title="Modifier">{% icon "pencil" "size-4" %}</a>
            <c-post-button action="{% url 'taxonomy:category-delete' c.pk %}" variant="ghost" size="" class="btn-icon text-signal-600 hover:bg-signal-50" icon="trash" title="Supprimer"
              confirm="Supprimer la rubrique « {{ c.nom }} » ? Une rubrique contenant des articles ne peut pas être supprimée." confirm_label="Supprimer" />
          </div>
        </td>
      </tr>
    {% endfor %}
    </tbody>
  </table></div>
  {% else %}<c-empty icon="folder" title="Aucune rubrique" />{% endif %}
</div>
<div class="mt-5"><c-pagination :page="page_obj" label="rubriques" /></div>
{% endblock %}