<div x-data class=" flex-col">
    <input
        x-ref="input"
        type="text"
        class="form-control"
        wire:change="doTextFilter('{{ $index }}', $event.target.value)"
        x-on:change="$refs.input.value = ''"
    />
    <div class="d-flex flex-wrap max-w-48 space-x-1 mt-2">
        @foreach($this->activeTextFilters[$index] ?? [] as $key => $value)
            <button wire:click="removeTextFilter('{{ $index }}', '{{ $key }}')" type="button" class="btn btn-xs rounded-pill btn-label-danger">
                {{ $this->getDisplayValue($index, $value) }}
                <i class="bx bx-x-circle"></i>
            </button>
            
            {{--<button wire:click="removeTextFilter('{{ $index }}', '{{ $key }}')" 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>{{ $this->getDisplayValue($index, $value) }}</span>
                <x-icons.x-circle />
            </button>--}}
        @endforeach
    </div>
</div>
