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

<f:asset.module identifier="@typo3/backend/element/sidebar-toggle-element.js" />
<div class="scaffold-topbar t3js-scaffold-topbar" data-topbar-identifier="topbar">
    <div class="topbar t3js-topbar">
        <typo3-backend-sidebar-toggle
            class="topbar-button topbar-button-modulemenu"
            label-collapse="{f:translate(key: 'toolbarItems.sidebarCollapse', domain: 'backend.toolbar')}"
            label-expand="{f:translate(key: 'toolbarItems.sidebarExpand', domain: 'backend.toolbar')}"
            {f:if(condition: '!{sidebar.accessible}', then: 'disabled')}
        ></typo3-backend-sidebar-toggle>
        <div class="topbar-site-container">
            <a class="topbar-site" href="./" target="_top" title="{siteName} - {applicationVersion}">
                <span class="topbar-site-logo">
                    <img src="{logoUrl}" width="{logoWidth}" height="{logoHeight}" alt="" aria-hidden="true" />
                </span>
                <span class="topbar-site-title">
                    <span class="topbar-site-name">{siteName}</span>
                    <span class="topbar-site-version">{applicationVersion}</span>
                </span>
            </a>
        </div>
        <button
            class="topbar-button topbar-button-toolbar t3js-topbar-button-toolbar"
            title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_toolbar.xlf:toolbarItems.toolbarOpenClose')}"
            aria-label="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_toolbar.xlf:toolbarItems.toolbarOpenClose')}"
        >
            <core:icon identifier="actions-cog" alternativeMarkupIdentifier="inline" />
        </button>
        <button
            class="topbar-button topbar-button-search t3js-topbar-button-search"
            title="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_toolbar.xlf:toolbarItems.searchbarOpenClose')}"
            aria-label="{f:translate(key: 'LLL:EXT:backend/Resources/Private/Language/locallang_toolbar.xlf:toolbarItems.searchbarOpenClose')}"
            aria-haspopup="dialog"
        >
            <core:icon identifier="actions-search" alternativeMarkupIdentifier="inline" />
        </button>
    </div>
</div>
<div class="scaffold-toolbar t3js-scaffold-toolbar" data-toolbar-identifier="toolbar">
    <div class="toolbar">
        <ul class="toolbar-list" data-typo3-role="typo3-module-menu">
            <f:for each="{toolbarItems}" as="toolbarItem" iteration="iterator">
                <li {be:toolbar.attributes(class: toolbarItem) -> f:format.raw()}>
                    <be:toolbar.ifHasDropdown class="{toolbarItem}">
                        <f:then>
                            <button type="button" class="toolbar-item-link dropdown-toggle dropdown-toggle-no-chevron" data-bs-target="toolbar-menu-{iterator.cycle}" data-bs-toggle="dropdown" data-bs-offset="0,0">
                                {toolbarItem.item -> f:format.raw()}
                            </button>
                            <div id="toolbar-menu-{iterator.cycle}" class="dropdown-menu" role="menu">
                                {toolbarItem.dropdown -> f:format.raw()}
                            </div>
                        </f:then>
                        <f:else>
                            {toolbarItem.item -> f:format.raw()}
                        </f:else>
                    </be:toolbar.ifHasDropdown>
                </li>
            </f:for>
        </ul>
    </div>
</div>

</html>
