{% load static %}

<link rel="stylesheet" href="{% static 'css/pagination.css' %}">

<nav class="pagination">
    <!-- Первая страница — всегда доступна -->

    {% if page_obj.has_previous %}
        <a class="page-btn" href="?page={{ page_obj.previous_page_number }}">‹</a>
        {% if page_obj.number > 1 %}
            <a class="page-btn" href="?page=1">1</a>
            {% if page_obj.number > 3 %}
                <span class="ellipsis">...</span>
            {% endif %}
        {% endif %}
    {% else %}
        <span class="page-btn disabled">‹</span>
    {% endif %}

    {% for num in page_obj.paginator.page_range %}
    {% if num != 1 %}
        {% if num == page_obj.number %}
            <span class="page-btn active">{{ num }}</span>
        {% elif num > page_obj.number|add:"-3" and num < page_obj.number|add:"3" %}
            <a class="page-btn" href="?page={{ num }}">{{ num }}</a>
        {% endif %}
    {% elif num == 1 and num == page_obj.number %}
        <span class="page-btn disabled">{{ num }}</span>
    {% endif %}
    {% endfor %}

    {% if page_obj.has_next %}
        <a class="page-btn" href="?page={{ page_obj.next_page_number }}">›</a>
    {% else %}
        <span class="page-btn disabled">›</span>
    {% endif %}
</nav>