{% extends 'base_manga.html' %}
{% load static %}

{% block title %}Каталог манги{% endblock %}

{% block content %}
<div class="catalog-container">
    <h1>Каталог манги</h1>
    
    <div class="manga-list">
        {% for manga in manga_list %}
        <div class="manga-item">
            <!-- Изображение слева -->
            <div class="manga-cover">
                <img src="{{ manga.img }}" 
                     alt="{{ manga.original_title }}"
                     onerror="this.onerror=null; this.src='{% static 'images/default_cover.jpg' %}'">
            </div>
            
            <!-- Информация справа -->
            <div class="manga-info">
                <h2>{{ manga.original_title }}</h2>
                {% if manga.russian_title %}
                <p class="alt-title">{{ manga.russian_title }}</p>
                {% endif %}
                
                <div class="meta-data">
                    <span class="pages">{{ manga.len_manga }} страниц</span>
                    {% if manga.tags %}
                    <div class="tags">
                        {% for tag in manga.tags %}
                        <span class="tag">{{ tag }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>
                
                <a href="{% url 'show_manga' manga.id %}" class="read-button">Читать</a>
            </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>
{% endblock %}