{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: 'FusionObjects/LanguageNavigation', 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">

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

    <ul id="lang-navigation" class="c-language-navigation__dropdown">
        <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">
                                <a aria-current="true" class="c-language-navigation__link" lang="{item.dimensions.language.0}">
                                    <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">
                                <a class="c-language-navigation__link" href="{item.url}" lang="{item.dimensions.language.0}">
                                    {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">
                                        <a aria-current="true" class="c-language-navigation__link">
                                            <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">
                                        <neos:link.node node="{item.node}"
                                                        lang="{item.targetDimensions.language.value}"
                                                        class="c-language-navigation__link">

                                            <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>
