<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      data-namespace-typo3-fluid="true">

<f:if condition="{mainnavigation}">
    <ul class="nav nav-pages nav-pills me-auto d-print-none">
        <f:for each="{mainnavigation}" as="mainItem">
            <f:if condition="{mainItem.children}">
                <f:then>
                    <li class="nav-item dropdown {f:if(condition:mainItem.active, then:' active')}{f:if(condition:mainItem.current, then:' current')}{f:if(condition:mainItem.spacer, then:' spacer')}">
                        <a class="nav-link dropdown-toggle{f:if(condition:mainItem.active, then:' active')} text-uppercase rounded-0" data-bs-toggle="dropdown" href="{mainItem.link}">{mainItem.title -> f:format.raw()}</a>
                        <f:render section="dropdown" arguments="{dropdownItems: mainItem.children, uid:mainItem.data.uid}"/>
                    </li>
                </f:then>
                <f:else>
                    <li class="nav-item{f:if(condition:mainItem.active, then:' active')}{f:if(condition:mainItem.current, then:' current')}{f:if(condition:mainItem.spacer, then:' spacer')}">
                        <a class="nav-link{f:if(condition:mainItem.active, then:' active')} text-uppercase rounded-0" href="{mainItem.link}">{mainItem.title -> f:format.raw()}</a>
                    </li>
                </f:else>
            </f:if>
        </f:for>
    </ul>
</f:if>

<f:section name="dropdown">
    <ul class="dropdown-menu" id="dropdown-menu-{uid}">
        <f:for each="{dropdownItems}" as="dropdownItem">
            <f:if condition="{dropdownItem.flyout}">
                <f:then>
                    <li class="flyout {f:if(condition:mainItem.active, then:' active')}{f:if(condition:mainItem.current, then:' current')}{f:if(condition:mainItem.spacer, then:' spacer')}">
                        <f:link.page pageUid="{dropdownItem.data.uid}" target="{dropdownItem.data.target}" additionalAttributes="{data-bs-toggle:'flyout'}" class="dropdown-item flyout-toggle{f:if(condition:dropdownItem.active, then:' active')}{f:if(condition:dropdownItem.data.current, then:' current')}">
                            {dropdownItem.title -> f:format.raw()}
                        </f:link.page>
                        <f:render section="flyoutmenu" arguments="{fyloutItems: dropdownItem.flyout}"/>
                    </li>
                </f:then>
                <f:else>
                    <li class="{f:if(condition:mainItem.active, then:' active')}{f:if(condition:mainItem.current, then:' current')}{f:if(condition:mainItem.spacer, then:' spacer')}">
                        <f:link.page pageUid="{dropdownItem.data.uid}" target="{dropdownItem.data.target}" class="dropdown-item{f:if(condition:dropdownItem.active, then:' active')}{f:if(condition:dropdownItem.data.current, then:' current')}">
                            {dropdownItem.title -> f:format.raw()}
                        </f:link.page>
                    </li>
                </f:else>
            </f:if>
        </f:for>
    </ul>
</f:section>

<f:section name="flyoutmenu">
    <div class="flyout-menu">
        <div class="flyout-inner">
            <f:for each="{fyloutItems}" as="flyoutItem">
                <f:cObject typoscriptObjectPath="tt_content" data="{flyoutItem.data}"/>
            </f:for>
        </div>
    </div>
</f:section>

</html>
