{% load static %}
<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{{id}}"
            hx-swap="innerHTML"
            hx-trigger="change"
            name = "application_field_id"
            >
                <option value="" selected disabled>Select field</option>
            {% for field in filter_application_fields %}
                {% if field.field_type not in 'Property,OneToManyField' %}
                    <option value="{{ field.pk }}" type="{{ field.field_type }}">{{ field.title }}</option>
                {% endif %}
            {% endfor %}
        </select>
    </div>
    <div id="filterActionDiv{{id}}" class="col">
    </div>
</div>

<div class="new-filter-input-row"></div>