{% load i18n %}
{% load l10n %}

{% for tag in tags %}
    <div class="query-tag-container is-flex is-flex-direction-column" data-lookup="{{ tag.lookup }}" data-value="{{ tag.value }}" data-type="{{ tag.data_type }}" x-sort:item>
        <div class="is-flex is-align-items-center query-operator-group">
            {% include 'ui/filter/query_operator.html' with operator=tag.operator %}
            <button class="button is-subtle is-small" x-on:click="groupTag();">
                <span class="icon mr-0 pr-0"><i class="fa fa-layer-group"></i></span>
                <span class="icon pl-0" style="margin-left: -5px;"><i class="fa fa-plus"></i></span>
            </button>
        </div>
        <div class="query-tag is-flex tag is-medium is-justify-content-space-between is-flex-wrap-nowrap pl-0" style="height: fit-content"
             data-lookup="{{ tag.lookup }}" data-value="{{ tag.value }}"
        >
            <div class="mx-2" x-sort:handle style="cursor: pointer"><span class="icon"><i class="fa fa-arrows-up-down-left-right"></i></span></div>
            <div class="is-flex is-flex-wrap-wrap is-flex-grow-1 px-1" style="white-space: normal"
            >
                <span class="mr-1">
                    {% for item in tag.lhs %}{{ item }}{% if forloop.last %}<span class="mr-1">:</span>{% else %} > {% endif %}{% endfor %}
                    <span class="has-text-weight-bold">{{ tag.rhs }}</span></span>
            </div>
            <button class="delete my-2" x-on:click="removeTag();"></button>
        </div>
    </div>
{% endfor %}