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

<f:if condition="{items}">
    <div id="mainnav" class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNavigation">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="/">{title}</a>
            </div>
            <div class="collapse navbar-collapse" id="mainNavigation">
                <ul class="nav navbar-nav">
                    <f:render section="itemsList" arguments="{items: items}"/>
                </ul>
            </div>
        </div>
    </div>
</f:if>

<f:section name="itemsList">
    <f:for each="{items}" as="item">
        <li{fs:render(path:'{item.state}.attributes', context: {item: item}) -> f:format.raw()}>
            <f:if condition="{item.subItems}">
                <f:then>
                    <neos:link.node node="{item.node}" class="dropdown-toggle" additionalAttributes="{'data-toggle':'dropdown'}">
                        {item.label}
                        <span class="caret"></span>
                    </neos:link.node>
                    <ul class="dropdown-menu">
                        <f:render section="itemsList" arguments="{items: item.subItems}" />
                    </ul>
                </f:then>
                <f:else>
                    <neos:link.node node="{item.node}">
                        {item.label}
                    </neos:link.node>
                </f:else>
            </f:if>
        </li>
    </f:for>
</f:section>