Поиск по тегам

templates/manga_catalog.html

@@ -1,15 +1,32 @@
 {% load static %}
 
 <link rel="stylesheet" href="{% static 'css/manga_catalog.css' %}">    
-    <div class="catalog-header">
-        <h1 class="title-site">Дроч.кам</h1>
-        <h5 class="titles-cont">Манги на сайте: {{ total_manga_count }}</h5>
-        
-    </div>
+<div class="catalog-header">
+    <h1 class="title-site">Дроч.кам</h1>
+    <h5 class="titles-cont">Манги на сайте: {{ total_manga_count }}</h5>
+</div>
+
+<!-- Боковая панель фильтрации (добавлена в начало, но будет справа благодаря CSS) -->
+<div class="filter-sidebar">
+    <h3>Фильтр по тегам</h3>
+    <form method="get" action="{% url 'manga_catalog' %}">
+        <div class="tag-filters">
+            {% for tag in all_tags %}
+            <div class="tag-filter-item">
+                <input type="checkbox" id="tag-{{ forloop.counter }}" name="tags" value="{{ tag }}"
+                       {% if tag in selected_tags %}checked{% endif %}>
+                <label for="tag-{{ forloop.counter }}">{{ tag }}</label>
+            </div>
+            {% endfor %}
+        </div>
+        <button type="submit" class="filter-button">Применить фильтр</button>
+        {% if selected_tags %}
+        <a href="{% url 'manga_catalog' %}" class="clear-filter">Сбросить</a>
+        {% endif %}
+    </form>
+</div>
+
 <div class="catalog-container">
-
-
-    
     <div class="manga-list">
         {% for manga in manga_list %}
         <div class="manga-item">
@@ -34,7 +51,6 @@
                     <h3>{{ manga.original_title }}</h3>
                 </div>
                 
-                <!-- Теги -->
                 {% if manga.tags %}
                 <div class="tags">
                     {% for tag in manga.tags %}
@@ -44,11 +60,11 @@
                 {% endif %}
                 
                 <div class="manga-meta">
-                        <div class="meta-item">
-                            <span class="meta-label">Страниц:</span>
-                            <span class="meta-value">{{ manga.len_manga }}</span>
-                        </div>
-                
+                    <div class="meta-item">
+                        <span class="meta-label">Страниц:</span>
+                        <span class="meta-value">{{ manga.len_manga }}</span>
+                    </div>
+            
                     <div class="meta-row">
                         <div class="date-post">
                             <span class="date-label">Дата:</span>
@@ -60,21 +76,13 @@
                             Читать в источнике
                         </a>
                         {% endif %}
-
                     </div>
-                    
-
-                    
-
                 </div>
-          
-            
             </div>
         </div>
         {% endfor %}
     </div>
     
-    <!-- Пагинация снизу -->
     <div class="pagination">
         {% if page_obj.has_previous %}
             <a href="?page=1">&laquo; первая</a>
@@ -90,4 +98,4 @@
             <a href="?page={{ page_obj.paginator.num_pages }}">последняя &raquo;</a>
         {% endif %}
     </div>
-</div>
+</div>