Checkboxes

<p class="font-medium py-4 md:pt-6 md:pb-3 text-base md:text-xl">Spécialités du magasin</p>
<div x-data="storeFilters('')" class="flex flex-col gap-4 md:gap-6 w-full">
    <div x-show="items.length > 0" class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 pb-4 md:pb-3">
        <template x-for="item in filteredItems" :key="item.label">
            <label class="selection-control-label selection-control-size-md">
                <input :checked="$store.locator.currentSelectedFilters[category].includes(item.label)" @click="$store.locator.updateFilter(category, item.label)" type="checkbox">
                <span x-text="item.label + ' (' + item.count + ')'"></span>
            </label>
        </template>
    </div>
</div>

<script>
    function storeFilters(category) {
        return {
            search: '',
            category: category,
            items: [],
            init() {
                // Observer les changements dans les filtres du type actuel
                this.$watch('$store.locator.currentFilterList', (value) => {
                    if (value && value[this.category]) {
                        this.items = value[this.category];
                    }
                }, {
                    deep: true
                });
                // Initialisation immédiate si les données sont déjà disponibles
                if (this.$store.locator.currentFilterList?.[this.category]) {
                    this.items = this.$store.locator.currentFilterList[this.category];
                }
            },
        }
    }
</script>