{% load i18n widget_tweaks %}

<form id="filter_form" role="form" action="" method="get" class="collapse{% if request.GET.filtered %} show{% endif %}">
    <div class="form-group form-row">
        {% for field in filter.form %}
            <label for="id_{{ field.name }}" class="col-xs-2 col-sm-auto col-form-label col-form-label-sm">
                {{ field.label }}
            </label>
            <div class="col-xs-10 col-sm-auto">
                {% if 'choice' or 'boolean' in field|field_type %}
                    {{ field|add_class:"form-select form-select-sm" }}
                {% else %}
                    {{ field|add_class:"form-control form-control-sm" }}
                {% endif %}
            </div>
        {% endfor %}
        <div class="col-xs-12 col-sm-auto mt-3 mt-sm-0">
            <button type="submit" class="btn btn-sm btn-primary me-2">{% trans "Filter" %}</button>
            <a href="{{ request.path }}" class="btn btn-sm btn-error">{% trans "Reset" %}</a>
        </div>
    </div>
    <input type="hidden" name="filtered" value="1"/>
</form>

<p>
    <a class="btn btn btn-sm"
       data-bs-toggle="collapse"
       href="#filter_form"
       role="button"
       aria-expanded="false"
       aria-controls="filter_form">
        {% trans "Filters" %}
    </a>
</p>
