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

<nav aria-label="Pagination" class="custom-pagination-wrapper">
  <ul class="custom-pagination">
    {% if page_obj.has_previous %}
      <li>
        <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page=1" class="custom-page-link">
          « First
        </a>
      </li>
      <li>
        <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.previous_page_number }}" class="custom-page-link">
          ‹ Prev
        </a>
      </li>
    {% endif %}
    
    {% for n in page_obj.paginator.page_range %}
      {% if page_obj.number == n %}
        <li>
          <span class="custom-page-link active">{{ n }}</span>
        </li>
      {% elif n > page_obj.number|add:'-3' and n < page_obj.number|add:'3' %}
        <li>
          <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ n }}" class="custom-page-link">{{ n }}</a>
        </li>
      {% endif %}
    {% endfor %}
    
    {% if page_obj.has_next %}
      <li>
        <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.next_page_number }}" class="custom-page-link">
          Next ›
        </a>
      </li>
      <li>
        <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}page={{ page_obj.paginator.num_pages }}" class="custom-page-link">
          Last »
        </a>
      </li>
    {% endif %}
  </ul>
</nav>