{% load wagtailcore_tags i18n %}

<div x-data="{ isOpen: false, currentLanguage: '{{ page.locale.language_code | upper }}' }"
     x-cloak
     class="relative flex items-center">
    <button @click="isOpen = !isOpen"
            class="text-base-100 flex items-center py-2 px-3 text-md capitalize rounded-full focus:outline-hidden focus:ring-3 bg-base-200/25 hover:bg-base-300 transition-all ease-out duration-200 text-base-content hover:text-secondary"
            :class="isHomepage && !isScrolled ? 'text-white text-md' : (isScrolled ? 'text-sm' : 'text-md')"
            aria-haspopup="true" aria-expanded="false" aria-label="Select language">
        <!-- language Icon (Heroicon) -->
        <svg class="transition-all ease-out duration-200" :class="isScrolled ? 'w-4 h-4' : 'w-5 h-5'" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 512 512">
            <path fill="currentColor" d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"></path>
        </svg>

        <!-- current Language Name -->
        <span x-text="currentLanguage" aria-hidden="true" class="ml-2"></span>

        <!-- Arrow-down Icon (Heroicon) -->
        <svg x-show="!isOpen" class="h-5 w-5 ml-2" xmlns="http://www.w3.org/2000/svg" fill="none"
             viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7"></path>
        </svg>
        <svg x-show="isOpen" class="h-5 w-5 ml-2" xmlns="http://www.w3.org/2000/svg" fill="none"
             viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"></path>
        </svg>
    </button>

    <!-- Language Dropdown List Locale Selector -->
    <ul x-show="isOpen" @click.outside="isOpen = false"
        class="absolute border rounded-full top-full mt-1 right-0 left-auto text-base-content bg-base-300 hover:text-secondary"
        x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95">
        {% if page %}
            {% for translation in page.get_translations.live %}
                <li @click="currentLanguage = '{{ translation.locale.language_code | upper }}'; isOpen = false">
                    <a href="{% pageurl translation %}" rel="alternate"
                       hreflang="{{ translation.locale.language_code }}"
                       class="block px-4 py-2 text-md ">
                        {{ translation.locale.language_name_local | capfirst }}
                    </a>
                </li>
            {% endfor %}
        {% endif %}
    </ul>
</div>