{% extends "./layouts/base.html" %}
{% load static %}
{% block title %}Catálogo{% endblock %}
{% block extra_css %}
    <link rel="stylesheet" href="{% static 'css/home.css' %}">
    <link rel="stylesheet" href="{% static 'css/sliders.css' %}">
{% endblock %}

{% block content %}
<div class="hero-slider-container">
    <div class="hero-slider">
        {% for manga in high_rated_mangas %}
        <div class="hero slider-section" style="height: 80vh; background-image: url('{{ manga.front_page.url }}');">
            <div class="hero-content container">
                <h1>{{ manga.nombre_del_manga }}</h1>
            </div>
        </div>
        {% endfor %}
    </div>
    <button class="hero-slider-button left">⟵</button>
    <button class="hero-slider-button right">⟶</button>
</div>
<div id="main-container" class="container" style="padding-bottom: 8rem;">
    <div class="main-content">
        <!--{% include "./components/ad_banner.html" %}-->

        <!-- Sección de Géneros -->
        {% for genre, mangas in manga_by_genre.items %}
        <h1>{{ genre }}</h1>
        <div class="diagonal-slider">
            {% for manga in mangas %}
            <div class="diagonal-slider-card">
                <a href="#">
                <img src="{{ manga.front_page.url }}">
                <div class="diagonal-slider-head">{{ manga.nombre_del_manga }}</div>
                </a>
            </div>
            {% endfor %}
        </div>
        <button class="btnShowMore">VER MÁS</button>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block extra_js %}
    <script src="{% static 'js/slider.js' %}"></script>
{% endblock %}