{namespace neos=Neos\Neos\ViewHelpers}
{namespace ts=Neos\Fusion\ViewHelpers}

<f:if condition="{centerLogoInMenu}">
    <f:then>
        <ul class="c-main-menu c-main-menu--centered-logo" data-main-menu>
            <f:for each="{items}" as="item" iteration="iterator">
                <f:if condition="{iterator.cycle} <= 2">
                    <li class="c-main-menu__item">
                        <div class="c-main-menu__link-wrapper">
                            <f:if condition="{item.node.properties.openInNewTab}">
                                <f:then>
                                    <f:if condition="{item.node.properties.showLinkPopup}">
                                        <f:then>
                                            <div
                                                class="c-main-menu__link {f:if(condition: '{enableActiveState}', then: item.state)}"
                                                data-target-enhancement
                                                data-target-enhancement-targets.0="[data-link-popup-{item.node.identifier}]"
                                                data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                                data-target-enhancement-exclusive-group="link-popup"
                                            >

                                               {item.label}
                                            </div>
                                            <f:render partial="LinkPopUp" arguments="{_all}" />
                                        </f:then>
                                        <f:else>
                                            <neos:link.node node="{item.node}" class="c-main-menu__link {f:if(condition: '{enableActiveState}', then: item.state)}" target="_blank">
                                                {item.label}
                                            </neos:link.node>
                                        </f:else>
                                    </f:if>
                                </f:then>
                                <f:else>
                                    <f:if condition="{item.node.properties.showLinkPopup}">
                                        <f:then>
                                            <div
                                                class="c-main-menu__link {f:if(condition: '{enableActiveState}', then: item.state)}"
                                                data-target-enhancement
                                                data-target-enhancement-targets.0="[data-link-popup-{item.node.identifier}]"
                                                data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                                data-target-enhancement-exclusive-group="link-popup"
                                            >

                                               {item.label}
                                            </div>
                                            <f:render partial="LinkPopUp" arguments="{_all}" />
                                        </f:then>
                                        <f:else>
                                            <neos:link.node node="{item.node}" class="c-main-menu__link {f:if(condition: '{enableActiveState}', then: item.state)}">
                                                {item.label}
                                            </neos:link.node>
                                        </f:else>
                                    </f:if>
                                </f:else>
                            </f:if>

                            <f:if condition="{item.subItems}">
                                <button class="c-main-menu__subnav-toggle"
                                        data-target-enhancement
                                        data-target-enhancement-targets.0="#main-submenu-{iterator.cycle}"
                                        data-target-enhancement-exclusive-group="subnavigation"
                                        data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                        aria-expanded="false">

                                    <span class="visually-hidden">
                                        Subnavigation umschalten
                                    </span>

                                    <svg class="c-icon c-icon--menu-closed"
                                        aria-labelledby="main-submenu-{iterator.cycle}"
                                        role="img">

                                        <use xlink:href="#icon-angle-down"/>
                                    </svg>
                                </button>
                            </f:if>
                        </div>

                        <f:if condition="{item.subItems}">
                            <f:render section="secondLevel" arguments="{parent: item, items: item.subItems, counter: iterator.cycle, enableActiveState: enableActiveState, enableThirdMenuLayer: enableThirdMenuLayer, burgerMenuLayout: burgerMenuLayout}"  />
                        </f:if>
                    </li>
                </f:if>
            </f:for>
        </ul>

        <neos:link.node node="~" class="c-site-header__logo c-site-header__logo--centered" title="{f:translate(id: 'word.toHomepage', source: 'Main', package: 'Newland.CityTheme')}">
            <f:if condition="{showHero} && {logoWhite} || {isFrontPage} && {logoWhite}">
                <f:then>
                    <img
                        class="c-site-header__logo-image c-site-header__logo-image--white"
                        src="{neos.media:uri.image(image: logoWhite)}"
                        alt="{pageTitle}">
                    <img
                        class="c-site-header__logo-image c-site-header__logo-image--colored"
                        src="{neos.media:uri.image(image: logo)}"
                        alt="{pageTitle}">
                </f:then>
                <f:else>
                    <img
                        class="c-site-header__logo-image"
                        src="{neos.media:uri.image(image: logo)}"
                        alt="{pageTitle}">
                </f:else>
            </f:if>
        </neos:link.node>

        <ul class="c-main-menu" data-main-menu>
            <f:for each="{items}" as="item" iteration="iterator">
                <f:if condition="{iterator.cycle} <= 4 && {iterator.cycle} >= 3">
                    <li class="c-main-menu__item">
                        <div class="c-main-menu__link-wrapper">
                            <f:if condition="{item.node.properties.openInNewTab}">
                                <f:then>
                                    <f:if condition="{item.node.properties.showLinkPopup}">
                                        <f:then>
                                            <div
                                                class="c-main-menu__link {f:if(condition: '{enableActiveState}', then: item.state)}"
                                                data-target-enhancement
                                                data-target-enhancement-targets.0="[data-link-popup-{item.node.identifier}]"
                                                data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                                data-target-enhancement-exclusive-group="link-popup"
                                            >

                                               {item.label}
                                            </div>
                                            <f:render partial="LinkPopUp" arguments="{_all}" />
                                        </f:then>
                                        <f:else>
                                            <neos:link.node node="{item.node}" class="c-main-menu__link {f:if(condition: '{enableActiveState}', then: item.state)}" target="_blank">
                                                {item.label}
                                            </neos:link.node>
                                        </f:else>
                                    </f:if>
                                </f:then>
                                <f:else>
                                    <f:if condition="{item.node.properties.showLinkPopup}">
                                        <f:then>
                                            <div
                                                class="c-main-menu__link {f:if(condition: '{enableActiveState}', then: item.state)}"
                                                data-target-enhancement
                                                data-target-enhancement-targets.0="[data-link-popup-{item.node.identifier}]"
                                                data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                                data-target-enhancement-exclusive-group="link-popup"
                                            >

                                               {item.label}
                                            </div>
                                            <f:render partial="LinkPopUp" arguments="{_all}" />
                                        </f:then>
                                        <f:else>
                                            <neos:link.node node="{item.node}" class="c-main-menu__link {f:if(condition: '{enableActiveState}', then: item.state)}">
                                                {item.label}
                                            </neos:link.node>
                                        </f:else>
                                    </f:if>
                                </f:else>
                            </f:if>

                            <f:if condition="{item.subItems}">
                                <button class="c-main-menu__subnav-toggle"
                                        data-target-enhancement
                                        data-target-enhancement-targets.0="#main-submenu-{iterator.cycle}"
                                        data-target-enhancement-exclusive-group="subnavigation"
                                        data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                        aria-expanded="false">

                                    <span class="visually-hidden">
                                        Subnavigation umschalten
                                    </span>

                                    <svg class="c-icon c-icon--menu-closed"
                                        aria-labelledby="main-submenu-{iterator.cycle}"
                                        role="img">

                                        <use xlink:href="#icon-angle-down"/>
                                    </svg>
                                </button>
                            </f:if>
                        </div>

                        <f:if condition="{item.subItems}">
                            <f:render section="secondLevel" arguments="{parent: item, items: item.subItems, counter: iterator.cycle, enableActiveState: enableActiveState, enableThirdMenuLayer: enableThirdMenuLayer, burgerMenuLayout: burgerMenuLayout}"  />
                        </f:if>
                    </li>
                </f:if>
            </f:for>
        </ul>
    </f:then>
    <f:else>
        <ul class="c-main-menu" data-main-menu>
            <f:for each="{items}" as="item" iteration="iterator">
                <f:if condition="{iterator.cycle} <= {burgerMenuItems}">
                    <li class="c-main-menu__item">
                        <div class="c-main-menu__link-wrapper">
                            <f:if condition="{item.node.properties.openInNewTab}">
                                <f:then>
                                    <f:if condition="{item.node.properties.showLinkPopup}">
                                        <f:then>
                                            <div
                                                class="c-main-menu__link {f:if(condition: '{enableActiveState}', then: item.state)}"
                                                data-target-enhancement
                                                data-target-enhancement-targets.0="[data-link-popup-{item.node.identifier}]"
                                                data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                                data-target-enhancement-exclusive-group="link-popup"
                                            >

                                               {item.label}
                                            </div>
                                            <f:render partial="LinkPopUp" arguments="{_all}" />
                                        </f:then>
                                        <f:else>
                                            <neos:link.node node="{item.node}" class="c-main-menu__link {f:if(condition: '{enableActiveState}', then: item.state)}" target="_blank">
                                                {item.label}
                                            </neos:link.node>
                                        </f:else>
                                    </f:if>
                                </f:then>
                                <f:else>
                                    <f:if condition="{item.node.properties.showLinkPopup}">
                                        <f:then>
                                            <div
                                                class="c-main-menu__link {f:if(condition: '{enableActiveState}', then: item.state)}"
                                                data-target-enhancement
                                                data-target-enhancement-targets.0="[data-link-popup-{item.node.identifier}]"
                                                data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                                data-target-enhancement-exclusive-group="link-popup"
                                            >

                                               {item.label}
                                            </div>
                                            <f:render partial="LinkPopUp" arguments="{_all}" />
                                        </f:then>
                                        <f:else>
                                            <neos:link.node node="{item.node}" class="c-main-menu__link {f:if(condition: '{enableActiveState}', then: item.state)}">
                                                {item.label}
                                            </neos:link.node>
                                        </f:else>
                                    </f:if>
                                </f:else>
                            </f:if>

                            <f:if condition="{item.subItems}">
                                <button class="c-main-menu__subnav-toggle"
                                        data-target-enhancement
                                        data-target-enhancement-targets.0="#main-submenu-{iterator.cycle}"
                                        data-target-enhancement-exclusive-group="subnavigation"
                                        data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                        aria-expanded="false">

                                    <span class="visually-hidden">
                                        Subnavigation umschalten
                                    </span>

                                    <svg class="c-icon c-icon--menu-closed"
                                        aria-labelledby="main-submenu-{iterator.cycle}"
                                        role="img">

                                        <use xlink:href="#icon-angle-down"/>
                                    </svg>
                                </button>
                            </f:if>
                        </div>

                        <f:if condition="{item.subItems}">
                            <f:render section="secondLevel" arguments="{parent: item, items: item.subItems, counter: iterator.cycle, enableActiveState: enableActiveState, enableThirdMenuLayer: enableThirdMenuLayer, burgerMenuLayout: burgerMenuLayout}"  />
                        </f:if>
                    </li>
                </f:if>
            </f:for>
        </ul>
    </f:else>
