<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">
<f:layout name="Default"/>
<f:section name="Main">
    <f:if condition="{menu}">
        <nav id="nav{data.uid}" class="navbar navbar-section navbar--horizontal">
            <f:for each="{menu}" as="page">
                <f:if condition="{data.accessibility_title}">
                    <div class="navbar-header">{data.accessibility_title}</div>
                </f:if>
                <f:if condition="{page.content}">
                    <ul class="navbar navbar-nav">
                        <f:for each="{page.content}" as="element">
                            <f:if condition="{element.data.header}">
                                <li class="nav-item">
                                    <f:if condition="{data.pid}=={element.data.pid}">
                                        <f:then>
                                            <a class="nav-link" href="#c{element.data.uid}" title="{element.data.header}">{element.data.header}</a>
                                        </f:then>
                                        <f:else>
                                            <a class="nav-link" href="{page.link}#c{element.data.uid}" {f:if(condition: page.target, then: ' target="{page.target}"')} title="{element.data.header}">{element.data.header}</a>
                                        </f:else>
                                    </f:if>
                                </li>
                            </f:if>
                        </f:for>
                    </ul>
                </f:if>
            </f:for>
        </nav>
    </f:if>
    <v:asset.script external="1" name="scrollspy" overwrite="1" standalone="1" rewrite="1" fluid="1" movable="1">
        $('body').scrollspy({ target: '#nav
        <f:format.raw>{data.uid}</f:format.raw>
        ' })
    </v:asset.script>
</f:section>
</html>
