{% extends "partials/base.html" %}
{% load custom_filters %}
{% block css %}
<style>
    @media (max-width: 640px) {
        .detail-section {
          top: 0rem;
          left: -8.5rem;
          width: 100vw;
        }

        .w-fix {
            position: relative;
            left: -8rem;
            width: calc(100vw - 1rem);
        }
    }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
{% endblock css %}
{% block content %}
<div style="background-image: url('{{ anime.cover }}')" class="relative bg-center bg-cover h-32 lg:h-96 my-4 rounded-lg" >
    <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="w-4/12 lg:w-2/12 absolute px-2 lg:px-8 top-16 lg:top-48">
        <img loading="lazy" src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg" class="w-full h-full rounded-lg object-cover"/>
        <a href="{% if anime.id %}{% url "watch:watch" anime.id %}?forward=detail{% endif %}" class="bg-{{ user.preferences.accent_colour }}-600 hover:bg-{{ user.preferences.accent_colour }}-700 text-white text-xs sm:text-sm font-bold py-1 px-2 sm:py-2 sm:px-4 rounded-lg my-2 flex flex-row items-center justify-center gap-1">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
                <path fill-rule="evenodd" d="M4.5 5.653c0-1.427 1.529-2.33 2.779-1.643l11.54 6.347c1.295.712 1.295 2.573 0 3.286L7.28 19.99c-1.25.687-2.779-.217-2.779-1.643V5.653Z" clip-rule="evenodd" />
            </svg>
            <span>Watch Now</span>
        </a>
        <div class="flex flex-row gap-2 my-2">
            <a href="https://anilist.co/anime/{{ anime.id }}" target="_blank" class="text-xs font-bold bg-{{ user.preferences.accent_colour }}-400 bg-opacity-30 flex-1 justify-center flex hover:bg-opacity-50 rounded px-2 py-1">
                <svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg"><path d="M24 17.53v2.421c0 .71-.391 1.101-1.1 1.101h-5l-.057-.165L11.84 3.736c.106-.502.46-.788 1.053-.788h2.422c.71 0 1.1.391 1.1 1.1v12.38H22.9c.71 0 1.1.392 1.1 1.101zM11.034 2.947l6.337 18.104h-4.918l-1.052-3.131H6.019l-1.077 3.131H0L6.361 2.948h4.673zm-.66 10.96-1.69-5.014-1.541 5.015h3.23z"></path></svg>
            </a>
            <a href="https://myanimelist.net/anime/{{ anime.malId }}" target="_blank" class="ext-xs font-bold bg-{{ user.preferences.accent_colour }}-400 bg-opacity-30 flex-1 justify-center flex hover:bg-opacity-50 rounded px-2 py-1">
                <svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg"><path d="M8.273 7.247v8.423l-2.103-.003v-5.216l-2.03 2.404-1.989-2.458-.02 5.285H.001L0 7.247h2.203l1.865 2.545 2.015-2.546 2.19.001zm8.628 2.069l.025 6.335h-2.365l-.008-2.871h-2.8c.07.499.21 1.266.417 1.779.155.381.298.751.583 1.128l-1.705 1.125c-.349-.636-.622-1.337-.878-2.082a9.296 9.296 0 0 1-.507-2.179c-.085-.75-.097-1.471.107-2.212a3.908 3.908 0 0 1 1.161-1.866c.313-.293.749-.5 1.1-.687.351-.187.743-.264 1.107-.359a7.405 7.405 0 0 1 1.191-.183c.398-.034 1.107-.066 2.39-.028l.545 1.749H14.51c-.593.008-.878.001-1.341.209a2.236 2.236 0 0 0-1.278 1.92l2.663.033.038-1.81h2.309zm3.992-2.099v6.627l3.107.032-.43 1.775h-4.807V7.187l2.13.03z"></path></svg>
            </a>
        </div>
        <div class="flex flex-col">
            <div>
                <span class="font-bold">Format: </span>{{ anime.type }}
            </div>
            <div>
                <span class="font-bold">Episodes: </span>{{ anime.totalEpisodes }}
            </div>
            <div>
                <span class="font-bold">Year: </span>{{ anime.releaseDate }}
            </div>
            <div>
                <span class="font-bold">Duration: </span>{{ anime.duration }} mins
            </div>
            <div>
                <span class="font-bold">Status: </span>{{ anime.status }}
            </div>
            <div class="capitalize">
                <span class="font-bold">Season: </span>{{ anime.season }}
            </div>
            <div>
                <span class="font-bold">Rating: </span>{{ anime.rating }} / 100
            </div>
            <div>
                <span class="font-bold">Popularity: </span>{{ anime.popularity }}
            </div>
            <div>
                <span class="font-bold">Country: </span>{{ anime.countryOfOrigin }}
            </div>
            <div class="sm:col-span-2 lg:col-span-3">
                <span class="font-bold">Studios: </span>
                {% for studio in anime.studios %}
                    <span>{{ studio }}</span>{% if not forloop.last %}, {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
    <div class="w-8/12 lg:w-10/12 absolute top-36 lg:top-48 right-0">
        <div class="inline-flex gap-1 sm:gap-2 flex-wrap">
            <span {% if anime.color %}style="background-color: {{ anime.color }}3a;"{% endif %} class="text-[10px] sm:text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
                <svg stroke="currentColor" fill="none" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="size-3 sm:size-4">
                <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 {% if anime.color %}style="background-color: {{ anime.color }}3a;"{% endif %} class="text-[10px] sm:text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3 sm:size-4">
                <path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 0 1 7.5 3v1.5h9V3A.75.75 0 0 1 18 3v1.5h.75a3 3 0 0 1 3 3v11.25a3 3 0 0 1-3 3H5.25a3 3 0 0 1-3-3V7.5a3 3 0 0 1 3-3H6V3a.75.75 0 0 1 .75-.75Zm13.5 9a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5Z" clip-rule="evenodd" />
                </svg>              
                {{ anime.releaseDate }}
            </span>
            <span {% if anime.color %}style="background-color: {{ anime.color }}3a;"{% endif %} class="text-[10px] sm:text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
                {% if anime.status == "Ongoing" %}
                <span class="text-green-500">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
                        <circle cx="12" cy="12" r="12" />
                    </svg>                
                </span>
                {% elif anime.status == "Not yet aired" %}
                <span class="text-yellow-500">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
                        <circle cx="12" cy="12" r="12" />
                    </svg>
                </span>
                {% else %}
                <span class="text-blue-500">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
                        <circle cx="12" cy="12" r="12" />
                    </svg>
                </span>
                {% endif %}          
                {{ anime.status }}
            </span>
            <span {% if anime.color %}style="background-color: {{ anime.color }}3a;"{% endif %} class="text-[10px] sm:text-xs font-bold bg-white bg-opacity-10 p-1 rounded 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-3 sm: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 sm:text-sm font-bold flex gap-2 flex-row flex-wrap items-center">
                {% for genre in anime.genres %}
                {% if genre == "Action" %}
                <span class="text-xs font-bold bg-green-100 bg-opacity-20 text-green-300 py-1 px-2 rounded-full">
                {% elif genre == "Adventure" %}
                <span class="text-xs font-bold bg-pink-100 bg-opacity-20 text-pink-300 py-1 px-2 rounded-full">
                {% elif genre == "Cars" %}
                <span class="text-xs font-bold bg-orange-100 bg-opacity-20 text-orange-300 py-1 px-2 rounded-full">
                {% elif genre == "Comedy" %}
                <span class="text-xs font-bold bg-purple-100 bg-opacity-20 text-purple-300 py-1 px-2 rounded-full">
                {% elif genre == "Drama" %}
                <span class="text-xs font-bold bg-blue-100 bg-opacity-20 text-blue-300 py-1 px-2 rounded-full">
                {% elif genre == "Fantasy" %}
                <span class="text-xs font-bold bg-yellow-100 bg-opacity-20 text-yellow-300 py-1 px-2 rounded-full">
                {% elif genre == "Horror" %}
                <span class="text-xs font-bold bg-red-100 bg-opacity-20 text-red-300 py-1 px-2 rounded-full">
                {% elif genre == "Mahou Shoujo" %}
                <span class="text-xs font-bold bg-teal-100 bg-opacity-20 text-teal-300 py-1 px-2 rounded-full">
                {% elif genre == "Mecha" %}
                <span class="text-xs font-bold bg-indigo-100 bg-opacity-20 text-indigo-300 py-1 px-2 rounded-full">
                {% elif genre == "Music" %}
                <span class="text-xs font-bold bg-pink-100 bg-opacity-20 text-pink-300 py-1 px-2 rounded-full">
                {% elif genre == "Mystery" %}
                <span class="text-xs font-bold bg-purple-100 bg-opacity-20 text-purple-300 py-1 px-2 rounded-full">
                {% elif genre == "Psychological" %}
                <span class="text-xs font-bold bg-blue-100 bg-opacity-20 text-blue-300 py-1 px-2 rounded-full">
                {% elif genre == "Romance" %}
                <span class="text-xs font-bold bg-yellow-100 bg-opacity-20 text-yellow-300 py-1 px-2 rounded-full">
                {% elif genre == "Sci-Fi" %}
                <span class="text-xs font-bold bg-red-100 bg-opacity-20 text-red-300 py-1 px-2 rounded-full">
                {% elif genre == "Slice of Life" %}
                <span class="text-xs font-bold bg-teal-100 bg-opacity-20 text-teal-300 py-1 px-2 rounded-full">
                {% elif genre == "Sports" %}
                <span class="text-xs font-bold bg-indigo-100 bg-opacity-20 text-indigo-300 py-1 px-2 rounded-full">
                {% elif genre == "Supernatural" %}
                <span class="text-xs font-bold bg-green-100 bg-opacity-20 text-green-300 py-1 px-2 rounded-full">
                {% elif genre == "Thriller" %}
                <span class="text-xs font-bold bg-orange-100 bg-opacity-20 text-orange-300 py-1 px-2 rounded-full">
                {% else %}
                <span class="text-xs font-bold bg-white bg-opacity-20 text-white py-1 px-2 rounded-full">
                {% endif %}
                    {{ genre }}
                </span>
                {% endfor %}
            </span>
        </div>
        <h2 class="text-2xl lg:text-4xl font-bold text-transparent bg-clip-text my-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="h-96 lg:max-h-24 overflow-auto my-2 text-sm text-white no-scrollbar">
            {{ anime.description|strip_html }}
        </p>     
        {% if mal_data %}
        <section class="flex flex-col lg:flex-row gap-4 my-2 w-fix">
            <div class="flex-1 flex flex-col gap-2">
                <span>Update MAL Status</span>
                <div class="relative w-full custom-select text-sm" data-select="status">
                    <div class="select-none cursor-pointer bg-neutral-900 py-2 px-4 pr-8 rounded leading-tight focus:outline-none capitalize" id="status">
                        {% if mal_data.my_list_status.status == "completed" %}
                            completed
                        {% elif mal_data.my_list_status.status == "watching" %}
                            watching
                        {% elif mal_data.my_list_status.status == "on_hold" %}
                            on hold
                        {% elif mal_data.my_list_status.status == "dropped" %}
                            dropped
                        {% elif mal_data.my_list_status.status == "plan_to_watch" %}
                            plan to watch
                        {% else %}
                            Add to List
                        {% endif %}
                    </div>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-white">
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                        </svg>
                    </div>
                    <div class="absolute z-10 w-full mt-1 bg-neutral-900 rounded shadow-lg hidden max-h-96 overflow-y-scroll no-scrollbar" id="status_options">
                        <div class="py-1">
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="watching">watching</div>
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="completed">completed</div>
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="on hold">on hold</div>
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="dropped">dropped</div>
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600 capitalize" data-value="plan to watch">plan to watch</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-1 flex flex-col gap-2">
                <span>Update MAL Score</span>
                <div class="relative w-full custom-select text-sm" data-select="score">
                    <div class="select-none cursor-pointer bg-neutral-900 py-2 px-4 pr-8 rounded leading-tight focus:outline-none" id="score">
                        {% if mal_data.my_list_status.score %}
                            {{ mal_data.my_list_status.score }}
                        {% else %}
                            Score
                        {% endif %}
                    </div>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-white">
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                        </svg>
                    </div>
                    <div class="absolute z-10 w-full mt-1 bg-neutral-900 rounded shadow-lg hidden max-h-96 overflow-y-scroll no-scrollbar" id="score_options">
                        <div class="py-1">
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600" data-value="10">10</div>
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600" data-value="9">9</div>
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600" data-value="8">8</div>
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600" data-value="7">7</div>
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600" data-value="6">6</div>
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600" data-value="5">5</div>
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600" data-value="4">4</div>
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600" data-value="3">3</div>
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600" data-value="2">2</div>
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600" data-value="1">1</div>
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600" data-value="Score">0</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-1 flex flex-col gap-2">
                <span>Update MAL Episodes</span>
                <div class="relative w-full custom-select text-sm" data-select="episodes_m">
                    <div class="select-none cursor-pointer bg-neutral-900 py-2 px-4 pr-8 rounded leading-tight focus:outline-none" id="episodes_m">
                        {% if mal_data.my_list_status.num_episodes_watched %}
                            {{ mal_data.my_list_status.num_episodes_watched }}
                        {% else %}
                            Episodes
                        {% endif %}
                    </div>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-white">
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/>
                        </svg>
                    </div>
                    <div class="absolute z-10 w-full mt-1 bg-neutral-900 rounded shadow-lg hidden max-h-96 overflow-y-scroll no-scrollbar" id="episodes_m_options">
                        <div class="py-1">
                            <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600" data-value="Episodes">0</div>
                            {% for i in mal_episode_range %}
                                <div class="cursor-pointer px-4 py-2 text-white hover:bg-{{ user.preferences.accent_colour }}-600" data-value="{{ i }}">{{ i }}</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {% endif %}
        {% if seasons %}
        <div class="my-8 w-fix">
            <h2 class="text-xl font-bold text-white uppercase flex flex-row items-center gap-1 mb-4 ">
                Seasons
            </h2>
            <div class="flex flex-row gap-2 mt-4 overflow-x-auto no-scrollbar  swiper seasonSwiper">
                <div class="swiper-wrapper">
                    {% for season in seasons %}
                    <a href="{% url "detail:anime" season.id %}" class="group rounded-lg aspect-video h-48 relative flex-shrink-0 overflow-hidden swiper-slide
                                    {% if season.title.romaji == anime.title.romaji %}border-4 border-{{ user.preferences.accent_colour }}-600{% endif %}">
                        <div class="absolute inset-0 bg-center bg-cover transition-transform group-hover:scale-110" style="background-image: url('{% if season.bannerImage %}{{ season.bannerImage }}{% else %}{{ season.coverImage }}{% endif %}')"></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">
                                {{ season.format }} {% if season.startYear != 9999 %}({{ season.startYear }}){% endif %}
                            </h1>
                            <h2 class="font-bold truncate max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
                                {% if user.preferences.title_language == "english" and season.title.english %}
                                {{ season.title.english }}
                                {% elif user.preferences.title_language == "native" and season.title.native %}
                                {{ season.title.native }}
                                {% else %}
                                {{ season.title.romaji }}
                                {% endif %}
                            </h2>
                        </div>
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
        <section class="w-full flex flex-col items-center justify-center p-2 relative detail-section" id="dss">
            <section class="inline-flex w-max flex-row gap-4 rounded-full mb-8 bg-white bg-opacity-10 mx-auto">
              <button class="flex flex-row items-center focus:outline-none gap-2 text-sm font-bold py-2 px-4 rounded-full category-switch" data-target="characters">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
                    <path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0 0 21.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 0 0 3.065 7.097A9.716 9.716 0 0 0 12 21.75a9.716 9.716 0 0 0 6.685-2.653Zm-12.54-1.285A7.486 7.486 0 0 1 12 15a7.486 7.486 0 0 1 5.855 2.812A8.224 8.224 0 0 1 12 20.25a8.224 8.224 0 0 1-5.855-2.438ZM15.75 9a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" clip-rule="evenodd" />
                </svg>          
                <span>Characters</span>
              </button>
              <button class="flex flex-row items-center focus:outline-none gap-2 text-sm font-bold py-2 px-4 rounded-full category-switch bg-{{ user.preferences.accent_colour }}-600" data-target="episodes">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
                    <path fill-rule="evenodd" d="M1.5 5.625c0-1.036.84-1.875 1.875-1.875h17.25c1.035 0 1.875.84 1.875 1.875v12.75c0 1.035-.84 1.875-1.875 1.875H3.375A1.875 1.875 0 0 1 1.5 18.375V5.625Zm1.5 0v1.5c0 .207.168.375.375.375h1.5a.375.375 0 0 0 .375-.375v-1.5a.375.375 0 0 0-.375-.375h-1.5A.375.375 0 0 0 3 5.625Zm16.125-.375a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375h1.5A.375.375 0 0 0 21 7.125v-1.5a.375.375 0 0 0-.375-.375h-1.5ZM21 9.375A.375.375 0 0 0 20.625 9h-1.5a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375h1.5a.375.375 0 0 0 .375-.375v-1.5Zm0 3.75a.375.375 0 0 0-.375-.375h-1.5a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375h1.5a.375.375 0 0 0 .375-.375v-1.5Zm0 3.75a.375.375 0 0 0-.375-.375h-1.5a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375h1.5a.375.375 0 0 0 .375-.375v-1.5ZM4.875 18.75a.375.375 0 0 0 .375-.375v-1.5a.375.375 0 0 0-.375-.375h-1.5a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375h1.5ZM3.375 15h1.5a.375.375 0 0 0 .375-.375v-1.5a.375.375 0 0 0-.375-.375h-1.5a.375.375 0 0 0-.375.375v1.5c0 .207.168.375.375.375Zm0-3.75h1.5a.375.375 0 0 0 .375-.375v-1.5A.375.375 0 0 0 4.875 9h-1.5A.375.375 0 0 0 3 9.375v1.5c0 .207.168.375.375.375Zm4.125 0a.75.75 0 0 0 0 1.5h9a.75.75 0 0 0 0-1.5h-9Z" clip-rule="evenodd" />
                </svg>
                <span>Episodes</span>
              </button>      
              <button class="flex flex-row items-center focus:outline-none gap-2 text-sm font-bold py-2 px-4 rounded-full category-switch" data-target="trailer">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
                    <path d="M4.5 4.5a3 3 0 0 0-3 3v9a3 3 0 0 0 3 3h8.25a3 3 0 0 0 3-3v-9a3 3 0 0 0-3-3H4.5ZM19.94 18.75l-2.69-2.69V7.94l2.69-2.69c.944-.945 2.56-.276 2.56 1.06v11.38c0 1.336-1.616 2.005-2.56 1.06Z" />
                </svg>
                <span>Trailer</span>
              </button>      
            </section>
            <section id="characters" class="w-full hidden">
                <div class="flex flex-wrap">
                    {% for character in anime.characters %}
                    <div class="w-full lg:w-1/2 px-4 py-2 flex justify-between">
                        <div class="flex flex-row gap-2 items-center">
                            <img loading="lazy"loading="lazy"src="{{ character.image }}" alt="{{ character.name }}" class="rounded-full w-16 h-16 object-cover"/>
                            <div class="flex flex-col gap-2">
                                <span class="font-bold">
                                    {% if user.preferences.character_name_language == "romaji" %}
                                    {{ character.name.full }}
                                    {% else %}
                                    {{ character.name.native }}
                                    {% endif %}
                                </span>
                                <span class="capitalize">{{ character.role }}</span>
                            </div>
                        </div>
                        <div class="flex flex-col items-end">
                            {% for voice_actor in character.voiceActors|slice:":1" %}
                            <div class="flex flex-row gap-2 items-center mb-2">
                                <div class="flex flex-col gap-2 text-right">
                                    <span class="font-bold">
                                        {% if user.preferences.character_name_language == "romaji" %}
                                        {{ voice_actor.name.full }}
                                        {% else %}
                                        {{ voice_actor.name.native }}
                                        {% endif %}
                                    </span>
                                    <span class="capitalize">{{ voice_actor.language }}</span>
                                </div>
                                <img loading="lazy" src="{{ voice_actor.image }}" alt="{{ voice_actor.name }}" class="rounded-full w-16 h-16 object-cover"/>
                            </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </section>
            <section id="episodes" class="w-full flex-wrap flex justify-start">
                {% for episode in episodes %}
                <a href="{% url "watch:watch_episode" anime.id episode.number %}" class="w-full lg:w-1/2 px-2 mb-2 episode-item">
                    <div class="flex flex-col lg:flex-row w-full bg-neutral-950 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 p-2 gap-4">
                        <div class="w-full lg:w-auto lg:flex-shrink-0">
                            <img loading="lazy" src="{% if episode.metadata.image %}{{ episode.metadata.image }}{% else %}{{ anime.cover}}{% endif %}" alt="{{ episode.title }}" class="w-full lg:w-48 lg:h-28 object-cover rounded-lg"/>
                        </div>
                        <div class="flex flex-col gap-2">
                            <h2 class="font-bold">{{episode.number}}. {% if episode.metadata.title %}{{ episode.metadata.title }}{% else %}{{ episode.title }}{% endif %}</h2>
                            <p class="text-sm">{{ episode.metadata.description|truncatewords:50 }}</p>
                        </div>
                    </div>
                </a>
                {% endfor %}
                {% if not episodes %}
                <div class="w-full h-96 flex flex-col gap-2 items-center justify-center">
                    <p>No Episodes Available</p>
                </div>
                {% endif %}
                {% if nextAiringEpisode %}
                <p class="w-full text-center my-2" id="nextAiringEpisodeMessage"></p>
                <script>
                    const nextAiringEpisode = {
                        airingTime: {{ nextAiringEpisode.airingTime }},
                        timeUntilAiring: {{ nextAiringEpisode.timeUntilAiring }},
                        episode: {{ nextAiringEpisode.episode }}
                    };
                
                    function formatNextEpisode(nextAiringEpisode) {
                        const airingTime = nextAiringEpisode.airingTime * 1000; // Convert to milliseconds
                        const episodeNumber = nextAiringEpisode.episode;
                
                        function updateCountdown() {
                            const now = new Date().getTime();
                            const timeUntilAiring = airingTime - now;
                        
                            if (timeUntilAiring <= 0) {
                                return `Episode ${episodeNumber} has aired.`;
                            }
                        
                            const days = Math.floor(timeUntilAiring / (1000 * 60 * 60 * 24));
                            const hours = Math.floor((timeUntilAiring % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                            const minutes = Math.floor((timeUntilAiring % (1000 * 60 * 60)) / (1000 * 60));
                            const seconds = Math.floor((timeUntilAiring % (1000 * 60)) / 1000);
                        
                            const airingDate = new Date(airingTime);
                            const formattedDate = airingDate.toLocaleDateString('en-US', {
                                weekday: 'short',
                                year: 'numeric',
                                month: 'short',
                                day: 'numeric',
                            });
                            const formattedTime = airingDate.toLocaleTimeString('en-US', {
                                hour: 'numeric',
                                minute: '2-digit',
                                second: '2-digit',
                                hour12: true
                            });
                        
                            return `Episode <strong>${episodeNumber}</strong> will air on ${formattedDate} at ${formattedTime} ` +
                                `<strong class="text-{{ user.preferences.accent_colour }}-600">(${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds)</strong>`;
                        }
                
                        const countdownElement = document.getElementById('nextAiringEpisodeMessage');
                        countdownElement.innerHTML = updateCountdown();
                
                        // Update countdown every second
                        setInterval(() => {
                            countdownElement.innerHTML = updateCountdown();
                        }, 1000);
                    }
                
                    // Call the function when the page loads
                    document.addEventListener('DOMContentLoaded', function() {
                        formatNextEpisode(nextAiringEpisode);
                    });
                </script>
                {% endif %}
            </section>
            <section id="trailer" class="w-full hidden">
                {% if anime.trailer and anime.trailer.site == "youtube" %}
                <iframe src="https://www.youtube.com/embed/{{ anime.trailer.id }}" title="{{ anime.title.english }} Trailer" class="w-full aspect-video" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" credentialless allowfullscreen></iframe>
                {% else %}
                <div class="w-full h-96 flex items-center justify-center">
                    <span>No Trailer Available</span>
                </div>
                {% endif %}
            </section>
        </section>
        <div class="w-full w-fix">
            {% if related %}
            <div class="text-xl font-bold text-white uppercase flex flex-row items-center gap-1 mb-4">
                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 256 512" class="size-4" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg>
                <span>Related</span>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
                {% for related in related|slice:":5" %}
                {% if related.id and related.type == "TV" or related.type == "MOVIE" or related.type == "OVA" or related.type == "ONA" or related.type == "SPECIAL" or related.type == "TV_SHORT" or related.type == "MANGA" or related.type == "NOVEL" %}
                <a {% if related.type == "TV" or related.type == "MOVIE" or related.type == "OVA" or related.type == "ONA" or related.type == "SPECIAL" or related.type == "TV_SHORT" %}href="{% url 'detail:anime' related.id %}"{% elif related.type == "MANGA" %}href="{% url 'detail:manga' related.id %}"{% else %}onClick="showToast('{% if related.type == "MANGA" %}Manga{% else %}Novel{% endif %} reading is not supported yet!', false)"{% endif %} class="cursor-pointer flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">
                    <img loading="lazy" src="{{ related.image }}" alt="{{ related.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
                    <div class="flex flex-col gap-2">
                        <span class="font-bold flex gap-2 flex-row items-center">
                            {% if related.status == "Ongoing" %}
                                <span class="text-green-500">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
                                    <circle cx="12" cy="12" r="12" />
                                </svg>                
                                </span>
                            {% elif related.status == "Not yet aired" %}
                                <span class="text-yellow-500">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
                                    <circle cx="12" cy="12" r="12" />
                                </svg>
                                </span>
                            {% else %}
                                <span class="text-blue-500">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
                                    <circle cx="12" cy="12" r="12" />
                                </svg>
                                </span>
                            {% endif %}
                            <span>
                                {% if user.preferences.title_language == "english" and related.title.english %}
                                {{ related.title.english }}
                                {% elif user.preferences.title_language == "native" and related.title.native %}
                                {{ related.title.native }}
                                {% else %}
                                {{ related.title.romaji }}
                                {% endif %}
                            </span>
                        </span>
                        <span class="text-xs sm:text-sm font-bold flex gap-1 flex-row items-start">
                            <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded 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>
                                {{ related.type }}
                            </span>
                            {% if related.rating %}
                            <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded 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>
                                {{ related.rating }}
                                </span>
                            {% endif %}
                            {% if related.relationType %}
                            <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
                                    <path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
                                </svg>          
                                {{ related.relationType }}
                            </span>
                            {% endif %}
                            {% if related.episodes %}
                            <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded 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>
                                {{ related.episodes }}
                            </span>
                            {% endif %}
                        </span>
                    </div>
                </a>
                {% endif %}
                {% endfor %}
            </div>
            {% endif %}
            {% if recommendations %}
            <div class="text-xl font-bold text-white uppercase flex flex-row items-center gap-1 my-4">
                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 256 512" class="size-4" xmlns="http://www.w3.org/2000/svg"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg>
                <span>Recommendations</span>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-2">
                {% for recommendation in recommendations|slice:":10" %}
                {% if recommendation.id and recommendation.type == "TV" or recommendation.type == "MOVIE" or recommendation.type == "OVA" or recommendation.type == "ONA" or recommendation.type == "SPECIAL" or recommendation.type == "TV_SHORT" or recommendation.type == "MANGA" or recommendation.type == "NOVEL" %}
                <a {% if recommendation.type == "TV" or recommendation.type == "MOVIE" or recommendation.type == "OVA" or recommendation.type == "ONA" or recommendation.type == "SPECIAL" or recommendation.type == "TV_SHORT" %}href="{% url 'detail:anime' recommendation.id %}"{% elif recommendation.type == "MANGA" %}href="{% url 'detail:manga' recommendation.id %}"{% else %}onClick="showToast('{% if related.type == "MANGA" %}Manga{% else %}Novel{% endif %} reading is not supported yet!', false)"{% endif %} class="cursor-pointer flex flex-row w-full gap-4 bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30">   
                    <img loading="lazy" src="{{ recommendation.image }}" alt="{{ recommendation.title.english }}" class="rounded-lg w-12 h-16 object-cover"/>
                    <div class="flex flex-col gap-2 max-w-[calc(100%-4rem)]">
                        <span class="font-bold flex gap-2 flex-row items-center">
                            {% if recommendation.status == "Ongoing" %}
                                <span class="text-green-500">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
                                    <circle cx="12" cy="12" r="12" />
                                </svg>
                                </span>
                            {% elif recommendation.status == "Not yet aired" %}
                                <span class="text-yellow-500">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
                                    <circle cx="12" cy="12" r="12" />
                                </svg>
                                </span>
                            {% else %}
                                <span class="text-blue-500">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-2 sm:size-3">
                                    <circle cx="12" cy="12" r="12" />
                                </svg>
                                </span>
                            {% endif %}
                            <span class="truncate max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
                                {% if user.preferences.title_language == "english" and recommendation.title.english %}
                                {{ recommendation.title.english }}
                                {% elif user.preferences.title_language == "native" and recommendation.title.native %}
                                {{ recommendation.title.native }}
                                {% else %}
                                {{ recommendation.title.romaji }}
                                {% endif %}
                            </span>
                        </span>
                        <span class="text-xs sm:text-sm font-bold flex gap-1 flex-row items-start">
                            <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded 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>
                                {{ recommendation.type }}
                            </span>
                            {% if recommendation.rating %}
                            <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded 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>
                                {{ recommendation.rating }}
                            </span>
                            {% if recommendation.episodes %}
                            <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded 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>
                                {{ recommendation.episodes }}
                            </span>
                            {% endif %}
                        </span>
                        {% endif %}
                    </div>
                </a>
                {% endif %}
                {% endfor %}
            </div>
            {% endif %}
        </div>
    </div>
</div>
<div id="toastContainer" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 z-50 flex flex-col space-y-2"></div>
{% endblock content %}
{% block scripts %}
<script>
    const categorySwitch = document.querySelectorAll(".category-switch");
    categorySwitch.forEach((button) => {
      button.addEventListener("click", () => {
        categorySwitch.forEach((button) => {
          button.classList.remove("active-category");
          button.classList.remove("bg-{{ user.preferences.accent_colour }}-600");
        });
        button.classList.add("active-category");
        button.classList.add("bg-{{ user.preferences.accent_colour }}-600");
  
        const target = button.getAttribute("data-target");
        const sections = [document.getElementById("characters"), document.getElementById("episodes"), document.getElementById("trailer")];
        sections.forEach((section) => {
          section.classList.add("hidden");
          section.classList.remove("flex");
        });
        document.getElementById(target).classList.remove("hidden");
        document.getElementById(target).classList.add("flex");
      });
    });

    function showToast(message, isSuccess) {
        const toast = document.createElement('div');
        toast.className = `flex items-center p-4 rounded-md shadow-lg transition-opacity duration-500 ease-in-out animate__animated ${
            isSuccess ? 'bg-green-100 text-green-700 animate__fadeInUp' : 'bg-red-100 text-red-700 animate__fadeInUp'
        }`;

        const checkSVG = `<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="m4.5 12.75 6 6 9-13.5" /></svg>`

        const errorSVG = `<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="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" /></svg>`

        toast.innerHTML = `
            <div class="flex items-center">
                ${isSuccess ? checkSVG : errorSVG}
                <span class="ml-2">${message}</span>
            </div>
        `;

        // Append the toast to the container
        toastContainer.appendChild(toast);

        // Remove the toast after 3 seconds
        setTimeout(() => {
            toast.classList.add('animate__fadeOutDown');
            setTimeout(() => {
                toastContainer.removeChild(toast);
            }, 500);
        }, 3000);
    }

    {% if mal_data %}
    const customSelects = document.querySelectorAll('.custom-select')
    customSelects.forEach(customSelect => {
        const selectId = customSelect.getAttribute('data-select')
        const customSelectDisplay = document.getElementById(selectId)
        const customSelectOptions = document.getElementById(`${selectId}_options`)
        let selectedValue = '';

        customSelectDisplay.addEventListener('click', function() {
            customSelectOptions.classList.toggle('hidden');
        });

        customSelectOptions.addEventListener('click', function(e) {
            if (e.target.hasAttribute('data-value')) {
                selectedValue = e.target.getAttribute('data-value');
                customSelectDisplay.textContent = selectedValue;
                customSelectOptions.classList.add('hidden');
            }
        });

        // Close the dropdown when clicking outside
        document.addEventListener('click', function(e) {
            if (!customSelectDisplay.contains(e.target) && !customSelectOptions.contains(e.target)) {
                customSelectOptions.classList.add('hidden');
            }
        });
    });

    const statusSelect = document.getElementById('status');
    const scoreSelect = document.getElementById('score');
    const episodesSelect = document.getElementById('episodes_m');

    // Call the API to update the user's list
    const observer = new MutationObserver(function(mutations){
        mutations.forEach(function(mutation){
            if (mutation.type === 'characterData' || mutation.type === 'childList') {
                const statusSelectedOption = statusSelect.textContent.trim().toLowerCase().replace(/\s/g, '_');
                const scoreSelectedOption = scoreSelect.textContent.trim();
                const episodesSelectedOption = episodesSelect.textContent.trim();

                const data = {
                    'status': statusSelectedOption === 'Add to List' ? 'add_to_list' : statusSelectedOption,
                    'score': scoreSelectedOption === 'Score' ? 0 : parseInt(scoreSelectedOption),
                    'episodes': episodesSelectedOption === 'Episodes' ? 0 : parseInt(episodesSelectedOption),
                    'mal_id': {{ mal_data.id }},
                };

                fetch('{% url "user_profile:update_user_mal_list" %}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': '{{ csrf_token }}',
                    },
                    body: JSON.stringify(data),
                }).then(response => {
                    if (response.ok) {
                        return response.json();
                    } else {
                        return response.json().then(data => {
                            throw new Error(data.error);
                        });
                    }
                }).then(data => {
                    showToast(data.success, true);
                }).catch(error => {
                    showToast(error, false);
                });
            }
        });
    });

    observer.observe(statusSelect, {childList: true, characterData: true});
    observer.observe(scoreSelect, {childList: true, characterData: true});
    observer.observe(episodesSelect, {childList: true, characterData: true});
    {% endif %}
</script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
    const seasonSwiper = new Swiper(".seasonSwiper", {
      slidesPerView: 'auto',
      spaceBetween: 8,
      freeMode: true,
    });
</script>
<script>
    // Configuration
    const EPISODES_PER_PAGE = 10;

    // Get all episodes
    const allEpisodes = Array.from(document.querySelectorAll('#episodes > a'));
    let currentPage = 1;
    let totalPages = Math.ceil(allEpisodes.length / EPISODES_PER_PAGE);

    function showEpisodesForPage(page) {
        const startIndex = (page - 1) * EPISODES_PER_PAGE;
        const endIndex = startIndex + EPISODES_PER_PAGE;

        allEpisodes.forEach((episode, index) => {
            episode.style.display = (index >= startIndex && index < endIndex) ? '' : 'none';
        });
    }

    function createPaginationControls() {
        // Create a container for pagination that's separate from the episodes
        const paginationContainer = document.createElement('div');
        paginationContainer.className = 'w-full'; // Ensure it takes full width

        const section = document.createElement('section');
        section.className = 'flex justify-center items-center my-8';

        const nav = document.createElement('nav');
        nav.className = 'inline-flex rounded-md shadow-sm transform scale-[0.80] sm:scale-100';
        nav.style.transformOrigin = 'center';
        nav.setAttribute('aria-label', 'Pagination');

        const buttons = [
            { text: 'First', condition: () => currentPage > 1, page: 1 },
            { text: 'Previous', condition: () => currentPage > 1, page: currentPage - 1 },
            { text: `${currentPage} of ${totalPages}`, condition: null },
            { text: 'Next', condition: () => currentPage < totalPages, page: currentPage + 1 },
            { text: 'Last', condition: () => currentPage < totalPages, page: totalPages }
        ];

        buttons.forEach((button, index) => {
            const element = button.condition !== null
                ? createButton(button.text, button.condition(), button.page, index)
                : createSpan(button.text, index);
            nav.appendChild(element);
        });

        section.appendChild(nav);
        paginationContainer.appendChild(section);

        // Insert the pagination container after the episodes container
        const episodesSection = document.getElementById('episodes');
        episodesSection.parentNode.insertBefore(paginationContainer, episodesSection.nextSibling);
    }

    function createButton(text, isEnabled, page, index) {
        const element = isEnabled ? document.createElement('a') : document.createElement('span');
        let className = `w-24 px-3 py-2 text-sm font-medium flex items-center justify-center `;

        if (index === 0) className += 'rounded-l-md ';
        if (index === 4) className += 'rounded-r-md ';

        if (isEnabled) {
            className += `bg-{{ user.preferences.accent_colour }}-600 bg-opacity-30 text-white hover:bg-opacity-40 `;
            if (index === 1 || index === 3) {
                className += 'text-opacity-90 hover:text-opacity-100 ';
            }
            element.href = '#';
            element.addEventListener('click', (e) => {
                e.preventDefault();
                goToPage(page);
            });
        } else {
            className += 'bg-{{ user.preferences.accent_colour }}-600 bg-opacity-10 text-white text-opacity-30 cursor-not-allowed';
        }

        element.className = className;
        element.textContent = text;
        return element;
    }

    function createSpan(text) {
        const span = document.createElement('span');
        span.className = 'w-28 px-3 py-2 bg-{{ user.preferences.accent_colour }}-600 bg-opacity-50 text-sm font-medium text-white flex items-center justify-center';
        span.textContent = text;
        return span;
    }

    function smoothScrollToEpisodes() {
        const episodesSection = document.getElementById('dss');
        episodesSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
    
    function goToPage(page) {
        if (page >= 1 && page <= totalPages && page !== currentPage) {
            currentPage = page;
            updatePagination();
            smoothScrollToEpisodes();
        }
    }

    function updatePagination() {
        showEpisodesForPage(currentPage);
        const paginationContainer = document.querySelector('#episodes + div');
        if (paginationContainer) {
            paginationContainer.remove();
        }
        createPaginationControls();
    }
    
    // Initialize pagination
    document.addEventListener('DOMContentLoaded', function() {
        createPaginationControls();
        showEpisodesForPage(currentPage);
    });
</script>
{% endblock scripts %}