{%- block multiple_select_widget -%}
    <script>
        function multiSelect(initialOptions) {
            return {
                open: false,
                options: initialOptions,
                selectedOptions: [],
                onUpdate: null,
                get displayOptions() {
                    return this.selectedOptions.map(value => {
                        const option = this.options.find(o => o.value === value);
                        return option ? option.label : value;
                    });
                },

                toggle(value) {
                    if (this.selectedOptions.includes(value)) {
                        this.selectedOptions = this.selectedOptions.filter(v => v !== value);
                    } else {
                        this.selectedOptions.push(value);
                    }

                    this.$root.dispatchEvent(new CustomEvent('update-filters-count', {
                        detail: this.selectedOptions.length,
                        bubbles: true
                    }));

                    this.syncWithSelect();

                    // Déclenche une seule fois ici
                    this.$refs.select.dispatchEvent(new Event('change', {bubbles: true}));
                },

                isSelected(value) {
                    return this.selectedOptions.includes(value);
                },

                clearAll() {
                    this.selectedOptions = [];
                    this.syncWithSelect();
                    this.$root.dispatchEvent(new CustomEvent('update-filters-count', {
                        detail: 0,
                        bubbles: true
                    }));
                    this.$refs.select.dispatchEvent(new Event('change', {bubbles: true}));
                },

                syncWithSelect() {
                    const select = this.$refs.select;

                    Array.from(select.options).forEach(option => {
                        option.selected = this.selectedOptions.includes(option.value);
                    });
                },
                init() {
                    // Synchronise depuis les options sélectionnées du <select> si déjà cochées (utile lors du chargement)
                    const select = this.$refs.select;
                    this.selectedOptions = Array.from(select.selectedOptions).map(opt => opt.value);
                    this.syncWithSelect();
                    this.$root.dispatchEvent(new CustomEvent('update-filters-count', {
                        detail: this.selectedOptions.length,
                        bubbles: true
                    }));
                }
            };
        }

    </script>
    {% set jsOptions = [] %}
    {% for choice in form.vars.choices %}
        {% set jsOptions = jsOptions|merge([{
            label: choice.label|trans({}, form.vars.translation_domain),
            value: choice.value
        }]) %}
    {% endfor %}
    <div x-data="multiSelect({{ jsOptions|json_encode }})"
         class="max-w-md mx-auto">
        <!-- Fake dropdown Alpine -->
        <div class="relative">
            <button
                type="button"
                x-on:click="open = !open"
                class="relative w-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-sm text-gray-800 dark:text-white"
            >
                <span class="block truncate"
                      x-text="selectedOptions.length ? displayOptions.join(', ') : 'Options'"></span>
                <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
        <svg class="h-5 w-5 text-gray-400 dark:text-gray-500" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd"
                d="M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3zM6.293 12.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
                clip-rule="evenodd"/>
        </svg>
      </span>
            </button>

            <!-- Dropdown -->
            <div
                x-show="open"
                x-on:click.away="open = false"
                x-transition
                class="absolute z-10 mt-1 w-full bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 shadow-lg max-h-60 rounded-md py-1 text-sm ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none"
            >
                <div class="flex justify-end px-3 py-1">
                    <button
                        type="button"
                        x-on:click="clearAll()"
                        class="text-xs text-red-600 dark:text-red-400 hover:underline"
                        x-show="selectedOptions.length > 0"
                    >
                        Clear all
                    </button>
                </div>

                <template x-for="option in options" :key="option.value">
                    <div
                        x-on:click="toggle(option.value)"
                        class="cursor-pointer select-none relative py-2 pl-3 pr-9 hover:bg-indigo-600 hover:text-white text-gray-800 dark:text-white"
                    >
          <span
              x-text="option.label"
              :class="{ 'font-semibold': isSelected(option.value) }"
              class="block truncate"
          ></span>

                        <span
                            x-show="isSelected(option.value)"
                            class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600 dark:text-indigo-400 hover:text-white"
                        >
            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd"
                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                    clip-rule="evenodd"/>
            </svg>
          </span>
                    </div>
                </template>
            </div>
        </div>
        {{ form_widget(form, {  attr: {
            class: 'sr-only ',
            'x-ref': 'select'
        }}) }}
    </div>
{%- endblock -%}
