{namespace nlutils=NL\NlUtils\ViewHelpers}

{v:iterator.filter(subject: '{nlutils:languageMenu()}', propertyName: 'active' , filter: 1) -> v:variable.set(name: 'activeLanguage')}
{v:iterator.filter(subject: '{nlutils:languageMenu()}', propertyName: 'active' , nullFilter: 1) -> v:iterator.filter(propertyName: 'hreflang' , filter: 'zh-CN', invert: 1) -> v:variable.set(name: 'languages')}

<f:switch expression="{activeLanguage.0.hreflang}">
    <f:case value="de-AT">
        <f:variable name="languageCode" value="at" />
    </f:case>
    <f:defaultCase>
        <f:variable name="languageCode" value="{activeLanguage.0.twoLetterIsoCode}" />
    </f:defaultCase>
</f:switch>

<f:if condition="{showOnlineCatalogueMenu}">
    <f:then>
        <button 
        type="button" 
        data-tracking-id="language menu"
        @click.stop="isVisible = !isVisible" 
        aria-label="{f:translate(key:'switch_language_text')}"
        class="text-white hover:text-brand lg:font-bold relative flex items-center justify-center w-12 h-12 md:w-[52px] md:h-[52px] lg:w-[60px] lg:h-[60px] transition-all duration-300 rounded-lg lg:hover:bg-grey-light lg:hover:before:bg-brand lg:hover:before:opacity-100 before:transition-all before:duration-300 before:block before:h-[2px] before:bg-blue-light-2 before:w-[22px] before:absolute before:bottom-0 before:opacity-0 uppercase cursor-pointer" 
        :class="{'bg-brand before:opacity-100 lg:hover:bg-brand': isVisible}"
        >
            {languageCode}
        </button>
    </f:then>
    <f:else>
        <button 
        type="button" 
        data-tracking-id="language menu"
        @click.stop="isVisible = !isVisible" 
        aria-label="{f:translate(key:'switch_language_text')}"
        class="relative flex items-center justify-center w-12 h-12 md:w-[52px] md:h-[52px] lg:w-[60px] lg:h-[60px] transition-all duration-300 rounded-lg lg:hover:bg-grey-light lg:hover:before:bg-brand lg:hover:before:opacity-100 before:transition-all before:duration-300 before:block before:h-[2px] before:bg-blue-light-2 before:w-[22px] before:absolute before:bottom-0 before:opacity-0 uppercase cursor-pointer" 
        :class="{'bg-brand text-white before:opacity-100 lg:hover:bg-brand': isVisible}"
        >
            {languageCode}
        </button>    
    </f:else>
</f:if>

<ul class="overflow-hidden list-none p-0 flex flex-col items-center transition-all duration-300 bg-white absolute w-12 md:w-[52px] lg:w-[60px] shadow-standard-grey rounded-lg" 
    data-tracking-id="language menu"
    id="language-menu"
    x-show="isVisible"
    x-cloak
    x-transition.opacity>
    <f:for each="{languages}" as="language">
       
        <f:switch expression="{language.hreflang}">
            <f:case value="de-AT">
                <f:variable name="languageCode" value="at" />
            </f:case>
            <f:defaultCase>
                <f:variable name="languageCode" value="{language.twoLetterIsoCode}" />
            </f:defaultCase>
        </f:switch>

        <li x-cloak>    
            <f:if condition="{language.available}">
                <f:then>
                    <a class="py-4 px-6 block uppercase transition-all text-black duration-300 hover:bg-grey-light {f:if(condition: language.active, then: 'active')}" href="{language.link -> nl:stripQueryString()}">{languageCode}</a>
                </f:then>
                <f:else>
                    <a class="py-4 px-6 block uppercase cursor-default text-grey-medium">{languageCode}</a>
                </f:else>
            </f:if>
        </li>
    </f:for>
</ul>