<div class="drag-drop-overlay"><p class="label">{{localize 'MassEdit.presets.drag-over-message'}}</p></div>
<form class="preset-browser">

    <header class="preset-header flexcol">
        {{#if allowDocumentSwap}}
        <div class="header-select flexrow">
            {{#each docs as |doc|}}
            <a class="document-select {{#if (eq doc.name ../currentDocument)}}active{{/if}}" data-tooltip="{{doc.tooltip}}" data-name="{{doc.name}}"><i class="{{doc.icon}} fa-lg"></i></a>
            {{/each}}
            {{#if docsDropdown}}
            <div class="dropdown">
                <a class="dropicon" style="color:tan;"><i class="fa-solid fa-square-chevron-down"></i></a>
                <div class="dropdown-content">
                    {{#each docsDropdown as |doc|}}
                    <a class="document-select {{#if (eq doc.name ../currentDocument)}}active{{/if}}" data-tooltip="{{doc.tooltip}}" data-name="{{doc.name}}"><i class="{{doc.icon}} fa-lg"></i></a>
                    {{/each}}
                </div>
            </div>
            {{/if}}
            <div class="window-controls">
                <a class="header-control toggle-doc-lock {{#if docLockActive}}active{{/if}}" data-tooltip="{{localize 'MassEdit.presets.controls.document-lock'}}"><i class="fa-solid fa-lock"></i></a>
                <a class="header-control toggle-setting {{#if layerSwitchActive}}active{{/if}}" data-setting="switchLayer" data-tooltip="{{localize 'MassEdit.presets.controls.layer-switch'}}"><i class="fa-solid fa-arrows-cross"></i></a>
                <a class="header-control toggle-setting {{#if autoScale}}active{{/if}}" data-setting="autoScale" data-tooltip="{{localize 'MassEdit.presets.controls.scale-to-grid'}}"><i class="fa-solid fa-arrow-down-big-small"></i></a>
                <a class="header-control toggle-setting {{#if externalCompendiums}}active{{/if}}" data-setting="externalCompendiums" data-tooltip="{{localize 'MassEdit.presets.controls.external-compendiums'}}"><i class="fa-solid fa-books"></i></a>
                <a class="header-control toggle-setting {{#if virtualDirectory}}active{{/if}}" data-setting="virtualDirectory" data-tooltip="{{localize 'MassEdit.presets.controls.virtual-directory'}}"><i class="fas fa-file-search"></i></a>
            </div>
        </div>
        {{/if}}
        {{#if createEnabled}}
        <div class="header-actions action-buttons flexrow">
            <button type="button" class="preset-create"><i class="fas fa-plus"></i> {{localize 'MassEdit.presets.drag-over-message'}}</button>
        </div>
        {{/if}}
        <div class="header-search flexrow">
            <a class="header-control toggle-search-mode" data-tooltip="{{searchMode.tooltip}}">{{{searchMode.icon}}}</a>
            <a class="tagSelector" style="position: absolute;left: 29px; margin-top: 2px; color: #6e6e6e" data-tooltip="Select Tags."><i class="fa-solid fa-tag"></i></a>
            <input class="{{#if lastSearch}}active{{/if}}" type="search" name="search" value="{{lastSearch}}" placeholder="{{localize 'FILES.Search'}}" autocomplete="off" style="color: black">
            <a class="header-control toggle-sort" data-tooltip="{{sortMode.tooltip}}">{{{sortMode.icon}}}</a>
            <a class="header-control create-folder" data-tooltip="{{localize 'FOLDER.Create'}}" style="position: relative;"><i class="fas fa-folder"></i><i class="fas fa-plus"></i></a>
            {{#unless allowDocumentSwap}}
            <a class="header-control toggle-ext-comp {{#if externalCompendiums}}active{{/if}}" data-tooltip="{{localize 'MassEdit.presets.controls.external-compendiums'}}" style="flex: 0 0 30px;"><i class="fa-solid fa-books"></i></a>
            {{/unless}}
            {{#if (eq currentDocument "Bag")}}
            <a class="header-control create-bag" data-tooltip="Create a new Bag" style="position: relative;"><i class="fas fa-plus-square"></i></a>
            {{else if isPlaceable}}
            <a class="header-control create-preset" data-tooltip="Create Preset from Selected" style="position: relative;"><i class="fas fa-plus-square"></i></a>
            {{/if}}
        </div>
    </header>

    {{#if displayDragDropMessage}}
    <h2 style="text-align: center; margin-top: 100px; border: none;">{{localize 'MassEdit.presets.drag-placeable-message'}}</h2>
    {{/if}}

    {{>me-preset-list folders=folders extFolders=extFolders createEnabled=../createEnabled callback=../callback presets=presets}}
</form>