</f:if>

<f:section name="secondLevel">
    <ul id="main-submenu-{counter}" class="c-main-menu__second-level" aria-label="Main menu, second Level">
        <f:for each="{items}" as="item" iteration="iterator">
            <li class="c-main-menu__second-level-item">
                <f:if condition="{item.node.properties.openInNewTab}">
                    <f:then>
                        <f:if condition="{item.node.properties.showLinkPopup}">
                            <f:then>
                                <div
                                    class="c-main-menu__second-level-link {f:if(condition: '{enableActiveState}', then: item.state)}"
                                    data-target-enhancement
                                    data-target-enhancement-targets.0="[data-link-popup-{item.node.identifier}]"
                                    data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                    data-target-enhancement-exclusive-group="link-popup"
                                >
                                    <p>{item.label}</p>
                                </div>
                                <f:render partial="LinkPopUp" arguments="{_all}" />
                            </f:then>
                            <f:else>
                                <neos:link.node node="{item.node}" class="c-main-menu__second-level-link {f:if(condition: '{enableActiveState}', then: item.state)}" target="_blank">
                                    <p>{item.label}</p>
                                </neos:link.node>
                            </f:else>
                        </f:if>
                    </f:then>
                    <f:else>
                        <f:if condition="{item.node.properties.showLinkPopup}">
                            <f:then>
                                <div
                                    class="c-main-menu__second-level-link {f:if(condition: '{enableActiveState}', then: item.state)}"
                                    data-target-enhancement
                                    data-target-enhancement-targets.0="[data-link-popup-{item.node.identifier}]"
                                    data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                    data-target-enhancement-exclusive-group="link-popup"
                                >
                                    <p>{item.label}</p>
                                </div>
                                <f:render partial="LinkPopUp" arguments="{_all}" />
                            </f:then>
                            <f:else>
                                <neos:link.node node="{item.node}" class="c-main-menu__second-level-link {f:if(condition: '{enableActiveState}', then: item.state)}">
                                    <p>{item.label}</p>
                                </neos:link.node>
                            </f:else>
                        </f:if>
                    </f:else>
                </f:if>

                <f:if condition="{enableThirdMenuLayer} && {burgerMenuLayout} != '' && {item.subItems}">
                    <button class="c-main-menu__subnav-toggle"
                            data-target-enhancement
                            data-target-enhancement-targets.0="#main-submenu-{counter}-{iterator.cycle}"
                            data-target-enhancement-exclusive-group="subnavigation-2"
                            data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                            aria-expanded="false">

                        <span class="visually-hidden">
                            Subnavigation umschalten
                        </span>

                        <svg class="c-icon c-icon--menu-closed"
                            aria-labelledby="main-submenu-{counter}-{iterator.cycle}"
                            role="img">

                            <use xlink:href="#icon-angle-down"/>
                        </svg>
                    </button>

                    <f:render section="thirdLevel" arguments="{parent: item, items: item.subItems, parentCounter: counter, counter: iterator.cycle, enableActiveState: enableActiveState}" />
                </f:if>
            </li>
        </f:for>
    </ul>
