{namespace neos=Neos\Neos\ViewHelpers}

<nav class="c-language-navigation {modifier}">
    <span id="language-navigation-label" class="visually-hidden">
        {f:translate(id: 'word.languageNavigation', source: 'Main', package: 'Newland.CityTheme')}
    </span>

    <button class="c-language-navigation__button"
            data-target-enhancement
            data-target-enhancement-targets.0="#lang-navigation"
            data-target-enhancement-plugins.0.name="toggle-aria-expanded"
            aria-haspopup="true"
            aria-expanded="false"
            aria-labelledby="language-navigation-label"
            tabindex="3"
    >

        <f:if condition="{languageLogo}">
            <f:then>
                <svg class="c-icon"
                    aria-hidden="true"
                    focusable="false">
                    <use xlink:href="#flag-{node.context.dimensions.language.0}"/>
                </svg>
            </f:then>
            <f:else>
                <svg class="c-icon"
                    aria-hidden="true"
                    focusable="false">
                    <use xlink:href="#icon-globe"/>
                </svg>
            </f:else>
        </f:if>
        <span>
            {node.context.dimensions.language.0}
        </span>
    </button>

    <ul id="lang-navigation" class="c-language-navigation__dropdown" role="menu">
        <f:for each="{items}" as="item">
            <f:if condition="{item.url}">
                <f:then>
                    <f:if condition="{item.state} == 'current'">
                        <f:then>
                            <li class="c-language-navigation__item" role="menuitem">
                                <a aria-current="true" class="c-language-navigation__link" lang="{item.dimensions.language.0}">

                                    <f:if condition="{languageLogo}">
                                        <svg class="c-icon">
                                            <use xlink:href="#flag-{node.context.targetDimensions.language}" />
                                        </svg>
                                    </f:if>
                                    <f:translate id="language.{node.context.targetDimensions.language}"
                                                    package="Newland.CityTheme"
                                                    source="Main" />
                                </a>
                            </li>
                        </f:then>
                        <f:else>
                            <li class="c-language-navigation__item" role="menuitem">
                                <a class="c-language-navigation__link" href="{item.url}" data-language-navigation-item lang="{item.dimensions.language.0}">
                                    <f:if condition="{languageLogo}">
                                        <svg class="c-icon">
                                            <use xlink:href="#flag-{item.dimensions.language.0}" />
                                        </svg>
                                    </f:if>
                                    {item.label}
                                </a>
                            </li>
                        </f:else>
                    </f:if>
                </f:then>
                <f:else>
                    <f:if condition="{item.node}">
                        <f:then>
                            <f:if condition="{item.state} == 'current'">
                                <f:then>
                                    <li class="c-language-navigation__item" role="menuitem">
                                        <a aria-current="true" class="c-language-navigation__link">
                                            <f:if condition="{languageLogo}">
                                                <svg class="c-icon">
                                                    <use xlink:href="#flag-{node.context.targetDimensions.language}" />
                                                </svg>
                                            </f:if>
                                            <f:translate id="language.{node.context.targetDimensions.language}"
                                                            package="Newland.CityTheme"
                                                            source="Main" />
                                        </a>
                                    </li>
                                </f:then>
                                <f:else>
                                    <li class="c-language-navigation__item" role="menuitem">
                                        <neos:link.node node="{item.node}"
                                                        lang="{item.targetDimensions.language.value}"
                                                        class="c-language-navigation__link"
                                                        additionalAttributes="{'data-language-navigation-item': ''}">

                                            <f:if condition="{languageLogo}">
                                                <svg class="c-icon">
                                                    <use xlink:href="#flag-{item.dimensions.language.0}" />
                                                </svg>
                                            </f:if>

                                            <f:translate id="language.{item.dimensions.language.0}"
                                                            package="Newland.CityTheme"
                                                            source="Main" />

                                        </neos:link.node>
                                    </li>
                                </f:else>
                            </f:if>
                        </f:then>
                    </f:if>
                </f:else>
            </f:if>
        </f:for>
    </ul>
</nav>
