{% extends "partials/base.html" %} 
{% load custom_filters %}
{% block css %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
{% endblock css %} 
{% block content %}
<!-- Swiper: Trending Anime -->
<section class="swiper bigSwiper rounded mt-2">
  <div class="swiper-wrapper">
    {% for anime in trending_anime %} 
    {% if anime.duration %}
    <div class="swiper-slide">
      <div style="background-image: url('{{ anime.cover }}')" class="bg-center bg-cover h-96 relative">
        <div class="absolute inset-0" style="background: linear-gradient(45deg, rgb(8, 8, 8) 15%, transparent 60%), linear-gradient(0deg, rgb(8, 8, 8) 0%, transparent 60%);"></div>
        <div class="flex flex-col lg:flex-row justify-end h-full p-4 relative z-10">
          <div class="flex flex-col w-full lg:w-1/2 justify-end">
            <div class="inline-flex gap-2 mb-4 bg-black lg:bg-white bg-opacity-20 lg:bg-opacity-10 p-2 rounded-full w-max">
              <span class="text-xs font-bold bg-black lg:bg-white bg-opacity-40 lg:bg-opacity-20 px-2 py-1 rounded-full flex items-center gap-1">
                <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" class="mr-1">
                  <path d="M3.604 7.197l7.138 -3.109a.96 .96 0 0 1 1.27 .527l4.924 11.902a1 1 0 0 1 -.514 1.304l-7.137 3.109a.96 .96 0 0 1 -1.271 -.527l-4.924 -11.903a1 1 0 0 1 .514 -1.304z"></path>
                  <path d="M15 4h1a1 1 0 0 1 1 1v3.5"></path>
                  <path d="M20 6c.264 .112 .52 .217 .768 .315a1 1 0 0 1 .53 1.311l-2.298 5.374"></path>
                </svg>
                {{ anime.type }}
              </span>
              <span class="text-xs font-bold bg-black lg:bg-white bg-opacity-40 lg:bg-opacity-20 px-2 py-1 rounded-full flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M5.25 8.25h15m-16.5 7.5h15m-1.8-13.5-3.9 19.5m-2.1-19.5-3.9 19.5"/>
                </svg>
                {{ anime.totalEpisodes }}
              </span>
              <span class="text-xs font-bold bg-black lg:bg-white bg-opacity-40 lg:bg-opacity-20 px-2 py-1 rounded-full flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z"/>
                </svg>
                {{ anime.rating }}
              </span>
              <span class="text-xs font-bold bg-black lg:bg-white bg-opacity-40 lg:bg-opacity-20 px-2 py-1 rounded-full flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
                </svg>
                {{ anime.duration }} mins
              </span>
            </div>
            <div>
              <h2 class="text-4xl font-bold text-transparent bg-clip-text mb-2" style="background: linear-gradient(-45deg, {% if anime.color %}{{ anime.color }}{% else %}white{% endif %}, white); -webkit-background-clip: text; background-clip: text;">
                {% if user.preferences.title_language == "english" and anime.title.english %}
                {{ anime.title.english }}
                {% elif user.preferences.title_language == "native" and anime.title.native %}
                {{ anime.title.native }}
                {% else %}
                {{ anime.title.romaji }}
                {% endif %}
              </h2>
              <p class="max-h-24 overflow-auto text-sm text-white mb-4 no-scrollbar">
                {{ anime.description|strip_html }}
              </p>
            </div>
          </div>
          <div class="flex flex-row w-full lg:w-1/2 gap-2 lg:justify-end items-end">
            <a href="{% url "detail:anime" anime.id %}" class="bg-white bg-opacity-10 text-white text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"/>
              </svg>
              Details
            </a>
            <a href="{% url "watch:watch" anime.id %}" class="bg-white bg-opacity-10 text-white text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z"/>
                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
              </svg>
              Watch
            </a>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    {% endfor %}
  </div>
  <div class="swiper-pagination"></div>
</section>

<!-- Genre Pills -->
<section class="flex flex-row gap-2 mt-4 justify-center flex-wrap">
  <a href="{% url "home:search" %}?genres=%5B%22Action%22%5D" class="bg-green-100 bg-opacity-10 text-green-300 text-sm font-bold py-2 px-4 rounded-full">Action</a>
  <a href="{% url "home:search" %}?genres=%5B%22Adventure%22%5D" class="bg-pink-100 bg-opacity-10 text-pink-300 text-sm font-bold py-2 px-4 rounded-full">Adventure</a>
  <a href="{% url "home:search" %}?genres=%5B%22Cars%22%5D" class="bg-orange-100 bg-opacity-10 text-orange-300 text-sm font-bold py-2 px-4 rounded-full">Cars</a>
  <a href="{% url "home:search" %}?genres=%5B%22Comedy%22%5D" class="bg-purple-100 bg-opacity-10 text-purple-300 text-sm font-bold py-2 px-4 rounded-full">Comedy</a>
  <a href="{% url "home:search" %}?genres=%5B%22Drama%22%5D" class="bg-blue-100 bg-opacity-10 text-blue-300 text-sm font-bold py-2 px-4 rounded-full">Drama</a>
  <a href="{% url "home:search" %}?genres=%5B%22Fantasy%22%5D" class="bg-yellow-100 bg-opacity-10 text-yellow-300 text-sm font-bold py-2 px-4 rounded-full">Fantasy</a>
  <a href="{% url "home:search" %}?genres=%5B%22Horror%22%5D" class="bg-red-100 bg-opacity-10 text-red-300 text-sm font-bold py-2 px-4 rounded-full">Horror</a>
  <a href="{% url "home:search" %}?genres=%5B%22Mahou%20Shoujo%22%5D" class="bg-teal-100 bg-opacity-10 text-teal-300 text-sm font-bold py-2 px-4 rounded-full">Mahou Shoujo</a>
  <a href="{% url "home:search" %}?genres=%5B%22Mecha%22%5D" class="bg-indigo-100 bg-opacity-10 text-indigo-300 text-sm font-bold py-2 px-4 rounded-full">Mecha</a>
  <a href="{% url "home:search" %}?genres=%5B%22Music%22%5D" class="bg-pink-100 bg-opacity-10 text-pink-300 text-sm font-bold py-2 px-4 rounded-full">Music</a>
  <a href="{% url "home:search" %}?genres=%5B%22Mystery%22%5D" class="bg-purple-100 bg-opacity-10 text-purple-300 text-sm font-bold py-2 px-4 rounded-full">Mystery</a>
  <a href="{% url "home:search" %}?genres=%5B%22Psychological%22%5D" class="bg-blue-100 bg-opacity-10 text-blue-300 text-sm font-bold py-2 px-4 rounded-full">Psychological</a>
  <a href="{% url "home:search" %}?genres=%5B%22Romance%22%5D" class="bg-yellow-100 bg-opacity-10 text-yellow-300 text-sm font-bold py-2 px-4 rounded-full">Romance</a>
  <a href="{% url "home:search" %}?genres=%5B%22Sci-Fi%22%5D" class="bg-red-100 bg-opacity-10 text-red-300 text-sm font-bold py-2 px-4 rounded-full">Sci-Fi</a>
  <a href="{% url "home:search" %}?genres=%5B%22Slice%20of%20Life%22%5D" class="bg-teal-100 bg-opacity-10 text-teal-300 text-sm font-bold py-2 px-4 rounded-full">Slice of Life</a>
  <a href="{% url "home:search" %}?genres=%5B%22Sports%22%5D" class="bg-indigo-100 bg-opacity-10 text-indigo-300 text-sm font-bold py-2 px-4 rounded-full">Sports</a>
  <a href="{% url "home:search" %}?genres=%5B%22Supernatural%22%5D" class="bg-green-100 bg-opacity-10 text-green-300 text-sm font-bold py-2 px-4 rounded-full">Supernatural</a>
  <a href="{% url "home:search" %}?genres=%5B%22Thriller%22%5D" class="bg-orange-100 bg-opacity-10 text-orange-300 text-sm font-bold py-2 px-4 rounded-full">Thriller</a>
</section>

{% if request.user.preferences.show_history_on_home and user_history_data %}
<div class="flex flex-row justify-between items-center mt-4">
  <h1 class="text-2xl font-bold text-white">Continue Watching</h1>
  <a href="{% url "home:watchlist" %}" class="text-sm font-bold text-{{ user.preferences.accent_colour }}-600">View All &rarr;</a>
</div>
<div class="flex flex-row gap-2 mt-4 overflow-x-auto no-scrollbar swiper historySwiper">
  <div class="swiper-wrapper">
    {% for history in user_history_data %}
    <a href="{% url "watch:watch_episode" history.anime history.episode %}" class="group rounded-lg aspect-video h-48 relative flex-shrink-0 overflow-hidden swiper-slide">
      <div class="absolute inset-0 bg-center bg-cover transition-transform group-hover:scale-110" style="background-image: url('{{ history.anime_cover_image }}')"></div>
      <div class="absolute inset-0 bg-{{ user.preferences.accent_colour }}-600 opacity-0 group-hover:opacity-30 transition-opacity"></div>
      <div class="absolute inset-0" style="background: linear-gradient(45deg, rgb(8, 8, 8) 15%, transparent 60%), linear-gradient(0deg, rgb(8, 8, 8) 0%, transparent 60%);"></div>
      <div class="flex flex-col justify-end h-full p-2 relative z-10">
        <h1 class="text-xl font-bold truncate max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
          {% if user.preferences.title_language == "english" and history.anime_title_english %}
          {{ history.anime_title_english }}
          {% elif user.preferences.title_language == "native" and history.anime_title_native %}
          {{ history.anime_title_native }}
          {% else %}
          {{ history.anime_title_romaji }}
          {% endif %}
        </h1>
        <h2 class="font-bold truncate max-w-full overflow-hidden text-ellipsis whitespace-nowrap">{{ history.episode_title }}</h2>
        <p>Episode {{ history.episode }}</p>
      </div>
    </a>
    {% endfor %}
  </div>
</div>
{% endif %}

<section class="flex flex-col xl:flex-row mt-4 gap-4">
  <section class="w-full xl:w-3/4">
    <div class="flex flex-row justify-between items-center mt-4">
      <h1 class="text-2xl font-bold text-white">Trending Anime</h1>
      <a href="{% url "home:search" %}?sort=%5B%22TRENDING_DESC%22%5D" class="text-sm font-bold text-{{ user.preferences.accent_colour }}-600">View All &rarr;</a>
    </div>
    <section id="trending" class="flex flex-wrap justify-center mt-4 max-w-full">
      {% if user.preferences.card_layout == 'classic' %}
      {% include "partials/datacard_render.html" with data=trending_anime %}
      {% elif user.preferences.card_layout == 'wide' %}
      {% include "partials/datacardwide_render.html" with data=trending_anime %}
      {% elif user.preferences.card_layout == 'compact' %}
      {% include "partials/datacardcompact_render.html" with data=trending_anime %}
      {% endif %}
    </section>
    <div class="flex flex-row justify-between items-center mt-4">
      <h1 class="text-2xl font-bold text-white">Trending Manga</h1>
      <a href="#" class="text-sm font-bold text-{{ user.preferences.accent_colour }}-600">View All &rarr;</a>
    </div>
    <section id="trending_manga" class="flex flex-wrap justify-center mt-4 max-w-full">
      {% if user.preferences.card_layout == 'classic' %}
      {% include "partials/mangacard_render.html" with data=trending_manga %}
      {% elif user.preferences.card_layout == 'wide' %}
      {% include "partials/mangacardwide_render.html" with data=trending_manga %}
      {% elif user.preferences.card_layout == 'compact' %}
      {% include "partials/mangacardcompact_render.html" with data=trending_manga %}
      {% endif %}
    </section>
    <div class="flex flex-row justify-between items-center mt-4">
      <h1 class="text-2xl font-bold text-white">Popular Anime</h1>
      <a href="{% url "home:search" %}?sort=%5B%22POPULARITY_DESC%22%5D" class="text-sm font-bold text-{{ user.preferences.accent_colour }}-600">View All &rarr;</a>
    </div>
    <section id="popular" class="flex flex-wrap justify-center mt-4 max-w-full">
      {% if user.preferences.card_layout == 'classic' %}
      {% include "partials/datacard_render.html" with data=popular_anime %}
      {% elif user.preferences.card_layout == 'wide' %}
      {% include "partials/datacardwide_render.html" with data=popular_anime %}
      {% elif user.preferences.card_layout == 'compact' %}
      {% include "partials/datacardcompact_render.html" with data=popular_anime %}
      {% endif %}
    </section>
    <div class="flex flex-row justify-between items-center mt-4">
      <h1 class="text-2xl font-bold text-white">Popular Manga</h1>
      <a href="#" class="text-sm font-bold text-{{ user.preferences.accent_colour }}-600">View All &rarr;</a>
    </div>
    <section id="popular_manga" class="flex flex-wrap justify-center mt-4 max-w-full">
      {% if user.preferences.card_layout == 'classic' %}
      {% include "partials/mangacard_render.html" with data=popular_manga %}
      {% elif user.preferences.card_layout == 'wide' %}
      {% include "partials/mangacardwide_render.html" with data=popular_manga %}
      {% elif user.preferences.card_layout == 'compact' %}
      {% include "partials/mangacardcompact_render.html" with data=popular_manga %}
      {% endif %}
    </section>
    <div class="flex flex-row justify-between items-center mt-4">
      <h1 class="text-2xl font-bold text-white">Top Rated Anime</h1>
      <a href="{% url "home:search" %}?sort=%5B%22SCORE_DESC%22%5D" class="text-sm font-bold text-{{ user.preferences.accent_colour }}-600">View All &rarr;</a>
    </div>
    <section id="top_rated" class="flex flex-wrap justify-center mt-4 max-w-full">
      {% if user.preferences.card_layout == 'classic' %}
      {% include "partials/datacard_render.html" with data=top_anime %}
      {% elif user.preferences.card_layout == 'wide' %}
      {% include "partials/datacardwide_render.html" with data=top_anime %}
      {% elif user.preferences.card_layout == 'compact' %}
      {% include "partials/datacardcompact_render.html" with data=top_anime %}
      {% endif %}
    </section>
    <div class="flex flex-row justify-between items-center mt-4">
      <h1 class="text-2xl font-bold text-white">Top Rated Manga</h1>
      <a href="#" class="text-sm font-bold text-{{ user.preferences.accent_colour }}-600">View All &rarr;</a>
    </div>
    <section id="top_rated_manga" class="flex flex-wrap justify-center mt-4 max-w-full">
      {% if user.preferences.card_layout == 'classic' %}
      {% include "partials/mangacard_render.html" with data=top_manga %}
      {% elif user.preferences.card_layout == 'wide' %}
      {% include "partials/mangacardwide_render.html" with data=top_manga %}
      {% elif user.preferences.card_layout == 'compact' %}
      {% include "partials/mangacardcompact_render.html" with data=top_manga %}
      {% endif %}
    </section>
  </section>
  <section class="w-full xl:w-1/4">
    <h2 class="text-2xl font-bold text-white uppercase mt-4">Top Airing</h2>
    <!-- Wide Cards: Upcoming -->
    <section class="flex flex-col gap-4 mt-4">
      {% include "partials/sidebarwidecard_render.html" with data=top_airing_anime %}
    </section>
    <h2 class="text-2xl font-bold text-white uppercase mt-4">Upcoming {{ next_season }}</h2>
    <!-- Wide Cards: Upcoming -->
    <section class="flex flex-col gap-4 mt-4">
      {% include "partials/sidebarwidecard_render.html" with data=upcoming_anime %}
    </section>
  </section>
</section>

{% endblock content %} {% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
  const swiper = new Swiper(".bigSwiper", {
    // Optional parameters
    direction: "horizontal",
    loop: true,
    effect: "coverflow",
    coverflowEffect: {
      rotate: 30,
      slideShadows: false,
    },
    autoplay: {
      delay: 5000,
    },

    // If we need pagination
    pagination: {
      el: ".swiper-pagination",
      dynamicBullets: true,
    },
  });

  const historySwiper = new Swiper(".historySwiper", {
    slidesPerView: 'auto',
    spaceBetween: 8,
    freeMode: true,
  });
</script>
<script>
  /*document.addEventListener('DOMContentLoaded', function() {
    const categorySwitch = document.querySelectorAll(".category-switch");
    const sections = ["trending", "popular", "top_rated"];
    
    function applyFadeInEffect(sectionId) {
        const animeItems = document.querySelectorAll(`#${sectionId} .anime-item`);
        animeItems.forEach((item, index) => {
            item.classList.remove('fade-in');
            item.style.animationDelay = `${index * 0.1}s`;
            // Use setTimeout to trigger a reflow and apply the animation
            setTimeout(() => {
                item.classList.add('fade-in');
            }, 10);
        });
    }

    function switchCategory(category) {
        sections.forEach((sectionId) => {
            const section = document.getElementById(sectionId);
            if (sectionId === category) {
                section.classList.remove("hidden");
                section.classList.add("flex");
                applyFadeInEffect(sectionId);
            } else {
                section.classList.add("hidden");
                section.classList.remove("flex");
            }
        });

        categorySwitch.forEach((button) => {
            button.classList.remove("active-category", "bg-{{ user.preferences.accent_colour }}-600");
            if (button.getAttribute("data-target") === category) {
                button.classList.add("active-category", "bg-{{ user.preferences.accent_colour }}-600");
            }
        });

        localStorage.setItem("activeCategory", category);
    }

    // Initial setup
    const activeCategory = localStorage.getItem("activeCategory") || "trending";
    switchCategory(activeCategory);

    categorySwitch.forEach((button) => {
        button.addEventListener("click", () => {
            const target = button.getAttribute("data-target");
            switchCategory(target);
        });
    });
  }); */
</script>
{% endblock scripts %}