{% load widget_tweaks %}
<form id="incident-filter-box"
      hx-get="{% url 'htmx:incident-list' %}"
      hx-include="#table-refresh-info, #incident-filter-box"
      hx-trigger="keydown[keyCode==13], change delay:100ms"
      hx-target="#table"
      hx-swap="outerHTML"
      hx-push-url="true"
      hx-indicator="#incident-list .htmx-indicator"
      onkeydown="if (event.keyCode === 13) event.preventDefault();">
    <fieldset>
        <legend class="sr-only">Filter incidents</legend>
        <ul class="menu menu-horizontal menu-sm flex items-center gap-2 py-1.5">
            {% for field in filter_form %}
                <li class="form-control">
                    <label class="cursor-pointer label">
                        <span class="label-text">{{ field.label }}</span>
                        {% if field|field_type == "booleanfield" %}
                            {{ field|add_class:"checkbox checkbox-accent border" }}
                        {% elif field.name == "maxlevel" %}
                            <div>
                                {{ field|add_class:"range range-primary range-xs" }}
                                <div class="flex w-full justify-between px-2 text-xs">
                                    {% for tick in "12345" %}
                                    <span>{{ tick }}</span>
                                    {% endfor %}
                                </div>
                            </div>
                        {% elif field|field_type == "choicefield" %}
                            {{ field|add_class:"select select-accent border" }}
                        {% elif field|field_type == "multiplechoicefield" %}
                            {{ field|attr:"size:1"|add_class:"select select-accent border" }}
                        {% elif field|field_type == "charfield" %}
                            {{ field|add_class:"input input-accent input-bordered border" }}
                        {% endif %}
                    </label>
                </li>
            {% empty %}
                <li>
                    No filter fields configured
                </li>
            {% endfor %}
        </ul>

    </fieldset>
</form>
