{% if paginator.paginator.num_pages > 1 %}
    {% load phoxtail_core_tags %}
    {% get_proper_page_range paginator.paginator paginator.number as page_range %}
    <div class="tka-pagination__wrap">
        <nav class="tka-pagination__nav">
            <!-- Previous -->
            <div class="tka-pagination__side">
                {% if paginator.has_previous %}
                    <button hx-get="{% url 'access_tokens_management:admin_tokens_filters' %}"
                            hx-vals='{"filter-page": "{{ paginator.previous_page_number }}"}'
                            hx-include="#tokens-filters-form-placeholder"
                            hx-swap="none"
                            hx-indicator=".htmx-indicator"
                            class="tka-pagination__btn">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg>
                        Previous
                    </button>
                {% else %}
                    <div class="tka-pagination__btn tka-pagination__btn--invisible">
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                        </svg>
                        Previous
                    </div>
                {% endif %}
            </div>
            <!-- Page numbers -->
            <div class="tka-pagination__numbers">
                {% for page_num in page_range %}
                    {% if page_num == '...' %}
                        <span class="tka-pagination__ellipsis">{{ page_num }}</span>
                    {% else %}
                        {% if paginator.number == page_num %}
                            <span class="tka-pagination__number tka-pagination__number--active">{{ page_num }}</span>
                        {% else %}
                            <button hx-get="{% url 'access_tokens_management:admin_tokens_filters' %}"
                                    hx-vals='{"filter-page": "{{ page_num }}"}'
                                    hx-include="#tokens-filters-form-placeholder"
                                    hx-swap="none"
                                    hx-indicator=".htmx-indicator"
                                    class="tka-pagination__number">{{ page_num }}</button>
                        {% endif %}
                    {% endif %}
                {% endfor %}
            </div>
            <!-- Mobile info -->
            <div class="tka-pagination__mobile">
                <span>Page {{ paginator.number }} of {{ paginator.paginator.num_pages }}</span>
            </div>
            <!-- Next -->
            <div class="tka-pagination__side">
                {% if paginator.has_next %}
                    <button hx-get="{% url 'access_tokens_management:admin_tokens_filters' %}"
                            hx-vals='{"filter-page": "{{ paginator.next_page_number }}"}'
                            hx-include="#tokens-filters-form-placeholder"
                            hx-swap="none"
                            hx-indicator=".htmx-indicator"
                            class="tka-pagination__btn">
                        Next
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </button>
                {% else %}
                    <div class="tka-pagination__btn tka-pagination__btn--invisible">
                        Next
                        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                        </svg>
                    </div>
                {% endif %}
            </div>
        </nav>
    </div>
{% endif %}