{# templates/bundles/KnpPaginatorBundle/Pagination/custom_tailwind_pagination.html.twig #}
{% if pageCount > 1 %}
    <div class="flex flex-col items-center space-y-2 mt-4">
        <nav class="inline-flex rounded-md shadow-sm" aria-label="Pagination">
            {# Première page #}
            {% if first is defined and current != first %}
                <a href="{{ path(route, query|merge({(pageParameterName): first})) }}"
                   class="relative inline-flex items-center justify-center w-10 h-10 px-2 py-2 text-gray-600 bg-white rounded-l-md border border-gray-300 hover:bg-gray-100"
                   aria-label="Première page">
                    <span class="sr-only">Première page</span>
                    <span class="text-lg font-medium">&laquo;</span>
                </a>
            {% else %}
                <span class="relative inline-flex items-center justify-center w-10 h-10 px-2 py-2 text-gray-300 bg-white rounded-l-md border border-gray-300 cursor-not-allowed">
                    <span class="sr-only">Première page</span>
                    <span class="text-lg font-medium">&laquo;</span>
                </span>
            {% endif %}

            {# Page précédente #}
            {% if previous is defined %}
                <a href="{{ path(route, query|merge({(pageParameterName): previous})) }}"
                   class="relative inline-flex items-center justify-center w-10 h-10 px-2 py-2 text-gray-600 bg-white border-t border-b border-gray-300 hover:bg-gray-100"
                   aria-label="Page précédente">
                    <span class="sr-only">Précédente</span>
                    <span class="text-lg font-medium">&lsaquo;</span>
                </a>
            {% else %}
                <span class="relative inline-flex items-center justify-center w-10 h-10 px-2 py-2 text-gray-300 bg-white border-t border-b border-gray-300 cursor-not-allowed">
                    <span class="sr-only">Précédente</span>
                    <span class="text-lg font-medium">&lsaquo;</span>
                </span>
            {% endif %}

            {# Pages numérotées #}
            {% for page in pagesInRange %}
                {% if page == current %}
                    <span aria-current="page" class="relative inline-flex items-center justify-center w-10 h-10 px-2 py-2 text-white bg-blue-600 border border-blue-600 font-medium">
                        {{ page }}
                    </span>
                {% else %}
                    <a href="{{ path(route, query|merge({(pageParameterName): page})) }}"
                       class="relative inline-flex items-center justify-center w-10 h-10 px-2 py-2 text-gray-800 bg-white border border-gray-300 hover:bg-gray-100 font-medium">
                        {{ page }}
                    </a>
                {% endif %}
            {% endfor %}

            {# Page suivante #}
            {% if next is defined %}
                <a href="{{ path(route, query|merge({(pageParameterName): next})) }}"
                   class="relative inline-flex items-center justify-center w-10 h-10 px-2 py-2 text-gray-600 bg-white border-t border-b border-gray-300 hover:bg-gray-100"
                   aria-label="Page suivante">
                    <span class="sr-only">Suivante</span>
                    <span class="text-lg font-medium">&rsaquo;</span>
                </a>
            {% else %}
                <span class="relative inline-flex items-center justify-center w-10 h-10 px-2 py-2 text-gray-300 bg-white border-t border-b border-gray-300 cursor-not-allowed">
                    <span class="sr-only">Suivante</span>
                    <span class="text-lg font-medium">&rsaquo;</span>
                </span>
            {% endif %}

            {# Dernière page #}
            {% if last is defined and current != last %}
                <a href="{{ path(route, query|merge({(pageParameterName): last})) }}"
                   class="relative inline-flex items-center justify-center w-10 h-10 px-2 py-2 text-gray-600 bg-white rounded-r-md border border-gray-300 hover:bg-gray-100"
                   aria-label="Dernière page">
                    <span class="sr-only">Dernière page</span>
                    <span class="text-lg font-medium">&raquo;</span>
                </a>
            {% else %}
                <span class="relative inline-flex items-center justify-center w-10 h-10 px-2 py-2 text-gray-300 bg-white rounded-r-md border border-gray-300 cursor-not-allowed">
                    <span class="sr-only">Dernière page</span>
                    <span class="text-lg font-medium">&raquo;</span>
                </span>
            {% endif %}
        </nav>

        {# Informations sur la pagination #}
        <div class="text-sm text-gray-700 text-center">
            Page {{ current }} sur {{ last }} • {{ totalCount }} contributeur{{ totalCount > 1 ? 's' : '' }} au total
        </div>
    </div>
{% endif %}