{% comment %}
Reusable entity filter component

Required context variables:
- entity_type: e.g., 'substance', 'polymer', 'mixture', 'isotope', 'reaction'
- entity_type_plural: e.g., 'substances', 'polymers', 'mixtures', 'isotopes', 'reactions'
- filter: filter object with form
- overview_url_name: URL name for the overview view
{% endcomment %}
<div class="border rounded-lg px-3 pt-3">
    <div class="flex justify-between items-center">
        <h2 class="text-lg font-bold">Filter {{ entity_type_plural|title }}</h2>
        <a hx-get="{% url overview_url_name %}"
           hx-target="#{{ entity_type }}-table-body"
           hx-swap="innerHTML"
           hx-on::after-request="document.getElementById('filter-form').reset()"
           class="text-blue-500 hover:text-blue-700 hover:underline text-xs cursor-pointer">Clear all filters</a>
    </div>
    <div class="divider my-2"></div>
    <h3 class="font-bold">Search</h3>
    <form id="filter-form"
          hx-target="#{{ entity_type }}-table-body"
          hx-swap="innerHTML"
          hx-trigger="change"
          hx-include="#filter-form">
        {% for field in filter.form.visible_fields %}
            <div class="flex flex-col mb-3">{{ field.as_field_group }}</div>
        {% endfor %}
        <button type="submit"
                class="btn btn-success btn-sm ml-2 mt-3"
                hx-get="{% url overview_url_name %}"
                hx-target="#{{ entity_type }}-table-body"
                hx-swap="innerHTML"
                hx-include="#filter-form">Filter</button>
    </form>
</div>