{% load wagtailcore_tags %}

<script src="https://kit.fontawesome.com/2e8803d931.js" crossorigin="anonymous"></script>
{% if items.paginator.num_pages > 1 %}
<div class="pagination">
    <!-- Botão para primeira página e página anterior -->
    <div class="wrapper-icon-pagination">
        {% if items.has_previous %}
            <a href="{% pageurl page %}?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page=1" aria-label="Primeira Página">
                <div class="wrapper-two"><i class="fa-solid fa-chevron-left"></i><i class="fa-solid fa-chevron-left"></i></div>
            </a>
        {% else %}
            <div class="wrapper-two disabled"><i class="fa-solid fa-chevron-left"></i><i class="fa-solid fa-chevron-left"></i></div>
        {% endif %}
        
        {% if items.has_previous %}
            <a href="{% pageurl page %}?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ items.previous_page_number }}" aria-label="Página Anterior">
                <i class="fa-solid fa-chevron-left"></i>
            </a>
        {% else %}
            <i class="fa-solid fa-chevron-left disabled"></i>
        {% endif %}
    </div>

    <!-- Números das páginas -->
    {% with items.number|add:"-3" as page_start %}
    {% with items.number|add:"3" as page_end %}
    {% with items.paginator.num_pages as total_pages %}
    
    {% for i in items.paginator.page_range %}
        {% if i >= page_start and i <= page_end or i == 1 or i == total_pages %}
            {% if items.number == i %}
                <a class="link-pagination active" href="#">{{ i }}</a>
            {% else %}
                <a class="link-pagination" href="{% pageurl page %}?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ i }}">{{ i }}</a>
            {% endif %}
        {% elif i == page_start|add:"-1" or i == page_end|add:"1" %}
            <span class="link-pagination">...</span>
        {% endif %}
    {% endfor %}
    
    {% endwith %}
    {% endwith %}
    {% endwith %}

    <!-- Botão para próxima página e última página -->
    <div class="wrapper-icon-pagination">
        {% if items.has_next %}
            <a href="{% pageurl page %}?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ items.next_page_number }}" aria-label="Próxima Página">
                <i class="fa-solid fa-chevron-right"></i>
            </a>
        {% else %}
            <i class="fa-solid fa-chevron-right disabled"></i>
        {% endif %}
        
        {% if items.has_next %}
            <a href="{% pageurl page %}?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ items.paginator.num_pages }}" aria-label="Última Página">
                <div class="wrapper-two"><i class="fa-solid fa-chevron-right"></i><i class="fa-solid fa-chevron-right"></i></div>
            </a>
        {% else %}
            <div class="wrapper-two disabled"><i class="fa-solid fa-chevron-right"></i><i class="fa-solid fa-chevron-right"></i></div>
        {% endif %}
    </div>
</div>
{% endif %}