{% extends "partials/base.html" %}
{% load custom_filters %}
{% block css %}
<link rel="stylesheet" href="https://cdn.vidstack.io/player/theme.css" />
<link rel="stylesheet" href="https://cdn.vidstack.io/player/audio.css" />
<link rel="stylesheet" href="https://cdn.vidstack.io/player/video.css" />
<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"/>
<style>
    .custom-scrollbar::-webkit-scrollbar {
        width: 10px;
    }
    .custom-scrollbar::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 5px;
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-color);
        border-radius: 5px;
        border: 2px solid transparent;
        background-clip: padding-box;
        transition: opacity 0.3s ease;
    }
    .custom-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: var(--scrollbar-color) rgba(0, 0, 0, 0.1);
    }
    .custom-scrollbar::-webkit-scrollbar-thumb {
        opacity: 0;
    }
    .custom-scrollbar.show-scrollbar::-webkit-scrollbar-thumb {
        opacity: 0.5;
    }
    .custom-scrollbar.show-scrollbar:hover::-webkit-scrollbar-thumb {
        opacity: 1;
    }

    .spoiler {
        margin: 10px 0;
    }
    
    .spoiler button {
        background-color: var(--scrollbar-color) rgba(0, 0, 0, 0.8);
        border: 1px solid var(--scrollbar-color);
        padding: 0.5rem 1rem;
        cursor: pointer;
    }
    
    .spoiler-content {
        margin-top: 5px;
    }
