{% 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"/>
{% endblock css %}
{% block content %}
<div style="background-image: url('{{ manga.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="{{ manga.image }}" alt="{{ manga.title.english }}" class="rounded-lg" class="w-full h-full rounded-lg object-cover"/>
        <a href="#" 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>Read Now</span>
        </a>
        <div class="flex flex-row gap-2 my-2">
            <a href="https://anilist.co/anime/{{ manga.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/{{ manga.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>{{ manga.type }}
            </div>
            <div>
                <span class="font-bold">Chapters: </span>{{ manga.chapters|length }}
            </div>
            <div>
                <span class="font-bold">Year: </span>{{ manga.releaseDate }}
            </div>
            <div>
                <span class="font-bold">Status: </span>{{ manga.status }}
            </div>
            <div>
                <span class="font-bold">Rating: </span>{{ manga.rating }} / 100
            </div>
            {% if manga.studios %}
            <div class="sm:col-span-2 lg:col-span-3">
                <span class="font-bold">Studios: </span>
                {% for studio in manga.studios %}
                    <span>{{ studio }}</span>{% if not forloop.last %}, {% endif %}
                {% endfor %}
            </div>
            {% endif %}
        </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 manga.color %}style="background-color: {{ manga.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>
                {{ manga.type }}
            </span>
            <span {% if manga.color %}style="background-color: {{ manga.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>              
                {{ manga.releaseDate }}
            </span>
            <span {% if manga.color %}style="background-color: {{ manga.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 manga.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 manga.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 %}          
                {{ manga.status }}
            </span>
            <span {% if manga.color %}style="background-color: {{ manga.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>
                {{ manga.rating }}
            </span>
            <span class="text-xs sm:text-sm font-bold flex gap-2 flex-row flex-wrap items-center">
                {% for genre in manga.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 manga.color %}{{ manga.color }}{% else %}white{% endif %}, white); -webkit-background-clip: text; background-clip: text;">
            {% if user.preferences.title_language == "english" and manga.title.english %}
            {{ manga.title.english }}
            {% elif user.preferences.title_language == "native" and manga.title.native %}
            {{ manga.title.native }}
            {% else %}
            {{ manga.title.romaji }}
            {% endif %}
        </h2>
        <p class="h-96 lg:max-h-24 overflow-auto my-2 text-sm text-white no-scrollbar">
            {{ manga.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 %}
        
        <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="chapters">
                <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>Chapters</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 manga.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="chapters" class="w-full flex-wrap flex justify-start max-h-[540px] overflow-auto">
                {% for chapter in manga.chapters %}
                <a href="{% url "read:read" manga.id chapter.id %}" class="w-full px-2 mb-2 flex flex-row gap-4 justify-between items-center bg-white bg-opacity-10 p-2 rounded hover:bg-{{ user.preferences.accent_colour }}-600 hover:bg-opacity-30 mb-2">
                    {% if chapter.attributes.title %}
                    <span class="font-bold">{{ chapter.attributes.chapter }}. {{ chapter.attributes.title }}</span>
                    {% else %}
                    <span class="font-bold">Chapter {{ forloop.counter }}</span>
                    {% endif %}
                </a>
                {% endfor %}
                {% if not manga.chapters %}
                <div class="w-full h-96 flex flex-col gap-2 items-center justify-center">
                    <p>No Chapters Available</p>
                </div>
                {% endif %}
            </section>
            <section id="trailer" class="w-full hidden">
                {% if manga.trailer and manga.trailer.site == "youtube" %}
                <iframe src="https://www.youtube.com/embed/{{ manga.trailer.id }}" title="{{ manga.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.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 href="{% 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" %}{% url 'detail:anime' recommendation.id %}{% elif recommendation.type == "MANGA" or recommendation.type == "NOVEL" %}{% url 'detail:manga' recommendation.id %}{% else %}{% url 'detail:manga' recommendation.id %}{% 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 %}
                            {% if recommendation.chapters %}
                            <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.chapters }}
                            </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("chapters"), 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>
{% endblock scripts %}