@props([
    'label' => null,
    'name' => '',
    'feedback' => null,
    'options' => [],
    'noLabel' => false,
    'disabled' => false
])

@php($name = $attributes->whereStartsWith('wire:model')->first() ?? $name)
<div @if($attributes->has('x-select2')) x-data="{
    error: @js($errors->first($name)),
    hasError: @js($errors->has($name))
}"  x-init="$watch('error', (val) => console.log(val))" @endif
    class="form-group"
    @if ($attributes->has('x-show')) x-show="{{ $attributes->get('x-show') }}" x-cloak @endif
>
    @if (! $noLabel)
        <label for="{{ $name }}">{{ $label }}</label>
    @endif

    <select {{
        $attributes->merge([
            'class' => 'form-select'.($errors->has($name) ? ' is-invalid' : ''),
            'name' => $name,
            'id' => $attributes->has('id') ? $attributes->get('id') : $name,
            'disabled' => $disabled,
            'x-bind:class' => $feedback ? "{'is-invalid': error != null }" : false,
        ])
    }}>

        <option value="">{{ $label }}</option>
        @if (! empty($options))
            @foreach ($options as $key => $value)
                <option value="{{ $key }}">{{ $value }}</option>
            @endforeach
        @else
            {{ $slot ?? '' }}
        @endif
    </select>

    @if ($feedback)
        <span x-text="error" x-bind:class="{ 'invalid-feedback': error }"></span>
    @elseif ($errors->has($name))
        <span class="invalid-feedback">{{ $errors->first($name) }}</span>
    @endif
</div>