{# c-pagination :page="page_obj" — conserve les filtres de l'URL #}
<c-vars page label="éléments" />
{% if page and page.paginator.num_pages > 1 %}
<nav class="flex flex-col items-center justify-between gap-3 sm:flex-row" aria-label="Pagination">
  <p class="text-sm text-slate-500">
    <span class="font-semibold text-brand-900">{{ page.start_index }}–{{ page.end_index }}</span> sur
    <span class="font-semibold text-brand-900">{{ page.paginator.count }}</span> {{ label }}
  </p>
  <ul class="flex flex-wrap items-center gap-1">
    <li>{% if page.has_previous %}<a class="page-link" href="{% query page=page.previous_page_number %}" aria-label="Page précédente">{% icon "chevron-left" "size-4" %}</a>{% else %}<span class="page-link is-disabled">{% icon "chevron-left" "size-4" %}</span>{% endif %}</li>
    {% with rng=page.paginator|elided:page.number %}
      {% for n in rng %}
        <li>{% if n == page.number %}<span class="page-link is-current" aria-current="page">{{ n }}</span>{% elif n == "…" %}<span class="px-2 text-slate-400">…</span>{% else %}<a class="page-link" href="{% query page=n %}">{{ n }}</a>{% endif %}</li>
      {% endfor %}
    {% endwith %}
    <li>{% if page.has_next %}<a class="page-link" href="{% query page=page.next_page_number %}" aria-label="Page suivante">{% icon "chevron-right" "size-4" %}</a>{% else %}<span class="page-link is-disabled">{% icon "chevron-right" "size-4" %}</span>{% endif %}</li>
  </ul>
</nav>
{% endif %}