{% load i18n static %}
{% if filter.type == "choice" %}
    <fieldset class="fieldset">
        <legend class="fieldset-legend{% if filter.label_css %} {{ filter.label_css }}{% endif %}">{{ filter.label }}</legend>
        {% if filter.autocomplete %}
            <div class="daisyui-autocomplete" data-daisyui-autocomplete>
                <select name="filter_{{ filter.key }}" multiple class="select w-full {{ filter.input_css }}">
                    {% for option in filter.options %}<option value="{{ option.value }}"{% if option.value in filter.values %} selected{% endif %}>{{ option.label }}</option>{% endfor %}
                </select>
                {% include "wagtail_daisIE/blocks/inputs/_autocomplete_ui.html" with options=filter.options placeholder=filter.label %}
            </div>
            <script src="{% static 'wagtail_daisIE/js/daisyui_autocomplete.js' %}"></script>
        {% elif filter.multi %}
            <div class="flex flex-wrap gap-2">
                {% for option in filter.options %}
                    <label class="{{ filter.button_css }}{% if option.value in filter.values %} {{ filter.selected_css }} btn-active{% endif %}">
                        <input
                            type="checkbox"
                            name="filter_{{ filter.key }}"
                            value="{{ option.value }}"
                            class="sr-only"
                            {% if option.value in filter.values %}checked{% endif %}
                        />
                        {{ option.label }}
                    </label>
                {% endfor %}
            </div>
        {% else %}
            <div class="filter">
                <a href="{{ request.path }}" class="{{ filter.button_css }} btn-square filter-reset" aria-label="{% trans 'Reset' %}">&times;</a>
                {% for option in filter.options %}
                    <input
                        type="radio"
                        name="filter_{{ filter.key }}"
                        value="{{ option.value }}"
                        class="{{ filter.button_css }}{% if filter.value == option.value %} {{ filter.selected_css }} btn-active{% endif %}"
                        aria-label="{{ option.label }}"
                        {% if filter.value == option.value %}checked{% endif %}
                    />
                {% endfor %}
            </div>
        {% endif %}
    </fieldset>
{% elif filter.type == "boolean" %}
    <fieldset class="fieldset">
        <legend class="fieldset-legend{% if filter.label_css %} {{ filter.label_css }}{% endif %}">{{ filter.label }}</legend>
        <div class="filter">
            <a href="{{ request.path }}" class="{{ filter.button_css }} btn-square filter-reset" aria-label="{% trans 'Reset' %}">&times;</a>
            {% for option in filter.options %}
                <input
                    type="radio"
                    name="filter_{{ filter.key }}"
                    value="{{ option.value }}"
                    class="{{ filter.button_css }}{% if filter.value == option.value %} {{ filter.selected_css }} btn-active{% endif %}"
                    aria-label="{{ option.label }}"
                    {% if filter.value == option.value %}checked{% endif %}
                />
            {% endfor %}
        </div>
    </fieldset>
{% elif filter.type == "sort" %}
    <fieldset class="fieldset">
        <legend class="fieldset-legend{% if filter.label_css %} {{ filter.label_css }}{% endif %}">{{ filter.label }}</legend>
        <select name="filter_{{ filter.key }}" class="select w-full {{ filter.input_css }}">
            <option value="">{% translate "Default" %}</option>
            {% for option in filter.options %}
                <option value="{{ option.value }}"{% if filter.value == option.value %} selected{% endif %}>{{ option.label }}</option>
            {% endfor %}
        </select>
    </fieldset>
{% elif filter.type == "date" %}
    <fieldset class="fieldset">
        <legend class="fieldset-legend{% if filter.label_css %} {{ filter.label_css }}{% endif %}">{{ filter.label }}</legend>
        <input type="date" name="filter_{{ filter.key }}" value="{{ filter.value }}" class="input w-full {{ filter.input_css }}" />
    </fieldset>
{% elif filter.type == "date_range" %}
    <fieldset class="fieldset">
        <legend class="fieldset-legend{% if filter.label_css %} {{ filter.label_css }}{% endif %}">{{ filter.label }}</legend>
        <div class="flex flex-wrap items-center gap-2">
            <input type="date" name="filter_{{ filter.key }}_from" value="{{ filter.from }}" class="input {{ filter.input_css }}" aria-label="{% trans 'From' %}" />
            <span aria-hidden="true">–</span>
            <input type="date" name="filter_{{ filter.key }}_to" value="{{ filter.to }}" class="input {{ filter.input_css }}" aria-label="{% trans 'To' %}" />
        </div>
    </fieldset>
{% elif filter.type == "number_range" %}
    <fieldset class="fieldset">
        <legend class="fieldset-legend{% if filter.label_css %} {{ filter.label_css }}{% endif %}">{{ filter.label }}</legend>
        <div class="flex flex-wrap items-center gap-2">
            <input type="number" name="filter_{{ filter.key }}_min" value="{{ filter.min }}" class="input {{ filter.input_css }}" aria-label="{% trans 'Minimum' %}" />
            <span aria-hidden="true">–</span>
            <input type="number" name="filter_{{ filter.key }}_max" value="{{ filter.max }}" class="input {{ filter.input_css }}" aria-label="{% trans 'Maximum' %}" />
        </div>
    </fieldset>
{% elif filter.type == "search" %}
    <fieldset class="fieldset">
        <legend class="fieldset-legend{% if filter.label_css %} {{ filter.label_css }}{% endif %}">{{ filter.label }}</legend>
        <input
            type="search"
            name="feed_search"
            value="{{ request.GET.feed_search }}"
            class="input w-full {{ filter.input_css }}"
            placeholder="{{ filter.label }}"
        />
    </fieldset>
{% endif %}