{% load static %}

<link rel="stylesheet" href="{% static 'css/manga_catalog.css' %}">    
    
<div class="catalog-container">
    <div >
        <h1>Каталог манги</h1>
        
    </div>

    
    <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>
            </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>