{# La navigation entre les pages d'une liste.

   Elle porte `rel="prev"` et `rel="next"` : c'est ce qui dit à un moteur que
   ces pages forment une suite, et non des doublons les uns des autres. #}
{% if pagination.pages > 1 %}
    <nav class="mt-14 flex items-center justify-center gap-2" aria-label="Pages de résultats">
        {% if pagination.hasPrevious %}
            <a href="{{ path(route, params|merge({ page: pagination.page - 1 })) }}" rel="prev"
               class="grid h-10 w-10 place-items-center rounded-full border border-line text-brand-ink transition hover:border-brand hover:bg-surface-tint">
                <span class="sr-only">Page précédente</span>
                <svg class="h-3.5 w-3.5" viewBox="0 0 16 12" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M15 6H2M6.5 1.5 2 6l4.5 4.5"/></svg>
            </a>
        {% endif %}

        {% for number in pagination.window %}
            {% if number is null %}
                <span class="px-1 font-sans text-sm text-subtle" aria-hidden="true">…</span>
            {% elseif number == pagination.page %}
                <span aria-current="page" class="grid h-10 min-w-10 place-items-center rounded-full bg-brand-cta px-3 font-sans text-sm font-semibold text-white">{{ number }}</span>
            {% else %}
                <a href="{{ path(route, params|merge({ page: number })) }}"
                   class="grid h-10 min-w-10 place-items-center rounded-full border border-line px-3 font-sans text-sm text-body transition hover:border-brand hover:text-brand-ink">{{ number }}</a>
            {% endif %}
        {% endfor %}

        {% if pagination.hasNext %}
            <a href="{{ path(route, params|merge({ page: pagination.page + 1 })) }}" rel="next"
               class="grid h-10 w-10 place-items-center rounded-full border border-line text-brand-ink transition hover:border-brand hover:bg-surface-tint">
                <span class="sr-only">Page suivante</span>
                <svg class="h-3.5 w-3.5" viewBox="0 0 16 12" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M1 6h13M9.5 1.5 14 6l-4.5 4.5"/></svg>
            </a>
        {% endif %}
    </nav>
{% endif %}