{% extends "basis.html" %}
{% block inhalt %}

<form class="mb-5 grid grid-cols-2 sm:grid-cols-4 gap-2"
      hx-get="/teil/liste" hx-target="#liste" hx-swap="outerHTML"
      hx-trigger="change">
    <div>
        <label class="etikett" for="f-size">Grösse</label>
        <select class="feld" id="f-size" name="size">
            <option value="">alle</option>
            {% for g in groessen %}
                <option value="{{ g.label }}" {{ 'selected' if g.label == filter.size }}>
                    {{ g.label }}</option>
            {% endfor %}
        </select>
    </div>
    <div>
        <label class="etikett" for="f-kat">Kategorie</label>
        <select class="feld" id="f-kat" name="category_id">
            <option value="">alle</option>
            {% for k in kategorien %}
                <option value="{{ k.id }}"
                        {{ 'selected' if k.id|string == filter.category_id }}>
                    {{ k.name }}</option>
            {% endfor %}
        </select>
    </div>
    <div>
        <label class="etikett" for="f-gender">Für</label>
        <select class="feld" id="f-gender" name="gender">
            <option value="">alle</option>
            <option value="girl"   {{ 'selected' if filter.gender == 'girl' }}>Mädchen</option>
            <option value="boy"    {{ 'selected' if filter.gender == 'boy' }}>Buben</option>
            <option value="unisex" {{ 'selected' if filter.gender == 'unisex' }}>egal</option>
        </select>
    </div>
    <div>
        <label class="etikett" for="f-status">Zustand</label>
        <select class="feld" id="f-status" name="status">
            <option value="available" {{ 'selected' if filter.status == 'available' }}>
                nur verfügbare</option>
            <option value="" {{ 'selected' if not filter.status }}>alle</option>
        </select>
    </div>
</form>

{% include "_liste.html" %}

{% endblock %}