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

<nav class="navbar navbar-main">
    <ul class="navbar-nav" role="menubar">
        <li class="nav-item nav-item--home" >
            <f:link.page pageUid="{rootPage}" class="nav-link nav-logo" title="{settings.logo.linktitle}" additionalAttributes="{role:'menuitem'}">
                <img src="{f:uri.image(src: settings.logo.file)}" alt="{settings.logo.alt}" height="{settings.logo.height}" width="{settings.logo.width}">
            </f:link.page>
        </li>
        <f:for each="{nav}" as="navItem">
            <li class="nav-item nav-item--{v:format.sanitizeString(string: navItem.data.html_class)}{f:if(condition: navItem.active, then: ' active')}{f:if(condition: navItem.current, then: ' current')}{f:if(condition: navItem.children, then: ' parent')} ">
                <f:if condition="{navItem.children}">
                    <f:then>
                        <a class="nav-link" href="{navItem.link}" role="menuitem">{navItem.title -> f:format.htmlentitiesDecode()}</a>
                        <a class="nav-link nav-toggler collapsed" href="{navItem.link}" id="toggler-{v:format.sanitizeString(string: navItem.data.html_class)}" data-toggle="collapse" data-target="#collapse-{v:format.sanitizeString(string: navItem.data.html_class)}, .show" aria-expanded="false">{navItem.title -> f:format.htmlentitiesDecode()}</a>
                        <f:render section="submenu" arguments="{submenu: navItem.children, dropdownToggler:navItem.data.html_class}"/>
                    </f:then>
                    <f:else>
                        <a class="nav-link" href="{navItem.link}" role="menuitem">{navItem.title -> f:format.htmlentitiesDecode()}</a>
                    </f:else>
                </f:if>
            </li>
        </f:for>
    </ul>
</nav>
<f:section name="submenu">
    <div class="sub-nav-panel collapse" id="collapse-{v:format.sanitizeString(string: dropdownToggler)}" aria-labelledby="toggler-{v:format.sanitizeString(string: dropdownToggler)}">
        <ul class="sub-nav">
            <f:for each="{submenu}" as="subItem">
                <li class="sub-item sub-item--{v:format.sanitizeString(string: subItem.data.uid)}{f:if(condition: subItem.active, then: ' active')}{f:if(condition: subItem.current, then: ' current')}{f:if(condition: subItem.children, then: ' parent')} ">
                    <a class="nav-link" href="{subItem.link}" title="{f:if(condition: subItem.data.abstract, then: subItem.data.abstract, else: subItem.data.description)}" data-uid="{subItem.data.uid}" role="menuitem">{subItem.title-> f:format.htmlentitiesDecode()}</a>

                </li>
            </f:for>
        </ul>
    </div>
</f:section>
