{#
    The Knp paginator's sliding window, styled like the sibling project's admin tables: the bar
    butts against the bottom border of the table it belongs to, hence border-t-0.

    Every control is a plain link -- the house rule hands navigation to the browser, so paging is a
    normal request and the page ends up in the URL, next to the filter and sort parameters that
    query|merge carries along.
#}
{% if pageCount > 0 %}
    <div class="bg-gray-100 border border-gray-300 border-t-0 px-4 py-3 flex items-center justify-between sm:px-4">
        <div class="flex-1 flex items-center justify-between">
            <div class="text-sm leading-5 text-gray-700">
                Einträge <span class="font-medium">{{ firstItemNumber }}</span>
                bis <span class="font-medium">{{ lastItemNumber }}</span>
                von {{ totalCount }}
            </div>
            <div>
                <nav class="relative z-0 inline-flex">
                    {% if pageCount > 1 %}
                        {% if first is defined and current != first %}
                            <a href="{{ path(route, query|merge({(pageParameterName): first})) }}" class="relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium hover:bg-secondary hover:text-white" aria-label="Erste Seite">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" />
                                </svg>
                            </a>
                        {% endif %}
                        {% if previous is defined %}
                            <a href="{{ path(route, query|merge({(pageParameterName): previous})) }}" class="-ml-px relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium hover:bg-secondary hover:text-white" aria-label="Vorherige Seite">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
                                </svg>
                            </a>
                        {% endif %}
                        {% if current > 3 %}
                            <span class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700">
                              ...
                            </span>
                        {% endif %}
                        {% for page in pagesInRange %}
                            <a href="{{ path(route, query|merge({(pageParameterName): page})) }}" class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm leading-5 font-medium focus:z-10 hover:bg-secondary {% if page == current %}bg-primary text-white hover:text-white{% else %}bg-white text-gray-700 hover:text-white{% endif %}"{% if page == current %} aria-current="page"{% endif %}>
                                {{ page }}
                            </a>
                        {% endfor %}
                        {% if current < pageCount - 3 %}
                            <span class="-ml-px relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700">
                              ...
                            </span>
                        {% endif %}
                        {% if next is defined %}
                            <a href="{{ path(route, query|merge({(pageParameterName): next})) }}" class="-ml-px relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium hover:bg-secondary hover:text-white" aria-label="Nächste Seite">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
                                </svg>
                            </a>
                        {% endif %}
                        {% if last is defined and current != last %}
                            <a href="{{ path(route, query|merge({(pageParameterName): last})) }}" class="-ml-px relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm leading-5 font-medium hover:bg-secondary hover:text-white" aria-label="Letzte Seite">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5" />
                                </svg>
                            </a>
                        {% endif %}
                    {% endif %}
                </nav>
            </div>
        </div>
    </div>
{% endif %}