{% include "partials/elements/_button.html.twig" with { type: 'brand', icon: '', pins: false, action: 'toggleFilterModal', text: 'Filtrer' } %}

<div class="fixed inset-0 bg-black/40 {{ openFilterModal ? '' : 'hidden' }} z-40"></div>

<div class="{{ openFilterModal ? 'flex' : 'hidden' }} overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
	<div class="relative p-4 w-full max-w-2xl max-h-full">
		<div class="relative bg-neutral-primary-soft border border-default rounded-base shadow-sm p-4">
			<div class="flex items-center justify-between border-b border-default pb-4 md:pb-5">
				<h3 class="text-lg font-medium text-heading">
					Filtrer les transactions
				</h3>
				<button type="button" class="cursor-pointer text-body bg-transparent hover:bg-neutral-tertiary hover:text-heading rounded-base text-sm w-9 h-9 ms-auto inline-flex justify-center items-center" data-action="live#action:prevent" data-live-action-param="toggleFilterModal">
					{{ ux_icon('codicon:close', {class: "w-5 h-5"}) }}
					<span class="sr-only">Close modal</span>
				</button>
			</div>

			<div class="space-y-4 md:space-y-6 py-4 md:py-6">
				<div class="bg-neutral-secondary-medium rounded p-4 space-y-4">
					<div class="flex items-center gap-4">
						<div class="relative z-0 w-full mb-5 group">
							<input id="label" type="text" data-model="norender|label" class="input-style peer" placeholder="">
							<label for="label" class="label-style">Rechercher...</label>
						</div>

						{% if category or type or label or fromDate or toDate %}
							{% include "partials/elements/_button.html.twig" with { type: 'warning', icon: '', pins: false, action: 'resetFilters', text: 'Réinitialiser' } %}
						{% endif %}
					</div>

					<div class="flex items-center gap-2">
						<select data-model="norender|category" class="select-style">
							<option value="">Catégorie</option>
							{% for group in this.categories %}
								<optgroup label="{{ group.family.label() }}">
									{% for category in group.categories %}
										<option value="{{ category.id }}">
											{{ category.user ? '👤 - ' : '' }}{{ category.name }}
										</option>
									{% endfor %}
								</optgroup>
							{% endfor %}
						</select>

						<select data-model="norender|type" class="select-style">
							<option value="">Tous les types</option>
							{% for type in this.types %}
								<option value="{{ type.value }}">{{ type.label() }}</option>
							{% endfor %}
						</select>
					</div>

					<div>
						<div class="text-heading">Rechercher sur une période</div>
						<div class="flex items-center gap-4">
							<div class="flex items-center gap-2">
								<label class="text-body-subtle">Du</label>
								<input data-model="norender|fromDate" type="date" class="input-style">
							</div>

							<div class="flex items-center gap-2">
								<label class="text-body-subtle">Au</label>
								<input data-model="norender|toDate" type="date" class="input-style">
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="flex items-center border-t border-default space-x-4 pt-4 md:pt-5">
				{% include "partials/elements/_button.html.twig" with { type: 'brand', icon: '', pins: false, action: 'toggleFilterModal', text: 'Rechercher' } %}
			</div>
		</div>
	</div>
</div>