{% load form_helpers %}

<div class="card">
    <h5 class="card-header">
        Search
    </h5>
    <div class="card-body">
        <form action="." method="get">
            {% for field in filter_form.hidden_fields %}
                {{ field }}
            {% endfor %}
            {% for field in filter_form.visible_fields %}
                {% if field.name == "q" %}
                <div class="input-group mb-3">
                    <input type="text" name="q" class="form-control" placeholder="Search" {% if request.GET.q %}value="{{ request.GET.q }}" {% endif %}/>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-search"></i>
                    </button>
                </div>
                {% elif field|widget_type == 'checkboxinput' %}
                <div class="form-check mb-3">
                    <label class="form-check-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
                </div>
                {% else %}
                <div class="form-floating mb-3">
                    {{ field }}
                    {{ field.label_tag }}
                </div>
                {% endif %}
            {% endfor %}
        </form>
    </div>
    <div class="card-footer text-end noprint border-0">
        <a href="." class="btn btn-sm btn-outline-dark m-1">
            <i class="bi bi-x"></i> Clear
        </a>
        <button type="submit" class="btn btn-sm btn-primary m-1">
            <i class="bi bi-search"></i> Apply
        </button>
    </div>
</div>