{# tailwindcss Sliding pagination control implementation #}
{% if pageCount > 1 %}
    <div class="tw-inline-block tw-mt-2">
        <div class="w-auto tw-flex tw-items-baseline tw-flex-row tw-border tw-border-solid tw-border-light-grey tw-rounded-lg tw-overflow-hidden">
        {% if first is defined and current != first %}
            <span class="tw-bg-white tw-text-blue-600 tw-px-2 tw-py-1 tw-text-sm tw-border-r tw-border-solid tw-border-light-grey tw-font-bold hover:tw-bg-lighter">
                <a href="{{ path(route, knp_pagination_query(query, first)) }}">
                    <i class="fa-regular fa-angles-left" aria-hidden="true"></i>
                </a>
            </span>
        {% endif %}

        {% if previous is defined %}
            <span class="tw-bg-white tw-text-blue-600 tw-px-2 tw-py-1 tw-text-sm tw-border-r tw-border-solid tw-border-light-grey hover:tw-bg-lighter">
                <a rel="prev" href="{{ path(route, knp_pagination_query(query, previous)) }}" class="hover:tw-underline-none">
                    <i class="fa-regular fa-angle-left" aria-hidden="true"></i>
                </a>
            </span>
        {% endif %}

        {% for page in pagesInRange %}
            {% if page != current %}
                <span class="tw-bg-white tw-text-blue-600 tw-px-2 tw-py-1 tw-text-sm tw-border-r tw-border-solid tw-border-light-grey hover:tw-bg-lighter">
                    <a href="{{ path(route, knp_pagination_query(query, page)) }}" class="hover:tw-no-underline">{{ page }}</a>
                </span>
            {% else %}
                <span class="tw-bg-primary tw-text-white tw-px-2 tw-py-1 tw-text-sm tw-font-bold hover:tw-no-underline">{{ page }}</span>
            {% endif %}
        {% endfor %}

        {% if next is defined %}
            <span class="tw-bg-white tw-text-blue-600 tw-px-2 tw-py-1 tw-text-sm tw-border-r tw-border-solid tw-border-light-grey hover:tw-bg-lighter">
                <a rel="next" href="{{ path(route, knp_pagination_query(query, next)) }}">
                    <i class="fa-regular fa-angle-right" aria-hidden="true"></i>
                </a>
            </span>
        {% endif %}

        {% if last is defined and current != last %}
            <span class="tw-bg-white tw-text-blue-600 tw-px-2 tw-py-1 tw-text-sm tw-border-light-grey tw-border-solid tw-font-bold hover:tw-bg-lighter">
                <a href="{{ path(route, knp_pagination_query(query, last)) }}">
                    <i class="fa-regular fa-angles-right" aria-hidden="true"></i>
                </a>
            </span>
        {% endif %}
        </div>
    </div>
{% endif %}