Обновил пагинацию

music_storage/templates/components/pagination.html

@@ -1,11 +1,38 @@
-{% if page_obj.has_previous %}
-    <a href="?page={{ page_obj.previous_page_number }}">← Назад</a>
-{% endif %}
+{% load static %}
 
-<span>
-    Страница {{ page_obj.number }} из {{ page_obj.paginator.num_pages }}
-</span>
+<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>
 
-{% if page_obj.has_next %}
-    <a href="?page={{ page_obj.next_page_number }}">Вперёд →</a>
-{% endif %}