</f:section>

<f:section name="thirdLevel">
    <div id="main-submenu-{parentCounter}-{counter}" class="c-main-menu__third-level" aria-label="Main menu, third level">
        <f:for each="{items}" as="item" iteration="menuItemIterator">
            <f:if condition="{item.node.properties.openInNewTab}">
                <f:then>
                    <f:if condition="{item.node.properties.showLinkPopup}">
                        <f:then>
                            <div
                                class="c-main-menu__third-level-link {f:if(condition: '{enableActiveState}', then: item.state)}"
                                data-target-enhancement
                                data-target-enhancement-targets.0="[data-link-popup-{item.node.identifier}]"
                                data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                data-target-enhancement-exclusive-group="link-popup"
                            >
                                <p>{item.label}</p>
                            </div>
                            <f:render partial="LinkPopUp" arguments="{_all}" />
                        </f:then>
                        <f:else>
                            <neos:link.node node="{item.node}" class="c-main-menu__third-level-link {f:if(condition: '{enableActiveState}', then: item.state)}" target="_blank">
                                <p>{item.label}</p>
                            </neos:link.node>
                        </f:else>
                    </f:if>
                </f:then>
                <f:else>
                    <f:if condition="{item.node.properties.showLinkPopup}">
                        <f:then>
                            <div
                                class="c-main-menu__third-level-link {f:if(condition: '{enableActiveState}', then: item.state)}"
                                data-target-enhancement
                                data-target-enhancement-targets.0="[data-link-popup-{item.node.identifier}]"
                                data-target-enhancement-plugins.0.name="toggle-aria-expanded"
                                data-target-enhancement-exclusive-group="link-popup"
                            >
                                <p>{item.label}</p>
                            </div>
                            <f:render partial="LinkPopUp" arguments="{_all}" />
                        </f:then>
                        <f:else>
                            <neos:link.node node="{item.node}" class="c-main-menu__third-level-link {f:if(condition: '{enableActiveState}', then: item.state)}">
                                <p>{item.label}</p>
                            </neos:link.node>
                        </f:else>
                    </f:if>
                </f:else>
            </f:if>
        </f:for>
    </div>
</f:section>