<div x-data class="flex flex-col">
    <select
        x-ref="select"
        name="{{ $name }}"
        class="form-select"
        wire:input="doBooleanFilter('{{ $index }}', $event.target.value)"
        x-on:input="$refs.select.value=''"
    >
        <option value=""></option>
        <option value="0">{{ __('Non') }}</option>
        <option value="1">{{ __('Oui') }}</option>
    </select>

    <div class="flex flex-wrap max-w-48 space-x-1 mt-2">
        @isset($this->activeBooleanFilters[$index])
            @if($this->activeBooleanFilters[$index] == 1)
                <button wire:click="removeBooleanFilter('{{ $index }}')" type="button" class="btn btn-xs rounded-pill btn-label-danger">
                    {{ __('Oui') }}
                    <i class="bx bx-x-circle"></i>
                </button>
                {{--<button wire:click="removeBooleanFilter('{{ $index }}')"
                    class="m-1 pl-1 flex items-center uppercase tracking-wide bg-gray-300 text-white hover:bg-red-600 rounded-full focus:outline-none text-xs space-x-1">
                    <span>{{ __('Y') }}</span>
                    <x-icons.x-circle />
                </button>--}}
            @elseif(strlen($this->activeBooleanFilters[$index]) > 0)
                <button wire:click="removeBooleanFilter('{{ $index }}')" type="button" class="btn btn-xs rounded-pill btn-label-danger">
                    {{ __('Non') }}
                    <i class="bx bx-x-circle"></i>
                </button>
                {{--<button wire:click="removeBooleanFilter('{{ $index }}')"
                    class="m-1 pl-1 flex items-center uppercase tracking-wide bg-gray-300 text-white hover:bg-red-600 rounded-full focus:outline-none text-xs space-x-1">
                    <span>{{ __('Non') }}</span>
                    <x-icons.x-circle />
                </button>--}}
            @endif
        @endisset
    </div>
</div>
