{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace ot=Opentalent\OtTemplating\ViewHelpers}

<f:comment><!--
    -- MenuViewHelper  --
    Voir: https://fluidtypo3.org/viewhelpers/vhs/master/MenuViewHelper.html
--></f:comment>

<f:comment><!--Navbar: Menu de premier niveau.
           Si les items ont des sous-pages, on leur donne la classe dropdown--></f:comment>
<v:menu as="mainMenu"
        classHasSubpages="dropdown"
        pageUid="{ot:rootPage.getId()}">
    <div id="menu-container">

        <f:comment><!-- Button for mobile view, hidden by default --></f:comment>
        <a class="toggle-menu" href="#">
            <i class="fa fa-bars"></i>
        </a>

        <ul id="menu">
            <f:for each="{mainMenu}" as="mainMenuItem">

                <li class="{mainMenuItem.class} delayed-collapsing">

                    <div class="menu-label">
                        <f:link.page pageUid="{mainMenuItem.uid}" title="{mainMenuItem.linktext}">
                            {mainMenuItem.linktext}
                            <f:if condition="{mainMenuItem.hasSubPages}">
                                <i class="caret fa fa-caret-down"></i>
                            </f:if>
                        </f:link.page>

                        <f:comment><!-- Button for mobile view, hidden by default --></f:comment>
                        <f:if condition="{mainMenuItem.hasSubPages}">
                            <button class="toggle-dropdown fa fa-plus"></button>
                        </f:if>
                    </div>

                    <f:comment><!--Si la page a des sous-pages: menu de second niveau--></f:comment>
                    <f:if condition="{mainMenuItem.hasSubPages}">

                        <v:menu as="subMenu"
                                pageUid="{mainMenuItem.uid}"
                                classHasSubpages="dropdown">

                            <ul class="dropdown-menu">

                                <f:for each="{subMenu}" as="subMenuItem">

                                    <li class="{subMenuItem.class} delayed-collapsing">
                                        <div class="menu-label">
                                            <f:link.page pageUid="{subMenuItem.uid}" title="{subMenuItem.linktext}">
                                                {subMenuItem.title}

                                                <f:if condition="{subMenuItem.hasSubPages}">
                                                    <i class="caret fa fa-caret-right"></i>
                                                </f:if>
                                            </f:link.page>

                                            <f:comment><!-- Buttons for mobile view, hidden by default --></f:comment>
                                            <f:if condition="{subMenuItem.hasSubPages}">
                                                <button class="toggle-dropdown fa fa-plus"></button>
                                            </f:if>
                                        </div>

                                        <f:comment><!--Si la page a des sous-pages: menu de troisième niveau--></f:comment>
                                        <f:if condition="{subMenuItem.hasSubPages}">

                                            <v:menu as="thirdLevelMenu"
                                                    pageUid="{subMenuItem.uid}" >

                                                <ul class="dropdown-menu">
                                                    <f:for each="{thirdLevelMenu}" as="thirdLevelMenuItem">
                                                        <li class="{thirdLevelMenuItem.class}">
                                                            <f:link.page pageUid="{thirdLevelMenuItem.uid}" title="{thirdLevelMenuItem.linktext}">
                                                                {thirdLevelMenuItem.title}
                                                            </f:link.page>
                                                        </li>
                                                    </f:for>
                                                </ul>
                                            </v:menu>

                                        </f:if>
                                    </li>
                                </f:for>
                            </ul>
                        </v:menu>

                    </f:if>
                </li>
            </f:for>
        </ul>
    </div>
</v:menu>