
<div class="content {{alignment}}">
    <div class="menu {{alignment}}" data-tooltip-direction="RIGHT" data-tooltip-class="preset-tooltip">
        {{#each menus as |menu|}}
        <div class="category-list {{../alignment}}">
            {{#each menu.categories as |category|}}
            <div class="category {{#if category.active}}active{{/if}}" data-id="{{category.id}}" data-tooltip="<h4>{{category.title}}</h4>{{#if category.tooltip}}<p>{{category.tooltip}}</p>{{/if}}{{#if category.query}}<div class='mass-edit-tags tags'><span>{{category.query}}</span></div>{{/if}}" data-action="categorySelect" {{#if category.downloadable}}data-downloadable="true"{{/if}}>
                {{#if category.img}}
                <img src="{{category.img}}">
                {{else if category.fa}}
                <i class="{{category.fa}}"></i>
                {{else}}
                <i class="fa-solid fa-triangle-exclamation"></i>
                {{/if}}
                {{!-- {{#if category.downloadable}}
                <i class="dl-icon fa-solid fa-download"></i>
                {{/if}} --}}
            </div>
            {{/each}}
        </div>
        {{/each}}
    </div>

    <div style="width: 100%; display: flex; flex-direction: column;">
        {{#if searchBar}}
        <div class="header-search flexrow">
            <input type="search" name="search" value="{{lastSearch}}" placeholder="{{localize 'FILES.Search'}}" autocomplete="off">
            <a class="globalSearchToggle {{#if globalSearch}}active{{/if}}" data-action="globalSearchToggle" style="flex: 0 0 24px; text-align: center; margin-left: 4px;" data-tooltip="Toggle Global Search"><i class="fas fa-globe fa-lg" style="padding-top: 12px;"></i></a>
        </div>
        {{/if}}
        
        <div class="preset-browser" style="flex: 1;">
            {{>me-preset-list presets=presets}}
        </div>
    </div>
</div>
