<header class="directory-header flexcol">

    {{!-- Header Actions --}}
    <div class="header-actions action-buttons flexrow">
        {{#if canCreateEntry}}
        <button type="button" class="create-entry" data-action="createEntry">
            <i class="{{ sidebarIcon }}" inert></i>
            <span>{{ localize (concat "SIDEBAR.ACTIONS.CREATE." documentName) }}</span>
        </button>
        {{/if}}
        {{#if canCreateFolder}}
        <button type="button" class="create-folder" data-action="createFolder">
            <i class="{{ folderIcon }}" inert></i>
            <span>{{ localize "SIDEBAR.ACTIONS.CREATE.Folder" }}</span>
        </button>
        {{/if}}
    </div>

    {{!-- Search & Sort --}}
    <search>
        <button type="button" class="inline-control toggle-search-mode icon {{ searchMode.icon }}"
                data-action="toggleSearch" data-tooltip aria-label="{{ localize searchMode.label }}"></button>
        <input type="search" name="search" autocomplete="off" placeholder="{{ searchMode.placeholder }}"
               aria-label="{{ searchMode.placeholder }}">
        <button type="button" class="inline-control toggle-sort icon {{ sortMode.icon }}" data-action="toggleSort"
                data-tooltip aria-label="{{ localize sortMode.label }}"></button>
        <button type="button" class="inline-control collapse-all icon fa-duotone fa-folder-tree"
                data-action="collapseFolders" data-tooltip aria-label="{{ localize "FOLDER.Collapse" }}"></button>
    </search>
</header>
