@props([
    'id' => null,
    'name' => '',
    'options' => [],
    'selected' => null,
    'useFilter' => true,
    'canClear' => false,
    'multiple' => false,
    'container' => null,
    'placeholder' => __('general.select'),
    'width' => '300px',
])
<div style="min-width: {{ $width }}">
    <select {{ $attributes->class(['is-invalid' => $errors->has($name)]) }} id="{{ $id ?: 'select-' . Str::slug($name) }}" name="{{ $name }}{{ $multiple ? '[]' : '' }}" @if(!$useFilter) data-minimum-results-for-search="Infinity" @endif {{ $multiple ? 'multiple' : '' }} style="width: 100%">
        @if($canClear)
            <option></option>
        @endif
        @foreach($options as $key => $value)
            @if($multiple)
                <option value="{{ $key }}" {{ in_array($key, $selected ?? [])  ? 'selected' : '' }}>{{ $value }}</option>
            @else
                <option value="{{ $key }}" {{ $key == $selected ? 'selected' : '' }}>{{ $value }}</option>
            @endif
        @endforeach
    </select>
</div>

@push('scripts')
    <script type="module">
        const dropdownParent = @json($container);

        $(document).ready(function () {
            $('#{{ $id ?: 'select-' . Str::slug($name) }}').select2({
                placeholder: '{{ $placeholder }}',
                allowClear: @json($canClear),
                dropdownParent: dropdownParent || $(document.body),
            })
        });
    </script>
@endpush