{% load widget_tweaks %}
<form id="incident-filter-box"
      class="incident-list-param"
      hx-get="{% url 'htmx:incident-list' %}"
      hx-include=".incident-list-param"
      {% block filter_trigger_control %}
      hx-trigger="keydown[keyCode==13], change delay:100ms, load once"
      {% endblock filter_trigger_control %}
      hx-target="#table"
      hx-swap="outerHTML"
      hx-push-url="true"
      hx-indicator="#incident-list .htmx-indicator"
      onkeydown="if (event.keyCode === 13) event.preventDefault();">
  {# Hidden inputs to preserve sort state across filter submissions #}
  <input type="hidden" name="sort" value="{{ current_sort }}">
  <input type="hidden" name="sort_order" value="{{ current_sort_order }}">
  <fieldset>
    <legend class="sr-only">Filter incidents</legend>
    <ul class="menu menu-horizontal menu-xs flex flex-wrap items-center gap-0.5 py-0">
      {% for field in filter_form %}
        {% if not field.field.in_header %}
          <li class="form-control">
            {% if field.name == "special_filters" %}
              {{ field }}
            {% elif "dropdownmultiselect" in field|widget_type or "dropdownradioselect" in field|widget_type %}
              <div class="flex flex-nowrap">
                <label class="label">
                  <span class="label-text">{{ field.label }}</span>
                </label>
                {{ field }}
              </div>
            {% elif field.name == "maxlevel" %}
              <label class="cursor-pointer label">
                <span class="label-text">{{ field.label }}</span>
                <div class="pt-4">
                  {{ field }}
                  <div class="flex w-full justify-around gap-2 text-xs">
                    {% for tick in "12345" %}<span>{{ tick }}</span>{% endfor %}
                  </div>
                </div>
              </label>
            {% else %}
              <label class="cursor-pointer label">
                <span class="label-text">{{ field.label }}</span>
                {% if field|field_type == "booleanfield" %}
                  {{ field|add_class:"checkbox-primary" }}
                {% elif field|field_type == "multiplechoicefield" %}
                  {{ field|attr:"size:1"|add_class:"select-primary" }}
                {% elif field|field_type == "charfield" %}
                  {{ field|add_class:"input input-primary input-bordered" }}
                {% else %}
                  {{ field }}
                {% endif %}
              </label>
            {% endif %}
          </li>
        {% endif %}
      {% empty %}
        <li>No filter fields configured</li>
      {% endfor %}
    </ul>
  </fieldset>
</form>