{% set groups = groups ?? [] %}
{% set showLegend = showLegend|default(false) %}

<form class="filters__form {{ not showLegend ? " filters__form--hide-legend" }}" data-filters>
	<div class="flex flex-col w-full gap-10 xl:gap-12 lg:flex-row lg:items-center filters__list">
		{% for group in groups %}
			<div class="filters__item  {{ group.itemClasses|default(" ") }}">
				{% if group.type == "checkbox" or group.type == "radio" %}
					{% include "partials/forms/checkbox-radio" with {
						id: group.id ?? null,
                        type: group.type,
                        name: group.name,
                        label: group.label,
                        value: group.value,
                        options: group.options,
                        asButtons: group.asButtons|default,
                        classes: group.classes|default,
                        direction: group.direction|default,
                        ariaControls: ariaControls|default,
                    } %}
				{% endif %}

				{% if group.type == "select" %}
					{% include "partials/forms/select" with {
						id: group.id ?? null,
                        type: group.type,
                        name: group.name,
                        label: group.label,
                        value: group.value,
                        options: group.options,
                        classes: group.classes|default,
                        hideLabel: group.hideLabel|default(false),
                        ariaControls: ariaControls|default,
                    } %}
				{% endif %}

				{% if group.type == "text" %}
					{% include "partials/forms/text" with {
						id: group.id ?? null,
                        type: group.type,
                        name: group.name,
                        label: group.label,
                        value: group.value,
                        placeholder: group.placeholder,
                        classes: group.classes|default,
                        hideLabel: group.hideLabel|default(true),
                        ariaControls: ariaControls|default,
                        isLocation: group.isLocation,
                    } %}
				{% endif %}

				{% if group.type == "submit" %}
					{% include "partials/button" with { self: {
						id: group.id ?? null,
                        text: group.label,
                        icon: "outline/search",
                        classes: ["btn--theme-white btn--fill mt-auto"],
                        ariaControls: ariaControls|default,
                        url: group.url|default,
                        type: group.type,
                        isButton: true,
                    }} %}
				{% endif %}
			</div>
		{% endfor %}
	</div>
</form>