{% extends "./layouts/base.html" %}
{% load static %}

{% block title %}Inicio{% endblock %}

{% block extra_css %}
    <link rel="stylesheet" href='{% static "css/home.css" %}'>
    <link rel="stylesheet" href='{% static "css/manga-slider.css" %}'>
{% endblock %}

{% block content %}
    <!-- Hero Section -->
    <div class="hero" style="height: 100vh; background-image: url('{% static "images/logo/REYYEYR.gif" %}')">
        <div class="container-home">
            <div class="hero-content">
                <h1>¡Bienvenido a Surchaing Manga!</h1>
                <p>Nuestra página está orientada a una mejora continua, tanto en flexibilidad de uso como en la visibilidad del usuario. Queremos que nuestra página se vea estéticamente agradable. Nuestra meta es que tú, como usuario, no solo quieras ver nuestros mangas, sino que también te animes a crear uno desde lo más profundo de tu imaginación y plasmarlo en una hoja. Que grandes artistas como tú crezcan sin encontrar límites. <br>¡Ayúdanos para ayudarte!</p>
                <div class="socials">
                    <a href="https://discord.gg/feMmaq4B"><i class="bi bi-discord"></i></a>
                    <a href="https://www.youtube.com/@ElmanfortLogic"><i class="bi bi-youtube"></i></a>
                    <a href="https://x.com/manfort157249"><i class="bi bi-twitter"></i></a>
                </div>
            </div>
            <div class="hero-banner-logo">
                <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Codeberg_logo.svg/800px-Codeberg_logo.svg.png" alt="LOGO DE NUESTRO PATROCINADOR MÁS DESTACADO">
            </div>
        </div>
    </div>    
 
    <!-- Spotify Player 
            <div class="spotify-container" style="margin-top: 20px; text-align: center;">
                <h1>Escucha en Spotify</h1>
                <iframe id="spotify-player" style="border-radius:12px" src="https://open.spotify.com/embed/track/3daf4CNGod9r7I0ING5fn9?utm_source=generator" width="100%" height="352" frameborder="0" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>
            </div>-->

    <!-- Main Container -->
    <div id="main-container" class="container" style="padding-bottom: 20px">
        <div class="main-content">
            

            <!-- Manga Sections -->
            <!-- High Rated Mangas -->
            <h1>Mangas mejor Valorados</h1>
            <div class="manga-container">
                <div class="slide">
                    {% for manga in high_rated_mangas %}
                    <div class="manga-item" style="background-image: url({{ manga.front_page.url }});">
                        <div class="manga-content">
                            <div class="manga-name">{{ manga.nombre_del_manga }}</div>
                            <button type="button" class="btn btn-primary">Ver más</button>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="buttons">
                    <button class="prev"></button>
                    <button class="next"></button>
                </div>
            </div>
            

            <!-- Recent Mangas -->
            <h1>Mangas Recientes</h1>
            <div class="manga-container">
                <div class="slide">
                    {% for manga in high_rated_mangas %}
                    <div class="manga-item" style="background-image: url({{ manga.front_page.url }});">
                        <div class="manga-content">
                            <div class="manga-name">{{ manga.nombre_del_manga }}</div>
                            <button type="button" class="btn btn-primary">Ver más</button>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="buttons">
                    <button class="prev"></button>
                    <button class="next"></button>
                </div>
            </div>
            
        </div>
    </div>
{% endblock %}

{% block extra_js %}
    <script src="{% static 'js/slider.js' %}"></script>
    <script>
        // Función para cambiar la canción de Spotify
        function cambiarMusica() {
            var player = document.getElementById('spotify-player');
            player.src = "https://open.spotify.com/embed/track/3Hvu1pq89d6yMFFLCbB9dX";
        }
    </script>
{% endblock %}