{% load i18n insight_tags %}

<div
    class="flex flex-col gap-1 lg:flex-row"
    role="group"
    aria-label="{% blocktrans with num=index|add:1 %}Filter {{ num }}{% endblocktrans %}"
    data-filter-index="{{ index }}"
>
    {% if index != 0 %}
        {# Logic #}
        <div class="flex gap-1 items-center pe-2 text-insight-headline">
            <input type="radio" id="optionAND-{{ index }}" name="logic-{{ index }}" value="AND" {% if not selected_logic or selected_logic == "AND" %}checked{% endif %}>
            <label for="optionAND-{{ index }}" class="pe-2">
                AND
            </label>
            <input type="radio" id="optionOR-{{ index }}" name="logic-{{ index }}" value="OR" {% if selected_logic == "OR" %}checked{% endif %}>
            <label for="optionOR-{{ index }}">
                OR
            </label>
        </div>
    {% endif %}
    <div class="w-full lg:w-48 xl:w-64">
        {# Field #}
        <label for="field-{{ index }}" class="sr-only">{% trans "Select the field of the filter" %}</label>
        <select id="field-{{ index }}" name="field" class="field-select input block w-full h-9">
            <option value="" {% if not selected_value %}selected{% endif %}>{% trans "-- Attribute --" %}</option>
            {% for field in model_fields %}
                <option value="{{ field.field }}" {% if selected_field == field.field %}selected{% endif %}>{{ field.label }}</option>
            {% endfor %}
        </select>
    </div>
    <div class="w-full lg:w-48 xl:w-64">
        {# Operator #}
        <label for="operator-{{ index }}" class="sr-only">{% trans "Select the operator of the filter" %}</label>
        <select id="operator-{{ index }}" name="operator" class="operator-select input block w-full h-9">
            {# This option is used to retain the selected value #}
            <option value="{{ filter_operator }}" selected>{{ filter_operator }}</option>
            {# Operators are loaded dynamically here #}
        </select>
    </div>
    <div class="w-full lg:w-48 xl:w-64">
        {# Input #}
        <label for="value-{{ index }}" class="sr-only">{% trans "Specify the value of the filter" %}</label>
        <input
            type="text" id="value-{{ index }}" name="value" placeholder="{% trans 'Value' %}"
            {% if filter_value %} value="{{ filter_value }}" {% endif %}
            class="value-field input block w-full h-9"
        >
    </div>
    {% if index != 0 %}
        {% button label=_("Remove filter") type="danger" outline=True button_type="button" icon_name="x-mark" icon_size="s" icon_only=True extra_classes="remove-filter h-9" %}
    {% endif %}
</div>