</style>
{% endblock css %}
{% block content %}
<div class="flex flex-col lg:flex-row mt-4 gap-2">
    <div class="w-full lg:w-3/4 relative">
        <div id="video-player" class="aspect-video"></div>
        <div id="skip-buttons" class="absolute bottom-24 right-4 flex flex-col space-y-2 z-20">
            <div id="skipIntro" class="relative z-10 bg-white bg-opacity-20 text-white text-center py-2 px-4 rounded-lg cursor-pointer overflow-hidden hidden">
                <span class="relative" style="z-index: inherit;">Skip Intro</span>
                <div id="intro-overlay" class="absolute inset-0 bg-{{ user.preferences.accent_colour }}-600 transition-transform duration-[5000ms] ease-linear origin-left scale-x-0"></div>
            </div>
            <div id="skipOutro" class="relative z-10 bg-white bg-opacity-20 text-white text-center py-2 px-4 rounded-lg cursor-pointer overflow-hidden hidden">
                <span class="relative" style="z-index: inherit;">Skip Outro</span>
                <div id="outro-overlay" class="absolute inset-0 bg-{{ user.preferences.accent_colour }}-600 transition-transform duration-[5000ms] ease-linear origin-left scale-x-0"></div>
            </div>
        </div>
    </div>

    <div class="w-full lg:w-1/4 flex flex-col px-2 lg:px-0">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-white text-xl font-bold">Episodes</h2>
            <div class="flex">
                <button id="listViewSwitch" class="bg-{{ user.preferences.accent_colour }}-600 text-white text-sm font-bold px-4 py-2 rounded-l">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
                    </svg>
                </button>
                <button id="gridViewSwitch" class="bg-white bg-opacity-10 text-white text-sm font-bold px-4 py-2 rounded-r">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                    </svg>
                </button>
            </div>
        </div>
        <div id="episodeContainer" class="flex flex-col gap-2 h-full max-h-96 lg:h-[39vw] lg:max-h-[761px] overflow-y-auto custom-scrollbar">
            <div id="listView" class="hidden">
                {% for episode in all_episodes %}
                <a href="{% url "watch:watch_episode" anime.id episode.number %}{% if request.GET.mode %}?mode={{ request.GET.mode }}{% endif %}{% if request.GET.mode and request.GET.provider %}&provider={{ request.GET.provider }}{% elif request.GET.provider %}?provider={{ request.GET.provider }}{% endif %}" 
                   class="flex flex-row gap-4 justify-between items-center w-full {% if episode.number == current_episode_number %}bg-{{ user.preferences.accent_colour }}-600{% elif episode.number in watched_episodes %}bg-{{ user.preferences.accent_colour }}-600 bg-opacity-20{% else %}bg-white bg-opacity-10{% endif %} p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 mb-2" id="{% if episode.number == current_episode_number %}active-episode-list{% endif %}">
                   <span class="truncate max-w-full overflow-hidden text-ellipsis whitespace-nowrap">
                        {{ episode.number }}. 
                        {% if episode.metadata.title %}
                            {{ episode.metadata.title }}
                        {% elif episode.title %}
                            {{ episode.title }}
                        {% else %}
                            Episode {{ episode.number }}
                        {% endif %}
                    </span>
                    
                    <span class="flex flex-row item-center gap-2">
                    {% if episode.metadata.filler %}
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff" class="size-3" style="margin-top:0.35rem;" version="1.1" id="Capa_1" viewBox="0 0 23.758 23.758" xml:space="preserve">
                        <g>
                            <g>
                                <path d="M4.523,23.758V0h14.712v4.021H9.319v5.625h9.916v4.016H9.319v10.096H4.523z"/>
                            </g>
                        </g>
                    </svg>
                    {% endif %}
                    
                    {% if anime.subDubCount.sub >= episode.number %}
                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="size-6" viewBox="0 0 24 24" version="1.1">
                        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                            <g fill="#fff" fill-rule="nonzero">
                                <path d="M18.75,4 C20.5449254,4 22,5.45507456 22,7.25 L22,16.754591 C22,18.5495164 20.5449254,20.004591 18.75,20.004591 L5.25,20.004591 C3.45507456,20.004591 2,18.5495164 2,16.754591 L2,7.25 C2,5.51696854 3.35645477,4.10075407 5.06557609,4.00514479 L5.25,4 L18.75,4 Z M10.6216203,8.59854135 C8.21322176,7.22468635 5.5,8.85441664 5.5,12 C5.5,15.1433285 8.21538655,16.7747125 10.6208022,15.4065583 C10.9808502,15.2017699 11.106713,14.7438795 10.9019246,14.3838314 C10.6971362,14.0237834 10.2392458,13.8979206 9.8791978,14.102709 C8.48410774,14.8962094 7,14.0045685 7,12 C7,9.9935733 8.48070939,9.10416685 9.87837972,9.90145865 C10.2381704,10.1066989 10.6962184,9.98141095 10.9014586,9.62162028 C11.1066989,9.2618296 10.981411,8.80378156 10.6216203,8.59854135 Z M18.1216203,8.59854135 C15.7132218,7.22468635 13,8.85441664 13,12 C13,15.1433285 15.7153866,16.7747125 18.1208022,15.4065583 C18.4808502,15.2017699 18.606713,14.7438795 18.4019246,14.3838314 C18.1971362,14.0237834 17.7392458,13.8979206 17.3791978,14.102709 C15.9841077,14.8962094 14.5,14.0045685 14.5,12 C14.5,9.9935733 15.9807094,9.10416685 17.3783797,9.90145865 C17.7381704,10.1066989 18.1962184,9.98141095 18.4014586,9.62162028 C18.6066989,9.2618296 18.481411,8.80378156 18.1216203,8.59854135 Z"></path>
                            </g>
                        </g>
                    </svg>
                    {% endif %}
    
                    {% if anime.subDubCount.dub >= episode.number %}
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 mt-1" title="Available in Dub">
                        <path d="M8.25 4.5a3.75 3.75 0 1 1 7.5 0v8.25a3.75 3.75 0 1 1-7.5 0V4.5Z" />
                        <path d="M6 10.5a.75.75 0 0 1 .75.75v1.5a5.25 5.25 0 1 0 10.5 0v-1.5a.75.75 0 0 1 1.5 0v1.5a6.751 6.751 0 0 1-6 6.709v2.291h3a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3v-2.291a6.751 6.751 0 0 1-6-6.709v-1.5A.75.75 0 0 1 6 10.5Z" />
                    </svg>
                    {% endif %}
                    </span>
                </a>
                {% endfor %}
            </div>
            <div id="gridView" class="hidden">
            {% for episode in all_episodes %}
                <a href="{% url "watch:watch_episode" anime.id episode.number %}{% if request.GET.mode %}?mode={{ request.GET.mode }}{% endif %}{% if request.GET.mode and request.GET.provider %}&provider={{ request.GET.provider }}{% elif request.GET.provider %}?provider={{ request.GET.provider }}{% endif %}" 
                   class="flex flex-row w-full gap-2 {% if episode.number == current_episode_number %}bg-{{ user.preferences.accent_colour }}-600{% elif episode.number in watched_episodes %}bg-{{ user.preferences.accent_colour }}-600 bg-opacity-20{% else %}bg-white bg-opacity-10{% endif %} p-2 rounded my-2 hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30" id="{% if episode.number == current_episode_number %}active-episode-grid{% endif %}">
                    <div class="w-32 h-18 flex-shrink-0">
                        <img loading="lazy" src="{% if episode.metadata.image %}{{ episode.metadata.image }}{% else %}{{ anime.cover}}{% endif %}" alt="Episode {{ episode.number }}" class="w-full h-full object-cover rounded" style="aspect-ratio: 16/9;">
                    </div>
                    <div class="flex flex-col justify-between flex-grow overflow-hidden">
                        <div>
                            <h3 class="font-bold truncate">
                                {{ episode.number }}. 
                                {% if episode.metadata.title %}
                                    {{ episode.metadata.title }}
                                {% elif episode.title %}
                                    {{ episode.title }}
                                {% else %}
                                    Episode {{ episode.number }}
                                {% endif %}    
                            </h3>
                            <p class="text-sm text-gray-300 line-clamp-2 overflow-hidden" style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;">{% if episode.metadata.description %}{{ episode.metadata.description }}{% else %}No description available{% endif %}</p>
                        </div>
                        <div class="flex flex-row items-center gap-2">
                            {% if episode.metadata.filler %}
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#fff" class="size-3" version="1.1" id="Capa_1" viewBox="0 0 23.758 23.758" xml:space="preserve">
                                <g>
                                    <g>
                                        <path d="M4.523,23.758V0h14.712v4.021H9.319v5.625h9.916v4.016H9.319v10.096H4.523z"/>
                                    </g>
                                </g>
                            </svg>
                            {% endif %}
                            {% if anime.subDubCount.sub >= episode.number %}
                            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="size-6" viewBox="0 0 24 24" version="1.1">
                                <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                    <g fill="#fff" fill-rule="nonzero">
                                        <path d="M18.75,4 C20.5449254,4 22,5.45507456 22,7.25 L22,16.754591 C22,18.5495164 20.5449254,20.004591 18.75,20.004591 L5.25,20.004591 C3.45507456,20.004591 2,18.5495164 2,16.754591 L2,7.25 C2,5.51696854 3.35645477,4.10075407 5.06557609,4.00514479 L5.25,4 L18.75,4 Z M10.6216203,8.59854135 C8.21322176,7.22468635 5.5,8.85441664 5.5,12 C5.5,15.1433285 8.21538655,16.7747125 10.6208022,15.4065583 C10.9808502,15.2017699 11.106713,14.7438795 10.9019246,14.3838314 C10.6971362,14.0237834 10.2392458,13.8979206 9.8791978,14.102709 C8.48410774,14.8962094 7,14.0045685 7,12 C7,9.9935733 8.48070939,9.10416685 9.87837972,9.90145865 C10.2381704,10.1066989 10.6962184,9.98141095 10.9014586,9.62162028 C11.1066989,9.2618296 10.981411,8.80378156 10.6216203,8.59854135 Z M18.1216203,8.59854135 C15.7132218,7.22468635 13,8.85441664 13,12 C13,15.1433285 15.7153866,16.7747125 18.1208022,15.4065583 C18.4808502,15.2017699 18.606713,14.7438795 18.4019246,14.3838314 C18.1971362,14.0237834 17.7392458,13.8979206 17.3791978,14.102709 C15.9841077,14.8962094 14.5,14.0045685 14.5,12 C14.5,9.9935733 15.9807094,9.10416685 17.3783797,9.90145865 C17.7381704,10.1066989 18.1962184,9.98141095 18.4014586,9.62162028 C18.6066989,9.2618296 18.481411,8.80378156 18.1216203,8.59854135 Z"></path>
                                    </g>
                                </g>
                            </g>
                            </svg>
                            {% endif %}
                            {% if anime.subDubCount.dub >= episode.number %}
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4" title="Available in Dub">
                                <path d="M8.25 4.5a3.75 3.75 0 1 1 7.5 0v8.25a3.75 3.75 0 1 1-7.5 0V4.5Z" />
                                <path d="M6 10.5a.75.75 0 0 1 .75.75v1.5a5.25 5.25 0 1 0 10.5 0v-1.5a.75.75 0 0 1 1.5 0v1.5a6.751 6.751 0 0 1-6 6.709v2.291h3a.75.75 0 0 1 0 1.5h-7.5a.75.75 0 0 1 0-1.5h3v-2.291a6.751 6.751 0 0 1-6-6.709v-1.5A.75.75 0 0 1 6 10.5Z" />
                            </svg>
                            {% endif %}
                        </div>
                    </div>
                </a>
            {% endfor %}
            </div>
        </div>
    </div>
