{% load form_helpers %}

<div class="card">
  <div class="card-header">
    <i class="fa-fw fa-solid fa-search"></i> <strong>Search</strong>
  </div>
  <div class="card-body">
    <form action="." method="get">
      {% for field in filterset_form %}
      <div class="mb-3">
        {% if field.name == "q" %}
        <div class="input-group">
          <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="fa-fw fa-solid fa-search"></i></button>
        </div>
        {% else %}
        <label for="{{ field.id_for_label }}" class="form-label"><strong>{{ field.label_tag }}</strong></label>
        {{ field }}
        {% endif %}
      </div>
      {% endfor %}
      <div class="text-end">
        <button type="submit" class="btn btn-primary">
          <i class="fa-fw fa-solid fa-search"></i> Apply
        </button>
        <a href="." class="btn btn-secondary">
          <i class="fa-fw fa-solid fa-times"></i> Clear
        </a>
      </div>
    </form>
  </div>
</div>