{% if pageCount > 1 %}
    <nav aria-label="{{ 'news.pagination.label'|trans }}">
        <ul class="flex flex-wrap items-center justify-center gap-2">
            {% if previous is defined %}
                <li>
                    <a class="inline-flex min-h-10 items-center border border-foreground/20 px-4 text-sm uppercase text-foreground transition hover:border-accent hover:text-accent" rel="prev" href="{{ path(route, knp_pagination_query(query, previous, options)) }}">
                        {{ 'news.pagination.previous'|trans }}
                    </a>
                </li>
            {% endif %}

            {% if startPage > 1 %}
                <li>
                    <a class="inline-flex size-10 items-center justify-center border border-foreground/20 text-sm text-foreground transition hover:border-accent hover:text-accent" href="{{ path(route, knp_pagination_query(query, 1, options)) }}">1</a>
                </li>
                {% if startPage == 3 %}
                    <li>
                        <a class="inline-flex size-10 items-center justify-center border border-foreground/20 text-sm text-foreground transition hover:border-accent hover:text-accent" href="{{ path(route, knp_pagination_query(query, 2, options)) }}">2</a>
                    </li>
                {% elseif startPage != 2 %}
                    <li><span class="inline-flex size-10 items-center justify-center text-foreground/50">&hellip;</span></li>
                {% endif %}
            {% endif %}

            {% for page in pagesInRange %}
                <li>
                    {% if page != current %}
                        <a class="inline-flex size-10 items-center justify-center border border-foreground/20 text-sm text-foreground transition hover:border-accent hover:text-accent" href="{{ path(route, knp_pagination_query(query, page, options)) }}" aria-label="{{ 'news.pagination.page'|trans({ '%page%': page }) }}">{{ page }}</a>
                    {% else %}
                        <span class="inline-flex size-10 items-center justify-center border border-accent bg-accent text-sm text-on-accent" aria-current="page">{{ page }}</span>
                    {% endif %}
                </li>
            {% endfor %}

            {% if pageCount > endPage %}
                {% if pageCount > (endPage + 1) %}
                    {% if pageCount > (endPage + 2) %}
                        <li><span class="inline-flex size-10 items-center justify-center text-foreground/50">&hellip;</span></li>
                    {% else %}
                        <li>
                            <a class="inline-flex size-10 items-center justify-center border border-foreground/20 text-sm text-foreground transition hover:border-accent hover:text-accent" href="{{ path(route, knp_pagination_query(query, pageCount - 1, options)) }}">{{ pageCount - 1 }}</a>
                        </li>
                    {% endif %}
                {% endif %}
                <li>
                    <a class="inline-flex size-10 items-center justify-center border border-foreground/20 text-sm text-foreground transition hover:border-accent hover:text-accent" href="{{ path(route, knp_pagination_query(query, pageCount, options)) }}">{{ pageCount }}</a>
                </li>
            {% endif %}

            {% if next is defined %}
                <li>
                    <a class="inline-flex min-h-10 items-center border border-foreground/20 px-4 text-sm uppercase text-foreground transition hover:border-accent hover:text-accent" rel="next" href="{{ path(route, knp_pagination_query(query, next, options)) }}">
                        {{ 'news.pagination.next'|trans }}
                    </a>
                </li>
            {% endif %}
        </ul>
    </nav>
{% endif %}
