{% 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>

<!-- Боковая панель фильтрации (добавлена в начало, но будет справа благодаря 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">
            <div class="manga-cover-container">
                <div class="manga-cover">
                    {% if manga.img %}
                        <a href={% url 'show_manga' manga.id %}>
                            <img src="{{ manga.img }}" alt="{{ manga.original_title }}" 
                                onerror="this.src='{% static 'images/default_cover.jpg' %}'">
                        </a>
                    {% else %}
                        <a href={% url 'show_manga' manga.id %}>
                            <img src="{% static 'images/default_cover.jpg' %}" alt="Обложка отсутствует">
                        </a>
                    {% endif %}
                </div>
                <a href="{% url 'show_manga' manga.id %}" class="read-button">Читать</a>
            </div>
            
            <div class="manga-details">
                <div class="manga-title">
                    <h3>{{ manga.original_title }}</h3>
                </div>
                
                {% if manga.tags %}
                <div class="tags">
                    {% for tag in manga.tags %}
                    <span class="tag">{{ tag }}</span>
                    {% endfor %}
                </div>
                {% 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-row">
                        <div class="date-post">
                            <span class="date-label">Дата:</span>
                            <span class="date-value">{{ manga.date }}</span>
                        </div>
                        
                        {% if manga.manga_link %}
                        <a href="{{ manga.manga_link }}" target="_blank" class="read-original-button">
                            Читать в источнике
                        </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    
    <div class="pagination">
        {% if page_obj.has_previous %}
            <a href="?page=1">&laquo; первая</a>
            <a href="?page={{ page_obj.previous_page_number }}">предыдущая</a>
        {% endif %}
        
        <span class="current">
            Страница {{ page_obj.number }} из {{ page_obj.paginator.num_pages }}
        </span>
        
        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">следующая</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">последняя &raquo;</a>
        {% endif %}
    </div>
</div>