<div>
    <div class="progress" style="display: none">
        <span class="fill"></span>
        <span class="text"></span>

    </div>

    <aside>

        <fieldset>
            <legend>Name</legend>
            <input name="filter_name" type="text" value="{{filterName}}">
        </fieldset>
        <fieldset>
            <legend>Kategorie</legend>
            <select name="filter_category">
                {{selectOptions categories selected=filterCategory inverted=true}}
            </select>
        </fieldset>
        <fieldset>
            <legend>Preis</legend>
            <label>
                <span>von {{currency filter_price_lower}}</span>
                <input name="filter_price_lower" type="range" min="{{price_lower}}" value="{{filter_price_lower}}"
                       max="{{price_upper}}" step="0.01"/></label>
            <label>
                <span>bis {{currency filter_price_upper}}</span>
                <input name="filter_price_upper" type="range" min="{{price_lower}}" value="{{filter_price_upper}}"
                       max="{{price_upper}}" step="0.01"/>
            </label>
        </fieldset>
        <fieldset>
            <legend>Gewicht</legend>
            <label>von {{weight filter_weight_lower}}
                <input name="filter_weight_lower" type="range" min="{{weight_lower}}" value="{{filter_weight_lower}}"
                       max="{{weight_upper}}" step="0.025"/>
            </label>
            <label>bis {{weight filter_weight_upper}}
                <input name="filter_weight_upper" type="range" min="{{weight_lower}}" value="{{filter_weight_upper}}"
                       max="{{weight_upper}}" step="0.025"/>
            </label>
        </fieldset>

        <div class="options">
            <button {{#if hasSelectedItem}}data-action="buy" {{else}} disabled="disabled" {{/if}}><i
                    class="fa-solid fa-coins"></i> Kaufen
            </button>
        </div>
    </aside>

    <div class="scrollable-table">
        <div class="header">
            <span></span>
            <span>Name</span>
            <span>Kategorie</span>
            <span>Preis</span>
            <span>Gewicht</span>
        </div>
        <div class="scroll-y items">
            {{#each items}}
                <div data-action="select" class="item {{#if this.selected}}selected{{/if}}" data-item-id="{{this.uuid}}"
                     draggable="true">
                    <img class="image" src="{{this.img}}" alt="{{this.name}}"/>
                    <span class="name">{{this.name}}</span>
                    <span class="category">{{this.category}}</span>
                    <span class="price">{{currency this.price}}</span>
                    <span class="weight">{{weight this.weight}}</span>
                </div>
            {{/each}}
        </div>
    </div>

</div>