<form class="toolbar-search-form {{class}}">
    {{#each filters}}
        {{#eq @key "type"}}
            <div class="form-group {{#if this.locked}}hidden{{/if}}">
                <label for="input-type" class="mb-0">{{../trans.searchFilters.type}}</label>
                <select id="input-type" name="type" class="form-control mr-1 input-type xibo-form-input"
                    {{#if this.visibilityCondition}}data-visibility="{{this.visibilityCondition}}"{{/if}}>
                    {{#if this.locked}}
                        <option value="{{this.value}}" selected>{{this.value}}</option>
                    {{else}}
                        {{#unless hideDefault}}
                            <option value=""></option>
                        {{/unless}}

                        {{#each this.values}}
                            <option value="{{type}}" class="{{#if disabled}}disabled{{/if}}" {{#eq ../this.value type}}selected{{/eq}}>{{name}}</option>
                        {{/each}}
                    {{/if}}
                </select>
            </div>
        {{else eq @key "owner"}}
            <div class="form-group {{#if this.locked}}hidden{{/if}}">
                <label for="input-owner" class="mb-0">{{../trans.searchFilters.owner}}</label>
                <select id="input-owner" name="ownerId" class="form-control mr-1 input-owner xibo-form-input"
                    {{#if searchUrl}}data-search-url="{{searchUrl}}"{{/if}}
                    {{#if this.visibilityCondition}}data-visibility="{{this.visibilityCondition}}"{{/if}}
                    data-id-property="userId"
                    data-search-term="userName"
                    data-allow-clear="true"
                    data-placeholder--id= "null"
                    data-placeholder--value= ""
                    data-text-property="userName"
                    data-initial-key="userId"
                    data-initial-value="{{this.value}}">
                    {{#if this.locked}}
                        <option value="{{this.value}}" selected>{{this.value}}</option>
                    {{/if}}
                </select>
            </div>
        {{else eq @key "folder"}}
            <div class="form-group {{#if this.locked}}hidden{{/if}}">
                <label for="input-folder" class="mb-0">{{../trans.searchFilters.folder}}</label>
                <select id="input-folder" name="folderId" class="form-control mr-1 input-folder xibo-form-input"
                    {{#if searchUrl}}data-search-url="{{searchUrl}}"{{/if}}
                    {{#if this.visibilityCondition}}data-visibility="{{this.visibilityCondition}}"{{/if}}
                    data-id-property="folderId"
                    data-search-term="folderName"
                    data-allow-clear="true"
                    data-placeholder--id= "null"
                    data-placeholder--value= ""
                    data-text-property="folderName"
                    data-initial-key="folderId"
                    data-initial-value="{{this.value}}">
                    {{#if this.locked}}
                        <option value="{{this.value}}" selected>{{this.value}}</option>
                    {{/if}}
                </select>
            </div>
        {{else eq @key "user"}}
            <div class="form-group {{#if this.locked}}hidden{{/if}}">
                <label for="input-user" class="mb-0">{{../trans.searchFilters.user}}</label>
                <select id="input-user" name="userId" class="form-control mr-1 input-user xibo-form-input"
                    {{#if searchUrl}}data-search-url="{{searchUrl}}"{{/if}}
                    {{#if this.visibilityCondition}}data-visibility="{{this.visibilityCondition}}"{{/if}}
                    data-id-property="userId"
                    data-search-term="userName"
                    data-allow-clear="true"
                    data-placeholder--id= "null"
                    data-placeholder--value= ""
                    data-text-property="userName"
                    data-initial-key="userId"
                    data-initial-value="{{this.value}}">
                    {{#if this.locked}}
                        <option value="{{this.value}}" selected>{{this.value}}</option>
                    {{/if}}
                </select>
            </div>
        {{else eq @key "orientation"}}
            <div class="form-group {{#if this.locked}}hidden{{/if}}">
                <label for="input-orientation" class="mb-0">{{../trans.searchFilters.orientation}}</label>
                <select id="input-orientation" name="orientation"
                    class="form-control mr-1 input-orientation xibo-form-input"
                    {{#if this.visibilityCondition}}data-visibility="{{this.visibilityCondition}}"{{/if}}>
                    {{#if this.locked}}
                        <option value="{{this.value}}" selected>{{this.value}}</option>
                    {{else}}
                        <option value="" {{#eq this.value ""}}selected{{/eq}}>{{ ../trans.orientationValues.all}}</option>
                        <option value="landscape" {{#eq this.value "landscape"}}selected{{/eq}}>{{ ../trans.orientationValues.landscape}}</option>
                        <option value="portrait" {{#eq this.value "portrait"}}selected{{/eq}}>{{ ../trans.orientationValues.portrait}}</option>
                    {{/if}}
                </select>
            </div>
        {{else eq @key "provider"}}
            <div class="form-group {{#if this.locked}}hidden{{/if}}">
                <label for="input-provider" class="mb-0">{{../trans.searchFilters.provider}}</label>
                <select id="input-provider" name="provider" class="form-control mr-1 input-provider xibo-form-input"
                    {{#if this.visibilityCondition}}data-visibility="{{this.visibilityCondition}}"{{/if}}>
                    {{#if this.locked}}
                        <option value="{{this.value}}" selected>{{this.value}}</option>
                    {{else}}
                        <option value="both" {{#eq this.value "both"}}selected{{/eq}}>{{ ../trans.providerValues.both}}</option>
                        <option value="local" {{#eq this.value "local"}}selected{{/eq}}>{{ ../trans.providerValues.local}}</option>
                        <option value="remote" {{#eq this.value "remote"}}selected{{/eq}}>{{ ../trans.providerValues.remote}}</option>
                    {{/if}}
                </select>
            </div>
        {{else}}
            <div class="form-group {{#if this.locked}}hidden{{/if}}">
                <label for="input-{{@key}}" class="mb-0">{{#if title}}{{title}}{{else}}{{lookup ../trans.searchFilters @key}}{{/if}}</label>
                <input id="input-{{@key}}" name="{{#if key}}{{key}}{{else}}{{@key}}{{/if}}" type="text"
                    value="{{this.value}}" class="form-control mr-1 input-{{@key}}"
                    autocomplete="{{#if ../autocomplete}}{{../autocomplete}}{{else}}off{{/if}}"
                    {{#if dataRole}}data-role="{{dataRole}}"{{/if}}
                >
            </div>
        {{/eq}}
    {{/each}}

    {{#if showSort}}
        <div class="form-group sort-form-group {{#if this.locked}}hidden{{/if}}">
            <label for="input-sort" class="mb-0">{{trans.searchSortBy}}</label>
            <div class="{{#if sortCol}}input-group{{/if}} input-group-toggle">
                <select id="input-sort" class="form-control input-sort">
                    <option value=""></option>
                    {{#each sort}}
                        <option value="{{@key}}" data-type="{{this}}" {{#eq @key ../sortCol}}selected{{/eq}}>{{lookup ../trans.searchSort @key}}</option>
                    {{/each}}
                </select>
                <div class="input-group-append sort-button-container {{#unless sortCol}}hidden{{/unless}}">
                    <button class="btn btn-outline-secondary sort-button" type="button">
                        <i class="fa fa-sort-numeric-desc"></i>
                    </button>
                </div>
            </div>
        </div>
    {{/if}}
</form>
