{% load widget_tweaks %}
{% if table.mobile %}
        {% include templates.tb_filter_modal %}
{% else %}
{% if view.has_filter_toolbar %}
  <style>
  .clear-field {
      cursor: pointer;
  }
  </style>
  {{ filter.form.media }}
  {% if filter.form.visible_fields %}
    <div style="display:flex; flex-wrap:wrap; gap: .5em">
      {% for field in filter.form.visible_fields %}
        <div class="form-group">
        <label for="{{ table.prefix }}{{ field.id_for_label }}" class="small m-0" >{{ field.label }}</label>
        {% render_field field class="form-control" id=prefix|add:field.id_for_label %}
        </div>
      {% endfor %}

      {# add labels to buttons to get even alignment #}
      {% if view.filter_button %}
{#        <div class="form-group">#}
{#          <label for="{{ table.prefix }}id_filter_button">&nbsp;</label>#}
          <button type="button" name="filter_button" class="btn btn-primary btn-sm " style="margin-top: 1em;"
                  id="{{ table.prefix }}id_filter_button" hx-get="{{ url }}" hx-include="closest form">
            Filter
          </button>
{#        </div>#}
      {% endif %}
      {% if view.filter_clear_button %}
          <button type="button" name="filter_reset" class="btn btn-primary btn-sm" style="margin-top: 1em;"
                  id="{{ table.prefix }}id_filter_reset" hx-get="{{ url }}">
            Clear filters
          </button>
       {% endif %}
    </div>
  {% endif %}
  {% endif %}
  <script>

function clearInput(el) {
  const input = el.closest(".input-group")?.querySelector("input");
  if (!input) return;
  input.value = "";
  {#input.focus();#}
  input.dispatchEvent(new Event("input", { bubbles: true }));
  input.dispatchEvent(new Event("change", { bubbles: true }));
}
  </script>
{% endif %}