{% comment %}
A list's paginator, drawn by {% paginator %} (phoxtail_core_tags): First and
Previous, five page numbers around the current one, Next and Last, under the
list; on a phone the three numbers nearest the current page. Every page draws
as many buttons, so it never changes width. A page asked for scrolls back to
the top (paginator.js). Draws nothing for a single page.
{% endcomment %}
{% if page.paginator.num_pages > 1 %}
    {% load i18n %}
    <nav class="phx-paginator" aria-label="{% translate "Pagination" %}">
        {% for icon, label, number in before %}
            {% include "phoxtail_core/paginator_step.html" with icon=icon label=label number=number url=url include=include param=param only %}
        {% endfor %}
        <div class="phx-paginator__pages">
            {% for number, near in page_window %}
                {% if number == page.number %}
                    <span class="phx-button phx-button--secondary phx-paginator__page" aria-current="page">{{ number }}</span>
                {% else %}
                    <button type="button"
                            class="phx-button phx-button--secondary phx-paginator__page{% if not near %} phx-paginator__page--far{% endif %}"
                            hx-get="{{ url }}"
                            hx-vals='{"{{ param }}": "{{ number }}"}'
                            hx-include="{{ include }}"
                            hx-swap="none">{{ number }}</button>
                {% endif %}
            {% endfor %}
        </div>
        {% for icon, label, number in after %}
            {% include "phoxtail_core/paginator_step.html" with icon=icon label=label number=number url=url include=include param=param only %}
        {% endfor %}
    </nav>
{% endif %}