{% load i18n %}
{% load static %}
{% load cache %}
{% load accrete_ui %}

<div id="query-block" class="panel-block pt-0" style="position: relative; display: inline-block; width: 100%">
    <script src="{% static "js/filter.js" %}" defer type="text/javascript"></script>

    <div id="query-apply" hx-get="" hx-trigger="click" hx-replace-url="true"
         hx-select-oob="#content,#list-pagination,#panel-actions,#header-actions,#query-apply">
    </div>

    <div id="query-tags" class="is-flex-direction-column is-flex-grow-1 is-multiline mb-1"
         data-or-label="{% translate 'OR' %}" data-and-label="{% translate 'AND' %}" data-xor-label="{% translate 'XOR' %}">
    </div>

    <div class="field level mb-1 is-flex">
        <p id="query-operation" class="control" style="display: flex; flex-direction: column; align-self: flex-start">
            <span class="select">
                <select id="query-operation-select" aria-label="Select Operation">
                    <option value="&">{% translate 'AND' %}</option>
                    <option value="|">{% translate 'OR' %}</option>
                </select>
            </span>
        </p>
        <div id="query-notification" class="is-size-7 p-0 ml-1 is-flex-direction-column is-flex-grow-3">
            <div id="query-notification-parameter" class="notification is-warning is-light has-text-centered py-2 m-0 is-hidden">
                <p>{% translate 'Select a parameter' %}</p>
            </div>
            <p id="query-label" class="py-2 px-1 m-0" style="word-break: break-word"></p>
        </div>
    </div>

    <div id="query-input-fieldset" class="field has-addons pt-1 mb-0">
        <p id="query-input-control" class="control is-expanded">
            <input id="query-input"
                   type="text"
                   aria-label="Query Input"
                   class="input"
                   placeholder="Enter a search term"
                   data-default-term="{{ filter.default_filter_term }}"
                   onkeyup="inputConfirm()"
            >
        </p>
        <p id="query-input-select-control" class="control is-expanded is-hidden">
            <span class="select is-fullwidth">
                <select id="query-input-select" aria-label="query-input-select"></select>
            </span>
        </p>
        <p id="query-input-apply" class="control" onclick="applyInput()"><button class="button">&#x21D2;</button></p>
    </div>


    <div id="query-params-dropdown" class="box mt-0 mx-0 p-1 is-hidden is-fullwidth" tabindex="-1" style="z-index: 900; background: white; word-break: break-word; position: absolute; width: 300px; max-height: 300px; overflow-y: auto" onclick="toggleParams()">
        {{ filter.to_html.params }}
    </div>
    {% if field_selection %}
        <div id="field-selection" class="button mt-1" style="z-index: 10; position: relative" onclick="toggleFieldSelection()">
            {% translate 'Fields' %}
        </div>
        <div id="field-paths" class="box mt-1 mx-0 p-1 is-hidden" tabindex="-1" style="z-index: 800; outline: none; background: white; word-break: break-word; position: absolute; width: 300px; max-height: 300px; overflow-y: auto">
            <div class="field has-addons mr-1">
                <p class="control is-expanded">
                    <input id="field-path-search-input" class="input is-small" type="text" aria-label="Query Input" oninput="filterFieldPaths()">
                </p>
                <p class="control">
                    <button id="field-path-search-reset" class="button is-small has-icon" onclick="resetFieldPaths()">
                        <i class="icon-delete-filter"></i>
                    </button>
                </p>
            </div>
            <div id="field-path-checkboxes" onchange="changeFieldSelection()">
                {{ filter.to_html.field_paths }}
            </div>
            <div id="field-path-apply" hx-get="" hx-trigger="click" hx-replace-url="true"
                 hx-select-oob="#content,#field-path-apply,#list-pagination">
            </div>
        </div>
    {% endif %}
</div>