</div>
<div class="flex flex-col lg:flex-row my-4 gap-2">
    <div class="w-full lg:w-3/4">
        <div class="flex flex-col lg:flex-row gap-2 items-center justify-between">
            {% if current_episode %}<h2 class="text-xl font-bold truncate max-w-full overflow-hidden text-ellipsis whitespace-nowrap">Episode {{ current_episode.number }} — {{ episode.number }}
                {% if current_episode.metadata.title %}
                    {{ current_episode.metadata.title }}
                {% elif current_episode.title %}
                    {{ current_episode.title }}
                {% else %}
                    Episode {{ current_episode.number }}
            {% endif %}</h2>{% endif %}
            <div class="flex max-w-[100vw] flex-row lg:gap-1 items-start lg:items-center">
                <span class="font-bold">Episode Provider: </span>
                <a href="{% url "watch:watch_episode" anime.id current_episode.number %}?mode={{ mode }}&provider=zoro" 
                   class="{% if provider == "zoro" %}bg-{{ user.preferences.accent_colour }}-600{% else %}bg-white bg-opacity-10{% endif %} text-white text-sm font-bold px-4 py-2 rounded">Zoro</a>
            
                <a href="{% url "watch:watch_episode" anime.id current_episode.number %}?mode={{ mode }}&provider=gogo" 
                   class="{% if provider == "gogo" %}bg-{{ user.preferences.accent_colour }}-600{% else %}bg-white bg-opacity-10{% endif %} text-white text-sm font-bold px-4 py-2 rounded">Gogo</a>
                
                <span class="ml-8 font-bold">Mode: </span>
                {% if current_episode.number %}
                <a href="{% url "watch:watch_episode" anime.id current_episode.number %}?mode=sub&provider={{ provider }}" 
                   class="{% if mode == "sub" %}bg-{{ user.preferences.accent_colour }}-600{% else %}bg-white bg-opacity-10{% endif %} text-white text-sm font-bold px-4 py-2 rounded">Sub</a>
                <a href="{% url "watch:watch_episode" anime.id current_episode.number %}?mode=dub&provider={{ provider }}" 
                   class="{% if mode == "dub" %}bg-{{ user.preferences.accent_colour }}-600{% else %}bg-white bg-opacity-10{% endif %} text-white text-sm font-bold px-4 py-2 rounded">Dub</a>
                {% endif %}
            </div>
        </div>
        <p class="my-4">
            {% if current_episode.description %}
            {{ current_episode.description }}
            {% endif %}
            {% if current_episode.metadata.description %}
            {{ current_episode.metadata.description }}
            {% endif %}
        </p>
        {% if nextAiringEpisode %}
        <p 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 %}
        <div class="flex flex-col lg:flex-row w-full my-4 bg-neutral-950 rounded p-2 gap-4">
            <div class="flex flex-col items-center lg:items-start gap-2 min-w-32">
                <img loading="lazy" src="{{ anime.image }}" alt="{{ anime.title.english }}" class="rounded-lg w-56 h-72 object-cover"/>
                <div class="flex flex-row gap-2 w-full">
                    <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>
                <a href="{% url "detail:anime" anime.id %}" 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 flex flex-row items-center justify-center gap-1 w-full">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
                        <path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12Zm8.706-1.442c1.146-.573 2.437.463 2.126 1.706l-.709 2.836.042-.02a.75.75 0 0 1 .67 1.34l-.04.022c-1.147.573-2.438-.463-2.127-1.706l.71-2.836-.042.02a.75.75 0 1 1-.671-1.34l.041-.022ZM12 9a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z" clip-rule="evenodd" />
                    </svg>
                    <span>Details</span>
                </a>
            </div>
            <div class="flex flex-col gap-2 w-full">
                <h2 class="text-2xl font-bold text-transparent bg-clip-text block w-full truncate overflow-hidden text-ellipsis whitespace-nowrap" 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 class="flex flex-col gap-2 mb-4">
                    <div class="flex flex-row gap-4">
                        <div class="flex-1">
                            <span class="font-bold">Format: </span>{{ anime.type }}
                        </div>
                        <div class="flex-1">
                            <span class="font-bold">Episodes: </span>{{ anime.totalEpisodes }}
                        </div>
                    </div>
                    <div class="flex flex-row gap-4">
                        <div class="flex-1">
                            <span class="font-bold">Year: </span>{{ anime.releaseDate }}
                        </div>
                        <div class="flex-1">
                            <span class="font-bold">Duration: </span>{{ anime.duration }} mins
                        </div>
                    </div>
                    <div class="flex flex-row gap-4">
                        <div class="flex-1">
                            <span class="font-bold">Status: </span>{{ anime.status }}
                        </div>
                        <div class="flex-1 capitalize">
                            <span class="font-bold">Season: </span>{{ anime.season }}
                        </div>
                    </div>
                    <div class="flex flex-row gap-4">
                        <div class="flex-1">
                            <span class="font-bold">Rating: </span>{{ anime.rating }} / 100
                        </div>
                        <div class="flex-1">
                            <span class="font-bold">Popularity: </span>{{ anime.popularity }}
                        </div>
                    </div>
                    <div class="flex flex-row gap-4">
                        <div class="flex-1">
                            <span class="font-bold">Country: </span>{{ anime.countryOfOrigin }}
                        </div>
                        <div class="flex-1">
                            <span class="font-bold">Studios: </span>
                            {% for studio in anime.studios %}
                                <span>{{ studio }}</span>{% if not forloop.last %}, {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </div>                
                <span class="text-xs sm:text-sm font-bold flex gap-2 flex-row flex-wrap items-center">
                    {% if anime.status == "Ongoing" %}
                    <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
                        <span class="text-green-500 pt-1">
                            <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>
                        Ongoing
                    </span>
                    {% elif anime.status == "Not yet aired" %}
                    <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
                        <span class="text-yellow-500 pt-1">
                            <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>
                        Not yet aired
                    </span>
                    {% else %}
                    <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1">
                        <span class="text-blue-500 pt-1">
                            <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>
                        Finished
                    </span>
                    {% endif %}
                    <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>
                        {{ anime.type }}
                    </span>
                    <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 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>
                    {% if anime.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>
                        {{ anime.rating }}
                        </span>
                    {% endif %}
                    {% if anime.totalEpisodes %}
                    <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>
                          {{ anime.totalEpisodes }}
                    </span>
                    {% endif %}
                </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-10 text-green-300 py-1 px-2 rounded-full">
                    {% elif genre == "Adventure" %}
                    <span class="text-xs font-bold bg-pink-100 bg-opacity-10 text-pink-300 py-1 px-2 rounded-full">
                    {% elif genre == "Cars" %}
                    <span class="text-xs font-bold bg-orange-100 bg-opacity-10 text-orange-300 py-1 px-2 rounded-full">
                    {% elif genre == "Comedy" %}
                    <span class="text-xs font-bold bg-purple-100 bg-opacity-10 text-purple-300 py-1 px-2 rounded-full">
                    {% elif genre == "Drama" %}
                    <span class="text-xs font-bold bg-blue-100 bg-opacity-10 text-blue-300 py-1 px-2 rounded-full">
                    {% elif genre == "Fantasy" %}
                    <span class="text-xs font-bold bg-yellow-100 bg-opacity-10 text-yellow-300 py-1 px-2 rounded-full">
                    {% elif genre == "Horror" %}
                    <span class="text-xs font-bold bg-red-100 bg-opacity-10 text-red-300 py-1 px-2 rounded-full">
                    {% elif genre == "Mahou Shoujo" %}
                    <span class="text-xs font-bold bg-teal-100 bg-opacity-10 text-teal-300 py-1 px-2 rounded-full">
                    {% elif genre == "Mecha" %}
                    <span class="text-xs font-bold bg-indigo-100 bg-opacity-10 text-indigo-300 py-1 px-2 rounded-full">
                    {% elif genre == "Music" %}
                    <span class="text-xs font-bold bg-pink-100 bg-opacity-10 text-pink-300 py-1 px-2 rounded-full">
                    {% elif genre == "Mystery" %}
                    <span class="text-xs font-bold bg-purple-100 bg-opacity-10 text-purple-300 py-1 px-2 rounded-full">
                    {% elif genre == "Psychological" %}
                    <span class="text-xs font-bold bg-blue-100 bg-opacity-10 text-blue-300 py-1 px-2 rounded-full">
                    {% elif genre == "Romance" %}
                    <span class="text-xs font-bold bg-yellow-100 bg-opacity-10 text-yellow-300 py-1 px-2 rounded-full">
                    {% elif genre == "Sci-Fi" %}
                    <span class="text-xs font-bold bg-red-100 bg-opacity-10 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-10 text-teal-300 py-1 px-2 rounded-full">
                    {% elif genre == "Sports" %}
                    <span class="text-xs font-bold bg-indigo-100 bg-opacity-10 text-indigo-300 py-1 px-2 rounded-full">
                    {% elif genre == "Supernatural" %}
                    <span class="text-xs font-bold bg-green-100 bg-opacity-10 text-green-300 py-1 px-2 rounded-full">
                    {% elif genre == "Thriller" %}
                    <span class="text-xs font-bold bg-orange-100 bg-opacity-10 text-orange-300 py-1 px-2 rounded-full">
                    {% else %}
                    <span class="text-xs font-bold bg-white bg-opacity-10 text-white py-1 px-2 rounded-full">
                    {% endif %}
                        {{ genre }}
                    </span>
                    {% endfor %}
                </span>
                {% if mal_data %}
                <section class="flex flex-col lg:flex-row my-4 gap-4">
                    <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">
                            <div class="select-none cursor-pointer bg-neutral-900 py-2 px-4 pr-8 rounded leading-tight focus:outline-none" id="episodes">
                                {% 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_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 %}                
            </div>
        </div>
        {% if seasons %}
        <div class="my-8">
            <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 "watch:watch" 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 %}
        {% load custom_filters %}

        {% if discussions %}
            <div class="my-8">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <h2 class="text-xl font-bold text-white uppercase">
                            {{ discussions.metadata.total }} Discussions
                        </h2>
                        <p class="text-sm text-gray-100 mt-2">
                            <span class="font-bold">Mean Score: </span>{{ discussions.metadata.score }} / 5
                            <span class="font-bold ml-4">Aired: </span>{{ discussions.metadata.aired|parse_iso_date|date:"F j, Y" }}
                        </p>
                    </div>
                    <a href="{{ discussions.metadata.forum_url }}" target="_blank" class="bg-{{ user.preferences.accent_colour }}-600 hover:bg-{{ user.preferences.accent_colour }}-700 text-white text-sm font-bold rounded-lg flex flex-row items-center justify-center gap-1 px-4 py-2 transition duration-300">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
                        </svg>
                        <span>Post Reply</span>
                    </a>
                </div>

                <div id="comments-container">
                </div>

                <button id="load-more" class="mt-4 bg-{{ user.preferences.accent_colour }}-600 hover:bg-{{ user.preferences.accent_colour }}-700 text-white text-sm font-bold rounded-lg px-4 py-2 transition duration-300" style="display: none;">
                    Load More
                </button>
            </div>
        {% endif %}

        {% if characters %}
        <div class="my-8">
            <h2 class="text-xl font-bold text-white uppercase flex flex-row items-center gap-1 mb-4">
                Characters &amp; Voice Actors
            </h2>
            <div class="flex flex-wrap">
                {% for character in characters %}
                <div class="w-full lg:w-1/2 p-2 flex justify-between">
                    <div class="flex flex-row gap-2 items-center">
                        <img 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" %}
                        {% if voice_actor.image %}
                        <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>
                        {% endif %}
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
            </div>            
        </div>
        {% endif %}
    </div>
    <div class="w-full lg:w-1/4">
        {% 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="flex flex-col gap-2">
            {% for related in related|slice:":5" %}
            {% 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" 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="flex flex-col 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="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 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>
    document.addEventListener('DOMContentLoaded', function() {
        const commentsContainer = document.getElementById('comments-container');
        const loadMoreButton = document.getElementById('load-more');
        const commentsPerPage = 10;
        let currentPage = 0;
    
        const comments = [
            {% for comment in discussions.comments %}
                {
                    avatar: "{{ comment.created_by.forum_avator }}",
                    name: "{{ comment.created_by.name }}",
                    date: "{{ comment.created_at|parse_iso_datetime|date:"F j, Y" }}",
                    time: "{{ comment.created_at|parse_iso_datetime|time:"g:i A" }}",
                    body: `{{ comment.body_html|remove_br|safe|escapejs }}`
                },
            {% endfor %}
        ];
    
        function renderComments(start, end) {
            const fragment = document.createDocumentFragment();
            for (let i = start; i < end && i < comments.length; i++) {
                const comment = comments[i];
                const commentDiv = document.createElement('div');
                commentDiv.className = 'w-full p-2 flex flex-row gap-4';
                commentDiv.innerHTML = `
                    <img loading="lazy" src="${comment.avatar}" alt="${comment.name}" class="rounded-full w-16 h-16 object-cover aspect-square"/>
                    <div class="flex flex-col gap-1 flex-grow max-w-fit">
                        <div class="flex flex-row gap-2 items-center">
                            <span class="font-bold">${comment.name}</span>
                            <span class="text-xs text-gray-400">
                                ${comment.date} at ${comment.time}
                            </span>
                        </div>
                        <div class="text-sm text-gray-100">${comment.body}</div>
                    </div>
                `;
                fragment.appendChild(commentDiv);
            }
            commentsContainer.appendChild(fragment);
        }
    
        function loadMoreComments() {
            const start = currentPage * commentsPerPage;
            const end = start + commentsPerPage;
            renderComments(start, end);
            currentPage++;
    
            if (end >= comments.length) {
                loadMoreButton.style.display = 'none';
            }
        }
    
        loadMoreButton.addEventListener('click', loadMoreComments);
    
        // Initial load
        loadMoreComments();
        if (comments.length > commentsPerPage) {
            loadMoreButton.style.display = 'block';
        }
    });
</script>
<script>
    function toggleSpoiler(id) {
        var content = document.getElementById(id);
        if (content.style.display === "none") {
            content.style.display = "block";
        } else {
            content.style.display = "none";
        }
    }

    const episodeContainer = document.getElementById('episodeContainer');
    let scrollTimer;

    // Function to get RGB values from Tailwind color class
    function getRgbFromTailwindColor(colorClass) {
        const tempElement = document.createElement('div');
        tempElement.className = colorClass;
        document.body.appendChild(tempElement);
        const rgbColor = window.getComputedStyle(tempElement).backgroundColor;
        document.body.removeChild(tempElement);
        return rgbColor;
    }

    // Set CSS variables for scrollbar colors
    const accentColor = getRgbFromTailwindColor('bg-{{ user.preferences.accent_colour }}-600');
    document.documentElement.style.setProperty('--scrollbar-color', accentColor);

    function showScrollbar() {
        episodeContainer.classList.add('show-scrollbar');
        episodeContainer.classList.remove('inactive-scrollbar');
    }

    function hideScrollbar() {
        episodeContainer.classList.remove('show-scrollbar');
        episodeContainer.classList.add('inactive-scrollbar');
    }

    episodeContainer.addEventListener('scroll', () => {
        showScrollbar();
        clearTimeout(scrollTimer);
        scrollTimer = setTimeout(hideScrollbar, 1000);
    });

    // Show scrollbar on mouse enter
    episodeContainer.addEventListener('mouseenter', showScrollbar);

    // Hide scrollbar on mouse leave, but only if not scrolling
    episodeContainer.addEventListener('mouseleave', () => {
        if (!scrollTimer) {
            hideScrollbar();
        }
    });

    // Make scrollbar visible when entering episodes list
    episodeContainer.addEventListener('focus', showScrollbar, true);

    // Show scrollbar when hovering over any child element
    episodeContainer.addEventListener('mouseover', (event) => {
        if (event.target !== episodeContainer) {
            showScrollbar();
        }
    });

    const listViewSwitch = document.getElementById('listViewSwitch');
    const gridViewSwitch = document.getElementById('gridViewSwitch');
    const listView = document.getElementById('listView');
    const gridView = document.getElementById('gridView');

    let listScrollPosition = 0;
    let gridScrollPosition = 0;
    let listViewInitialized = false;
    let gridViewInitialized = false;

    function setActiveView(view) {
        // Store current scroll position before switching view
        if (view === 'list') {
            gridScrollPosition = episodeContainer.scrollTop;
        } else {
            listScrollPosition = episodeContainer.scrollTop;
        }

        if (view === 'list') {
            listView.classList.remove('hidden');
            gridView.classList.add('hidden');
            listViewSwitch.classList.add('bg-{{ user.preferences.accent_colour }}-600');
            listViewSwitch.classList.remove('bg-white', 'bg-opacity-10');
            gridViewSwitch.classList.remove('bg-{{ user.preferences.accent_colour }}-600');
            gridViewSwitch.classList.add('bg-white', 'bg-opacity-10');
            
            if (!listViewInitialized) {
                scrollToActiveEpisode('list');
                listViewInitialized = true;
            } else {
                episodeContainer.scrollTop = listScrollPosition;
            }
        } else {
            gridView.classList.remove('hidden');
            listView.classList.add('hidden');
            gridViewSwitch.classList.add('bg-{{ user.preferences.accent_colour }}-600');
            gridViewSwitch.classList.remove('bg-white', 'bg-opacity-10');
            listViewSwitch.classList.remove('bg-{{ user.preferences.accent_colour }}-600');
            listViewSwitch.classList.add('bg-white', 'bg-opacity-10');
            
            if (!gridViewInitialized) {
                scrollToActiveEpisode('grid');
                gridViewInitialized = true;
            } else {
                episodeContainer.scrollTop = gridScrollPosition;
            }
        }

        localStorage.setItem('episodeViewPreference', view);
    }

    function scrollToActiveEpisode(view) {
        const activeEpisode = view === 'list' ? document.getElementById('active-episode-list') : document.getElementById('active-episode-grid');
    
        if (activeEpisode && episodeContainer) {
            const containerRect = episodeContainer.getBoundingClientRect();
            const elementRect = activeEpisode.getBoundingClientRect();
    
            const isFullyVisible = (
                elementRect.top >= containerRect.top &&
                elementRect.bottom <= containerRect.bottom
            );
    
            if (!isFullyVisible) {
                const scrollOffset = elementRect.top + episodeContainer.scrollTop - containerRect.top - (containerRect.height / 2) + (elementRect.height / 2);
                
                episodeContainer.scrollTo({
                    top: scrollOffset,
                    behavior: 'instant'
                });

                // Update the appropriate scroll position
                if (view === 'grid') {
                    gridScrollPosition = scrollOffset;
                } else {
                    listScrollPosition = scrollOffset;
                }
            }
        }
    }
    
    // Load the saved view preference from localStorage and set initial view
    const savedView = localStorage.getItem('episodeViewPreference') || 'list';
    setActiveView(savedView);

    // Scroll to active episode when the page loads and store the position
    window.addEventListener('load', () => {
        const initialView = listView.classList.contains('hidden') ? 'grid' : 'list';
        scrollToActiveEpisode(initialView);
        if (initialView === 'grid') {
            gridViewInitialized = true;
            gridScrollPosition = episodeContainer.scrollTop;
        } else {
            listViewInitialized = true;
            listScrollPosition = episodeContainer.scrollTop;
        }
    }, { once: true });
    
    // Set up view switching
    listViewSwitch.addEventListener('click', () => setActiveView('list'));
    gridViewSwitch.addEventListener('click', () => setActiveView('grid'));
</script>
<script>
    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);
    }

    window.addEventListener('DOMContentLoaded', (event) => {
        const selectedEpisode = document.getElementById('selected-episode');
        if (selectedEpisode) {
            selectedEpisode.scrollIntoView({ block: 'center' });
        }
    });

    function decodeHTMLEntities(text) {
        const textArea = document.createElement('textarea');
        textArea.innerHTML = text;
        const decodedText = textArea.value;
        textArea.remove(); // Remove the textarea from the DOM
        return decodedText;
    }

    {% if mal_data %}
    const syncToMAL = (data) => {
        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);
        });
    }


    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');

    // 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, '_');
                if (statusSelectedOption === 'completed') {
                    episodesSelect.textContent = '{{ anime.totalEpisodes }}';
                }
                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 }},
                };

                syncToMAL(data);
            }
        });
    });

    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 type="module">
{% if current_episode %}
    const introStart = {% if streaming_data.intro.start %}{{ streaming_data.intro.start }}{% else %}0{% endif %};
    const introEnd = {% if streaming_data.intro.end %}{{ streaming_data.intro.end }}{% else %}0{% endif %};
    const outroStart = {% if streaming_data.outro.start %}{{ streaming_data.outro.start }}{% else %}0{% endif %};
    const outroEnd = {% if streaming_data.outro.end %}{{ streaming_data.outro.end }}{% else %}0{% endif %};
    const skipIntroButton = document.getElementById('skipIntro');
    const skipOutroButton = document.getElementById('skipOutro');
    const introOverlay = document.getElementById('intro-overlay');
    const outroOverlay = document.getElementById('outro-overlay');
    const autoSkipIntro = {% if user.preferences.auto_skip_intro %}true{% else %}false{% endif %};
    const currentWatchTime = {{ current_watched_time }};
    
    import { VidstackPlayer, VidstackPlayerLayout, TextTrack } from 'https://cdn.vidstack.io/player';
    
    const layout = new VidstackPlayerLayout({
        {% for track in streaming_data.tracks %}
            {% if track.kind == 'thumbnails' %}
                thumbnails: "/watch/stream?url={{ track.file|urlencode }}",
            {% endif %}
        {% endfor %}
    });
    
    const player = await VidstackPlayer.create({
        target: '#video-player',
        autoStartLoad: true,
        src: "/watch/stream?url={{ stream_url|urlencode}}",
        viewType: 'video',
        streamType: 'on-demand',
        logLevel: 'warn',
        crossOrigin: true,
        playsInline: true,
        title: decodeHTMLEntities('{% 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 %} — {% if current_episode.metadata.title %}{{ current_episode.metadata.title}}{% else %}{{ current_episode.title }}{% endif %}'),
        subtitlePreference: {
            lang: 'English',
        },
        layout,
        tracks: [
            {% for track in streaming_data.tracks %}
            {% if track.kind == "captions" %}
            {
                src: '{{ track.file }}',
                label: '{{ track.label }}',
                kind: 'subtitles',
                type: 'vtt',
                lang: '{{ track.label }}',
                default: {% if track.label == "English" %}true{% else %}false{% endif %},
            },
            {% endif %}
            {% endfor %}
        ],
    });

    var chaptersLoaded = false;    
    player.addEventListener('duration-change', (event) => {
        const duration = event.detail;

        if (duration === 0 || chaptersLoaded) {
            return;
        }

        const chapters = [
            { startTime: introStart, endTime: introEnd, title: 'Intro' },
            { startTime: introEnd, endTime: outroStart, title: decodeHTMLEntities('{% 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 %} — {% if current_episode.metadata.title %}{{ current_episode.metadata.title}}{% else %}{{ current_episode.title }}{% endif %}') },
            { startTime: outroStart, endTime: outroEnd, title: 'Outro' }
        ];
    
        if (introStart > 0 && introStart < introEnd) {
            chapters.unshift({ startTime: 0, endTime: introStart, title: decodeHTMLEntities('{% 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 %} — {% if current_episode.metadata.title %}{{ current_episode.metadata.title}}{% else %}{{ current_episode.title }}{% endif %}') });
        }

        if (outroEnd > 0 && outroStart < outroEnd && duration > outroEnd) {
            chapters.push({ startTime: outroEnd, endTime: duration, title: decodeHTMLEntities('{% 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 %} — {% if current_episode.metadata.title %}{{ current_episode.metadata.title}}{% else %}{{ current_episode.title }}{% endif %}') });
        }
        
        const chaptersTrack = new TextTrack({
            kind: "chapters",
            default: true,
        });

        for (const chapter of chapters) {
            if (chapter.startTime === chapter.endTime || chapter.endTime === 0) {
                continue;
            }
            
            chaptersTrack.addCue(new VTTCue(chapter.startTime, chapter.endTime, chapter.title));
        }
        
        if (introStart === 0 && introEnd === 0 && outroStart === 0 && outroEnd === 0) {
            chaptersTrack.addCue(new VTTCue(0, duration, decodeHTMLEntities('{% 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 %} — {% if current_episode.metadata.title %}{{ current_episode.metadata.title}}{% else %}{{ current_episode.title }}{% endif %}')));    
        }

        player.textTracks.add(chaptersTrack);
        chaptersLoaded = true;

        if (currentWatchTime > 0) {
            player.currentTime = currentWatchTime;
        }
        
        const mediaProviderElememt = document.querySelector('media-player');
        const skipButtons = document.getElementById('skip-buttons');
        document.getElementById('skip-buttons').remove();
        mediaProviderElememt.appendChild(skipButtons);
    });

    const storedQuality = JSON.parse(window.localStorage.getItem('quality'));
    const storedAutoQuality = window.localStorage.getItem('autoQuality') === 'true';
    player.qualities.addEventListener('add', (event) => {
        const quality = event.detail;
        if (storedQuality && quality.height === storedQuality.height && !storedAutoQuality) {
            quality.selected = true;
        }
    });

    player.qualities.addEventListener('change', (event) => {
        const quality = event.detail;
        window.localStorage.setItem('quality', JSON.stringify(quality.current));
    });

    const { autoQuality } = player.state;
    player.subscribe(({ autoQuality }) => {
        window.localStorage.setItem('autoQuality', autoQuality);
    });
    var MALSyncUpdated = false;
    player.addEventListener('time-update', (event) => {
        const currentTime = event.detail.currentTime;

        if (currentTime >= introStart && currentTime <= introEnd && introStart !== introEnd) {
            if (autoSkipIntro) {
                player.currentTime = introEnd;
            } else {
                skipIntroButton.classList.remove('hidden');
                skipOutroButton.classList.add('hidden');
                setTimeout(() => introOverlay.classList.add('scale-x-100'), 100);
            }
        } else if (currentTime >= outroStart && currentTime <= outroEnd && outroStart !== outroEnd) {
            if (autoSkipIntro) {
                player.currentTime = outroEnd;
            } else {
                skipOutroButton.classList.remove('hidden');
                skipIntroButton.classList.add('hidden');
                setTimeout(() => outroOverlay.classList.add('scale-x-100'), 100);
            }
        } else {
            skipIntroButton.classList.add('hidden');
            skipOutroButton.classList.add('hidden');
            introOverlay.classList.remove('scale-x-100');
            outroOverlay.classList.remove('scale-x-100');
        }

        {% if user.preferences.auto_next_episode and anime_episodes.totalEpisodes > current_episode %}
        if (currentTime >= player.duration && player.duration !== 0) {
            const currentUrl = window.location.href;
            const animeId = {{ anime_id }};
            const currentEpisode = {{ current_episode }};
            const nextEpisode = currentEpisode + 1;
            const nextUrl = currentUrl.replace(`/watch/${animeId}/${currentEpisode}`, `/watch/${animeId}/${nextEpisode}`);
            window.location.href = nextUrl;
        }
        {% endif %}

        /// If 80% watched and smart MAL sync on, update user MAL list automatically
        {% if user.preferences.smart_mal_sync and mal_data %}
        
        const percentageWatched = (currentTime / player.duration) * 100;
        if (percentageWatched >= 80 && !MALSyncUpdated) {
            MALSyncUpdated = true;
            const currentEpisode = {{ current_episode_number }};
            const totalEpisodes = {{ anime.totalEpisodes }};
            const status = currentEpisode === totalEpisodes ? 'completed' : 'watching';
            const MALListStatus = "{{ mal_data.my_list_status.status }}";
            const alreadyCompleted = MALListStatus === 'completed';
            
            if (alreadyCompleted) {
                return;
            }
            
            const MALEpisodesWatched = {% if mal_data.my_list_status.num_episodes_watched %}{{ mal_data.my_list_status.num_episodes_watched }}{% else %}0{% endif %};
            if (currentEpisode <= MALEpisodesWatched) {
                return;
            }

            const MALScore = {% if mal_data.my_list_status.score %}{{ mal_data.my_list_status.score }}{% else %}0{% endif %};
            const score = MALScore > 0 ? MALScore : 0;
            
            const data = {
                'status': status,
                'score': score,
                'episodes': currentEpisode,
                'mal_id': {{ mal_data.id }},
            };
            
            syncToMAL(data);

            // Update Text Values of Selects
            const statusSelect = document.getElementById('status');
            const scoreSelect = document.getElementById('score');
            const episodesSelect = document.getElementById('episodes');

            statusSelect.textContent = status.charAt(0).toUpperCase() + status.slice(1).replace(/_/g, ' ');
            scoreSelect.textContent = score;
            episodesSelect.textContent = currentEpisode;
        }
        {% endif %}
    });

    skipIntroButton.addEventListener('click', () => {
        player.currentTime = introEnd;
        introOverlay.classList.remove('scale-x-100');
    });

    skipOutroButton.addEventListener('click', () => {
        player.currentTime = outroEnd;
        outroOverlay.classList.remove('scale-x-100');
    });

    {% if user.preferences.auto_play_video %}
    function attemptPlayback() {
        player.play().catch((error) => {
            console.error('Autoplay failed:', error);
        });
    }
    function onUserInteraction() {
        document.removeEventListener('pointerdown', onUserInteraction);
        attemptPlayback();
    }
    document.addEventListener('pointerdown', onUserInteraction, { once: true });
    player.addEventListener('can-play', () => {
        attemptPlayback();
    });
    {% endif %}

    let lastTime = 0;
    setInterval(() => {
        const {
            paused,
            playing,
            waiting,
            currentTime,
        } = player.state;
        if (paused || waiting) {
            lastTime = currentTime;
        }
        if (paused || waiting || currentTime === lastTime) {
            return;
        }
        fetch('{% url "watch:update_watch_history" %}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token }}'
            },
            body: JSON.stringify({
                'anime': {{ animeID }},
                'episode': {{ current_episode_number }},
                'time_watched': parseInt(player.currentTime)
            })
        });

        lastTime = currentTime;
    }, 30000);
{% endif %}
</script>
<script>
{% if should_preload %}
    // If current episode is less than total episodes, preload the next episode
    const nextEpisode = {{ current_episode_number }} + 1;
    let nextEpisodeUrl = window.location.href.replace(`/watch/{{animeID}}/{{ current_episode_number }}`, `/watch/{{animeID}}/${nextEpisode}`);
    nextEpisodeUrl = new URL(nextEpisodeUrl);
    nextEpisodeUrl.searchParams.set('preload', 'true');
    fetch(nextEpisodeUrl.href);
{% endif %}
</script>
{% endblock scripts %}