{% load static %}
{% load ui %}

<div id="filter{{ ui_filter.id }}" x-data="filter('{{ ui_filter.id }}', '{{ target }}')">
    
    <div id="query-tags{{ ui_filter.id }}" x-ref="queryTags" class="query-tags mb-1">
        {{ ui_filter.query_tags }}
    </div>
    
    <div id="query-input{{ ui_filter.id }}" class="">
        {{ ui_filter.query_input }}
    </div>
    
    <div class="mb-6" style="width: 100%" x-show="showParams" x-cloak="" x-transition.duration.150ms>
        {{ ui_filter.query_params }}
    </div>

    {% if target %}
        <div id="query-apply{{ ui_filter.id }}" x-ref="queryApply"
             hx-trigger="click" hx-replace-url="false"
             hx-target="#query-tags{{ ui_filter.id }}"
             hx-swap="innerHTML:#query-tags{{ ui_filter.id }}"
             data-tags-url="{% url 'ui:filter_tags' filter_id=ui_filter.id model=ui_filter.model_name %}"
        >
        </div>
    {% else %}
        <div id="query-apply{{ ui_filter.id }}" x-ref="queryApply"
             hx-trigger="click" hx-replace-url="true"
             hx-target="#overview-container"
             hx-select="#overview-container"
             hx-select-oob="#query-tags{{ ui_filter.id }},#query-apply{{ ui_filter.id }}"
        >
        </div>
    {% endif %}
</div>