{% extends "partials/base.html" %}
{% block content %}
<div class="bg-white bg-opacity-10 rounded-lg bg-center bg-cover h-96 relative mt-4" {% if request.user.discord_banner %} style="background-image: url('https://cdn.discordapp.com/banners/{{ request.user.discord_id }}/{{ request.user.discord_banner }}?size=1024')" {% else %} style="background-image: url('https://giffiles.alphacoders.com/132/13250.gif')" {% endif %}>
    <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 items-center gap-2 absolute bottom-0 left-10">
        <img loading="lazy" src="https://cdn.discordapp.com/avatars/{{ request.user.discord_id }}/{{ request.user.discord_avatar }}?size=256" alt="avatar" class="rounded-full w-24 h-24">
        <h1 class="text-2xl font-bold">
            {% if request.user.preferences.display_guild_name_instead_of_username and request.user.discord_guild_name %}
              {{ request.user.discord_guild_name }}
            {% elif request.user.discord_global_name%}
              {{ request.user.discord_global_name }}
            {% else %}
              {{ request.user.username }}
            {% endif %}
        </h1>
    </div>
    <a href="{% url "auth:logout" %}" class="bg-white bg-opacity-10 text-white text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2 absolute bottom-10 right-10">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
            <path fill-rule="evenodd" d="M14.47 2.47a.75.75 0 0 1 1.06 0l6 6a.75.75 0 0 1 0 1.06l-6 6a.75.75 0 1 1-1.06-1.06l4.72-4.72H9a5.25 5.25 0 1 0 0 10.5h3a.75.75 0 0 1 0 1.5H9a6.75 6.75 0 0 1 0-13.5h10.19l-4.72-4.72a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
        </svg>          
        Logout
      </a>
</div>
<section class="w-full flex flex-col max-w-7xl mx-auto my-4 p-2">
    <section class="inline-flex w-max flex-row rounded-full bg-white bg-opacity-10 mx-auto">
        <a class="flex flex-row items-center focus:outline-none gap-2 text-sm font-bold py-2 px-4 rounded-full {% if req_category == "preferences" %}bg-{{ user.preferences.accent_colour }}-600{% endif %}" href="{% url "user_profile:user_profile" %}?category=preferences">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
                <path d="M18.75 12.75h1.5a.75.75 0 0 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM12 6a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 6ZM12 18a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 12 18ZM3.75 6.75h1.5a.75.75 0 1 0 0-1.5h-1.5a.75.75 0 0 0 0 1.5ZM5.25 18.75h-1.5a.75.75 0 0 1 0-1.5h1.5a.75.75 0 0 1 0 1.5ZM3 12a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 3 12ZM9 3.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM12.75 12a2.25 2.25 0 1 1 4.5 0 2.25 2.25 0 0 1-4.5 0ZM9 15.75a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Z" />
            </svg>
            <span>Preferences</span>
        </a>
        <a class="flex flex-row items-center focus:outline-none gap-2 text-sm font-bold py-2 px-4 rounded-full {% if req_category == "anime_list" %}bg-{{ user.preferences.accent_colour }}-600{% endif %}" href="{% url "user_profile:user_profile" %}?category=anime_list">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4">
                <path d="M19.5 6h-15v9h15V6Z" />
                <path fill-rule="evenodd" d="M3.375 3C2.339 3 1.5 3.84 1.5 4.875v11.25C1.5 17.16 2.34 18 3.375 18H9.75v1.5H6A.75.75 0 0 0 6 21h12a.75.75 0 0 0 0-1.5h-3.75V18h6.375c1.035 0 1.875-.84 1.875-1.875V4.875C22.5 3.839 21.66 3 20.625 3H3.375Zm0 13.5h17.25a.375.375 0 0 0 .375-.375V4.875a.375.375 0 0 0-.375-.375H3.375A.375.375 0 0 0 3 4.875v11.25c0 .207.168.375.375.375Z" clip-rule="evenodd" />
            </svg>                
            <span>Anime List</span>
        </a>
    </section>
    {% if req_category == "anime_list" %}
        {% include "user_profile/user_anime_list.html" %}
    {% elif req_category == "update" %}
        {% include "user_profile/single_anime_update.html" %}
    {% else %}
        {% include "user_profile/user_preferences.html" %}
    {% endif %}
</section>
{% endblock content %}
{% block scripts %}
<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);
    }

    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');
            }
        });
    });
</script>
{% endblock scripts %}