{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} <= 6">
            <li class="c-main-menu__item">
                <div class="c-main-menu__link-wrapper">
                    <neos:link.node node="{item.node}" class="c-main-menu__link {f:if(condition: '{enableActiveState}', then: item.state)}">
                        {item.label}
                    </neos:link.node>

                    <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="close-submenu-title-{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}"  />
                </f:if>
            </li>
        </f:if>
    </f:for>
</ul>

<f:section name="secondLevel">
    <ul id="main-submenu-{counter}" class="c-main-submenu" aria-label="submenu">
        <f:for each="{items}" as="item">
            <li class="c-main-submenu__item">
                <f:if condition="{item.node.properties.openInNewTab}">
                    <f:then>
                        <neos:link.node node="{item.node}" class="c-main-submenu__link {f:if(condition: '{enableActiveState}', then: item.state)}" target="_blank">
                            <p>{item.label}</p>
                        </neos:link.node>
                    </f:then>
                    <f:else>
                        <neos:link.node node="{item.node}" class="c-main-submenu__link {f:if(condition: '{enableActiveState}', then: item.state)}">
                            <p>{item.label}</p>
                        </neos:link.node>
                    </f:else>
                </f:if>
            </li>
        </f:for>
    </ul>
</f:section>

