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

<ul class="c-main-menu{f:if(condition: '{activateUppercaseForHeadlines}', then: ' c-main-menu--is-uppercase')}" id="c-main-menu" data-main-menu>
    <f:for each="{items}" as="item" iteration="iterator">
        <li class="c-main-menu__item">
            <div class="c-main-menu__item-divider">
                <neos:link.node node="{item.node}" class="c-main-menu__link">
                    {item.label}
                </neos:link.node>

                <f:if condition="{item.subItems}">
                    <button
                        class="c-main-menu__submenu-toggle"
                        data-target-enhancement
                        data-target-enhancement-exclusive-group="submenu-items"
                        data-target-enhancement-targets.0="#c-main-submenu-{iterator.index}"
                        data-target-enhancement-plugins.0.name="toggle-aria-expanded">
                        <span class="visually-hidden">
                            Subnavigation umschalten
                        </span>
                        <svg class="c-icon c-main-menu__submenu-toggle-icon" aria-hidden="false" focusable="false">
                            <use xlink:href="#icon-angle-down" />
                        </svg>
                    </button>
                </f:if>
            </div>

            <f:if condition="{item.subItems}">
                <ul class="c-main-submenu" id="c-main-submenu-{iterator.index}">
                    <f:render section="secondLevel" arguments="{parent: item, items: item.subItems, counter: menuItemIterator.cycle}" />
                </ul>
            </f:if>
        </li>
    </f:for>
</ul>

<f:section name="secondLevel">
    <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 {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 {item.state}">
                        <p>{item.label}</p>
                    </neos:link.node>
                </f:else>
            </f:if>
        </li>
    </f:for>
</f:section>