{% load i18n %}
<nav class="pagination is-centered" aria-label="pagination">
    <a
        class="pagination-previous {% if not page.has_previous %}is-disabled{% endif %}"
        {% if page.has_previous %}
        href="{{ path }}?{% for k, v in request.GET.items %}{% if k != 'page' %}{{ k }}={{ v }}&{% endif %}{% endfor %}page={{ page.previous_page_number }}{{ anchor }}"
        {% else %}
        aria-hidden="true"
        {% endif %}>

        <span class="icon icon-arrow-left" aria-hidden="true"></span>
        {% if mode == "chronological" %}
        {% trans "Newer" %}
        {% else %}
        {% trans "Previous" %}
        {% endif %}
    </a>

    <a
        class="pagination-next {% if not page.has_next %}is-disabled{% endif %}"
        {% if page.has_next %}
        href="{{ path }}?{% for k, v in request.GET.items %}{% if k != 'page' %}{{ k }}={{ v }}&{% endif %}{% endfor %}page={{ page.next_page_number }}{{ anchor }}"
        {% else %}
        aria-hidden="true"
        {% endif %}>

        {% if mode == "chronological" %}
        {% trans "Older" %}
        {% else %}
        {% trans "Next" %}
        {% endif %}
        <span class="icon icon-arrow-right" aria-hidden="true"></span>
    </a>

    {% if page.has_other_pages and page_range %}
        <ul class="pagination-list">
        {% for num in page_range %}
            {% if num == page.number %}
                <li><a class="pagination-link is-current" aria-label="Page {{ num }}" aria-current="page">{{ num }}</a></li>
            {% elif num == '…' %}
                <li><span class="pagination-ellipsis">&hellip;</span></li>
            {% else %}
                <li><a class="pagination-link" aria-label="Goto page {{ num }}" href="{{ path }}?{% for k, v in request.GET.items %}{% if k != 'page' %}{{ k }}={{ v }}&{% endif %}{% endfor %}page={{ num }}{{ anchor }}">{{ num }}</a></li>
            {% endif %}
        {% endfor %}
        </ul>
    {% endif %}
</nav>
