<div class="control-area">
    <div class="sortcontainer" id="tagfilter">
        <input name="textFilter" type="search" value="{{filterData.search.text}}" placeholder="{{localize "PF2E.BrowserSearchPlaceholder"}}" title="{{localize "PF2E.BrowserSearchTitle"}}" />
        <dl>
            <dt>{{localize "PF2E.BrowserSortyByLabel"}}:</dt>
            <dd>
                <select class="order">
                    {{#select filterData.order.by}}
                        {{#each filterData.order.options as |label type|}}
                            <option value="{{type}}">{{localize label}}</option>
                        {{/each}}
                    {{/select}}
                </select>
                <a class="direction" data-type="alpha" data-direction="{{filterData.order.direction}}">
                    {{#if (eq filterData.order.direction "asc")}}
                        {{#if (eq filterData.order.by "name")}}
                            <i class="fas fa-sort-alpha-up"></i>
                        {{else}}
                            <i class="fas fa-sort-numeric-up"></i>
                        {{/if}}
                    {{else}}
                        {{#if (eq filterData.order.by "name")}}
                            <i class="fas fa-sort-alpha-down-alt"></i>
                        {{else}}
                            <i class="fas fa-sort-numeric-down-alt"></i>
                        {{/if}}
                    {{/if}}
                </a>
            </dd>
        </dl>
        {{#each filterData.selects as |selectData type|}}
            <dl class="{{type}}">
                <dt>{{localize selectData.label}}:</dt>
                <dd><select name="{{type}}">
                    {{#select selectData.selected}}
                        <option value="">-</option>
                        {{#each selectData.options as |option key|}}
                            <option value="{{key}}">{{option}}</option>
                        {{/each}}
                    {{/select}}
                </select></dd>
            </dl>
        {{/each}}
    </div>
    <button type="button" class="clear-filters">{{localize "PF2E.BrowserClearFilters"}}</button>
    {{#each filterData.checkboxes as |checkbox name|}}
        <div class="filtercontainer" data-filter-type="checkboxes" data-filter-name="{{name}}">
            <div class="title">
                <h3>{{localize checkbox.label}}</h3>
                {{#if checkbox.selected.length}}
                    <button type="button" data-action="clear-filter" {{#if (not checkbox.isExpanded)}}style="display: none;"{{/if}}>{{localize "PF2E.BrowserClearFilter"}}</button>
                {{/if}}
            </div>
            <dl {{#if (not checkbox.isExpanded)}}style="display: none;"{{/if}}>
                {{#each checkbox.options as |option type|}}
                    <label>
                        <dt><input type="checkbox" name="{{type}}" {{checked option.selected}} /></dt>
                        <dd>{{localize option.label}}</dd>
                    </label>
                {{/each}}
            </dl>
        </div>
        {{#if @first}}
            {{#each ../filterData.multiselects as |selectData type|}}
                <div class="filtercontainer" data-filter-type="multiselects" data-filter-name="{{type}}">
                    <h3>{{localize selectData.label}}</h3>
                    <input class="tags paizo-style" name="{{type}}" data-tagify-select="true" spellcheck="false" value="{{json selectData.selected}}" />
                    <div class="filter-conjunction">
                        <label><input type="radio" name="{{type}}-filter-conjunction" value="and"{{#if (eq selectData.conjunction "and")}} checked{{/if}}>{{localize "PF2E.BrowserFilterConjunction.AndLabel"}}</label>
                        <label><input type="radio" name="{{type}}-filter-conjunction" value="or"{{#if (eq selectData.conjunction "or")}} checked{{/if}}>{{localize "PF2E.BrowserFilterConjunction.OrLabel"}}</label>
                    </div>
                </div>
            {{/each}}
        {{/if}}
    {{/each}}
    {{#each filterData.ranges as |range name|}}
        <div class="filtercontainer rangecontainer" data-filter-type="ranges" data-filter-name="{{name}}">
            <div class="title">
                <h3>{{localize range.label}}</h3>
                {{#if range.changed}}
                    <button type="button" data-action="clear-filter" {{#if (not range.isExpanded)}}style="display: none;"{{/if}}>{{localize "PF2E.BrowserClearFilter"}}</button>
                {{/if}}
            </div>
            <div {{#if (not range.isExpanded)}}style="display: none;"{{/if}}>
                <input type="search" name="lowerBound-level" value="{{range.values.inputMin}}" placeholder="0cp">
                -
                <input type="search" name="upperBound-level" value="{{range.values.inputMax}}" placeholder="200,000gp">
            </div>
        </div>
    {{/each}}
    {{#each filterData.sliders as |slider name|}}
        <div class="filtercontainer slidercontainer" data-filter-type="sliders" data-filter-name="{{name}}">
            <div class="title">
                <h3>{{localize slider.label}}</h3>
                {{#if slider.changed}}
                    <button type="button" data-action="clear-filter" {{#if (not slider.isExpanded)}}style="display: none;"{{/if}}>{{localize "PF2E.BrowserClearFilter"}}</button>
                {{/if}}
            </div>
            <div class="slidercontainer-flex" {{#if (not slider.isExpanded)}}style="display: none;"{{/if}}>
                <label id="{{name}}-min-label">{{slider.values.min}}</label>
                <div class="slider-{{name}}"></div>
                <label id="{{name}}-max-label">{{slider.values.max}}</label>
            </div>
        </div>
    {{/each}}
</div>
