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

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