{% if not request.user.mal_access_token %}
{% load static %}
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-8 flex flex-col justify-center">
    <img loading="lazy" src="{% static 'images/added-to-list.gif' %}" alt="added to list" class="mx-auto"/>
    <p class="text-gray-400 text-center mt-2 text-sm">
        Your MAL list is not connected to your account yet. Connect your MAL account to see your list here.
    </p>
    <a href="{{ mal_auth_uri }}" class="text-white font-bold px-4 rounded-full inline-flex items-center gap-2 mt-4 mx-auto bg-blue-500 hover:bg-blue-700">
        <svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="2.4rem" width="2.4rem" 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>
        <span>Connect with MAL</span>
    </a>
</div>
{% else %}
<section class="flex flex-col lg:flex-row gap-2 justify-between my-4">
    {% if prev_offset %}
        <a href="{% url 'user_profile:user_profile' %}?category=anime_list&offset={{ prev_offset }}{% if filter %}&filter={{ filter }}{% endif %}" class="bg-{{ user.preferences.accent_colour }}-600 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2">
            <span>Load Previous</span>
        </a>
    {% else %}
        <a class="bg-{{ user.preferences.accent_colour }}-600 bg-opacity-20 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2 cursor-not-allowed">
            <span>Load Previous</span>
        </a>
    {% endif %}
    <div class="flex flex-row">
        <div class="flex flex-row items-center gap-2">
            <span class="font-bold">Filter:</span>
            <div class="relative w-64 custom-select text-sm" data-select="list_filter">
                <div class="select-none cursor-pointer bg-neutral-900 py-2 px-4 pr-8 rounded leading-tight focus:outline-none capitalize" id="list_filter">
                    {% if filter == "completed" %}
                        completed
                    {% elif filter == "watching" %}
                        watching
                    {% elif filter == "on_hold" %}
                        on hold
                    {% elif filter == "dropped" %}
                        dropped
                    {% elif filter == "plan_to_watch" %}
                        plan to watch
                    {% else %}
                        all
                    {% 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" id="list_filter_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="all">all</div>
                        <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>

    {% if next_offset %}
        <a href="{% url 'user_profile:user_profile' %}?category=anime_list&offset={{ next_offset }}{% if filter %}&filter={{ filter }}{% endif %}" class="bg-{{ user.preferences.accent_colour }}-600 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2">
            <span>Load Next</span>
        </a>
    {% else %}
        <a class="bg-{{ user.preferences.accent_colour }}-600 bg-opacity-20 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2 cursor-not-allowed">
            <span>Load Next</span>
        </a>
    {% endif %}
</section>
<section class="flex flex-wrap justify-center mt-4 animate__animated animate__slideInUp">
{% for anime in mal_list %}
    <a href="{% url 'user_profile:user_profile' %}?category=update&mal_id={{ anime.node.id }}" class="w-1/2 lg:w-1/4 xl:w-1/6 text-gray-500 px-1 mb-4 hover:text-white flex flex-col gap-2">
        <img loading="lazy" src="{{ anime.node.main_picture.large }}" alt="{{ anime.node.title }}" class="rounded-lg w-56 h-72 mx-auto object-cover"/>
        <div class="inline-flex gap-2 flex-wrap">
            <span class="text-xs font-bold bg-white bg-opacity-10 p-1 rounded flex items-center gap-1 capitalize">
                <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>
                {% if anime.node.my_list_status.status == "watching" %}
                    Watching
                {% elif anime.node.my_list_status.status == "completed" %}
                    Completed
                {% elif anime.node.my_list_status.status == "on_hold" %}
                    On Hold
                {% elif anime.node.my_list_status.status == "dropped" %}
                    Dropped
                {% elif anime.node.my_list_status.status == "plan_to_watch" %}
                    Plan to Watch
                {% endif %}
            </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" 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.node.my_list_status.num_episodes_watched }}
            </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" 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.node.my_list_status.score }}
            </span>
        </div>
        <span class="text-sm font-bold flex gap-1 flex-row items-start">
            {% if anime.status == "Ongoing" %}
                <span class="text-green-500 pt-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
                    <circle cx="12" cy="12" r="12" />
                </svg>                
                </span>
            {% elif anime.status == "Not yet aired" %}
                <span class="text-yellow-500 pt-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
                    <circle cx="12" cy="12" r="12" />
                </svg>
                </span>
            {% else %}
                <span class="text-blue-500 pt-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-3">
                    <circle cx="12" cy="12" r="12" />
                </svg>
                </span>
            {% endif %}
            <span>
                {% if user.preferences.title_language == "english" and anime.node.alternative_titles and anime.node.alternative_titles.en %}
                {{ anime.node.alternative_titles.en }}
                {% elif user.preferences.title_language == "native" and anime.node.alternative_titles and anime.node.alternative_titles.ja %}
                {{ anime.node.alternative_titles.ja }}
                {% else %}
                {{ anime.node.title }}
                {% endif %}
            </span>
        </span>
    </a>
{% endfor %}
</section>
<section class="flex flex-row justify-between my-4">
    {% if prev_offset %}
        <a href="{% url 'user_profile:user_profile' %}?category=anime_list&offset={{ prev_offset }}{% if filter %}&filter={{ filter }}{% endif %}" class="bg-{{ user.preferences.accent_colour }}-600 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2">
            <span>Load Previous</span>
        </a>
    {% else %}
        <a class="bg-{{ user.preferences.accent_colour }}-600 bg-opacity-20 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2 cursor-not-allowed">
            <span>Load Previous</span>
        </a>
    {% endif %}
    {% if next_offset %}
        <a href="{% url 'user_profile:user_profile' %}?category=anime_list&offset={{ next_offset }}{% if filter %}&filter={{ filter }}{% endif %}" class="bg-{{ user.preferences.accent_colour }}-600 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2">
            <span>Load Next</span>
        </a>
    {% else %}
        <a class="bg-{{ user.preferences.accent_colour }}-600 bg-opacity-20 text-sm font-bold py-3 px-6 rounded-full flex items-center gap-2 cursor-not-allowed">
            <span>Load Next</span>
        </a>
    {% endif %}
</section>
{% endif %}
{% block scripts %}
<script>
    // On change of list_filter text content
    const listFilter = document.getElementById('list_filter');

    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'characterData' || mutation.type === 'childList') {
                // console.log(listFilter.textContent);
                const selectedOption = listFilter.textContent.trim().toLowerCase().replace(/\s/g, '_');
                // refresh the page with the selected filter
                const currentLocation = new URL(window.location.href);
                currentLocation.searchParams.set('filter', selectedOption);
                window.location.href = currentLocation.href;
            }
        });
    });

    observer.observe(listFilter, {
        characterData: true,
        childList: true,
        subtree: true
    });
</script>
{% endblock scripts %}