<!--
Filter snippet: 

Variables:
- content_type_id
- url
- target
- application_fields
-->
{% load static %}
<div class="dropdown">
    <button
            class="btn btn-borderless bg-transparent text-dark btn-sm"
            type="button"
            data-bs-toggle="dropdown"
            data-bs-auto-close="outside"
            aria-expanded="false">
            <img src="{% static 'bloomerp/icons/filter.svg' %}" height="20" alt="Filter"/>
    </button>

    <div class="dropdown-menu filter-dropdown-menu dropdown-menu-arrow" id="filterDropdown">
            <form 
                hx-get="{{ url }}"
                hx-target="{{ target }}"
                hx-swap="innerHTML"
                hx-trigger="submit"
                id="filterForm"
                >
                <div
                    class="row justify-content-center align-items-center g-2"
                    id="filterInputContainer"
                >
                    <div class="filter-input-row row justify-content-center align-items-center g-2 mb-2">
                        

                        <div class="col d-flex align-items-center gap-2">
                            <img 
                                src="{% static 'bloomerp/icons/close.svg' %}" 
                                height="12" 
                                alt="Remove filter"
                                onclick="removeFilterInputRow(this)"
                                style="cursor: pointer;"
                                >

                            <select 
                                class="form-select form-select-sm selectedField"
                                hx-get="{% url 'components_list_view_filter_inputs' %}?step=action"
                                hx-target="#filterActionDiv"
                                hx-swap="innerHTML"
                                hx-trigger="change"
                                name = "application_field_id"
                                >
                                    <option value="" selected disabled>Select field</option>
                                {% for field in application_fields %}
                                    {% if field.field_type not in 'Property' %}
                                        <option value="{{ field.pk }}" type="{{ field.field_type }}">{{ field.title }}</option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div id="filterActionDiv" class="col">
                            
                        </div>

                    </div>
                </div>

                <hr>

                <!-- Apply filters section -->
                <div class="d-flex justify-content-between align-items-center">

                    <a 
                        href="#" 
                        class="d-flex align-items-center gap-1"
                        onclick="addFilterInputRow(); return false;"
                        >
                        <img src="{% static 'bloomerp/icons/add.svg' %}" height="16" alt="Add filter"/>
                        <span class="text-muted" style="font-size: 0.875rem;">Add new filter</span>
                    </a>

                    <div class="d-flex gap-2">
                        <button 
                            class="btn btn-sm btn-primary"
                            type="submit">
                                Apply filter
                        </button>
                        <button 
                            class="btn btn-sm btn-secondary" 
                            type="button"
                            hx-get="{{ url}}"
                            hx-target="{{ target }}"
                            hx-swap="innerHTML"
                            hx-trigger="click"
                                >Remove filters
                        </button>
                    </div>
                </div>
                <!-- End apply filters section -->
            </form>
    </div>
</div>