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

<nav
    class="modulemenu"
    data-role="modulemenu"
    id="modulemenu"
    data-modulemenu
    aria-label="{f:translate(key:'LLL:EXT:backend/Resources/Private/Language/locallang.xlf:modulemenu.label')}"
    data-modules-information="{modulesInformation}"
>
    <f:if condition="{modules}">
        <f:render section="Menubar" arguments="{modules: modules}" />
    </f:if>
</nav>

<f:section name="Menubar">
    <ul
        role="menubar"
        aria-orientation="vertical"
        aria-label="{f:translate(key:'LLL:EXT:backend/Resources/Private/Language/locallang.xlf:modulemenu.label')}"
        class="modulemenu-group-container"
    >
        <f:for each="{modules}" as="module" iteration="iterator">
            <li
                role="presentation"
                data-modulemenu-level="1"
                {f:if(condition: module.subModules, then: 'class="modulemenu-group modulemenu-group-{f:if(condition: module.collapsed, then: \'collapsed\', else: \'expanded\')}"')}
            >
            <f:render section="Button" arguments="{module: module, showChildren: module.subModules, tabIndex: '{f:if(condition: iterator.isFirst, then: \'0\', else: \'-1\')}'}" />
            <f:if condition="{module.subModules}">
                <f:render section="Menu" arguments="{modules: module.subModules, parent: module}" />
            </f:if>
            </li>
        </f:for>
    </ul>
</f:section>

<f:section name="Menu">
    <ul
        id="modulemenu-group-{parent.identifier}"
        role="menu"
        aria-orientation="vertical"
    <f:if condition="{parent.title}">
        aria-label="{f:translate(key: parent.title, default: parent.title)}"
    </f:if>
    class="modulemenu-group-container collapse {f:if(condition: '{parent}', then: '{f:if(condition: parent.collapsed, else: \'show\')}')}"
    >
    <f:for each="{modules}" as="module">
        <li role="presentation" data-modulemenu-level="2">
            <f:render section="Button" arguments="{module: module, tabIndex: '-1'}" />
        </li>
    </f:for>
    </ul>
</f:section>

<f:section name="Button">
    <f:variable name="moduleTitle" value="" />
    <f:if condition="{module.title}">
        <f:variable name="moduleTitle" value="{f:translate(key: module.title, default: module.title)}" />
    </f:if>
    <{f:if(condition: module.shouldBeLinked, then: 'a', else: 'button')}
    <f:if condition="{module.shouldBeLinked}">
        <f:then>
            href="{f:be.uri(route: module.identifier)}"
            data-moduleroute-identifier="{module.identifier}"
        </f:then>
        <f:else>
            type="button"
        </f:else>
    </f:if>
    role="menuitem"
    title="{moduleTitle}"
    class="modulemenu-action"
    tabindex="{tabIndex}"
    data-modulemenu-identifier="{module.identifier}"
    data-modulemenu-collapsible="{f:if(condition: showChildren, then: 'true', else: 'false')}"
    {f:if(condition: showChildren, then: 'aria-controls="modulemenu-group-{module.identifier}" aria-haspopup="menu" aria-expanded="{f:if(condition: module.collapsed, then: \'false\', else: \'true\')}"')}
    >
    <span class="modulemenu-icon" aria-hidden="true"><core:icon size="medium" identifier="{module.iconIdentifier}" alternativeMarkupIdentifier="inline" /></span>
    <span class="modulemenu-name">{moduleTitle}</span>
    <span class="modulemenu-indicator" aria-hidden="true"></span>
</{f:if(condition: module.shouldBeLinked, then: 'a', else: 'button')}>
</f:section>

</html>
