garagehq.deuxfleurs.fr/templates/partials/shared/paginator.html

{% if paginator.previous or paginator.next %}
<section class="section">
    <div class="container max-w-5xl mx-auto flex items-center justify-center">
        <nav class="pagination flex items-center my-12 text-garage-gray" role="navigation" aria-label="pagination">
            {% if paginator.previous %}
            <a class="flex items-center justify-center space-x-2 hover:text-garage-orange"
                href='{{ paginator.previous }}' {% if not paginator.previous %}disabled{% endif %}>
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M7 16l-4-4m0 0l4-4m-4 4h18"></path>
                </svg>
                <span>Prev</span>
            </a>
            {% endif %}
            <ul class="flex space-x-4 px-4">
                {% for pager in range(start=1, end=paginator.number_pagers+1) %}
                <li>
                    <a class="font-semibold inline-flex items-center justify-center h-7 w-7 rounded hover:shadow hover:bg-garage-orange bg-garage-gray bg-opacity-20 border-b-2 {% if paginator.current_index == pager %}border-garage-orange{% else %}border-transparent{% endif %}"
                        href='{{ paginator.base_url }}{{pager}}/' aria-label="Goto page {{pager}}">
                        {{pager}}
                    </a>
                </li>
                {% endfor %}
            </ul>
            {% if paginator.next %}
            <a class="flex items-center justify-center space-x-2 hover:text-garage-orange" href='{{ paginator.next }}'
                {% if not paginator.next %}disabled{% endif %}>
                <span>Next</span>
                <svg class="mt-0.5 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3">
                    </path>
                </svg>
            </a>
            {% endif %}
        </nav>
    </div>
</section>
{% endif %}