@props([
    'label' => null,
    'placeholder' => null,
    'options' => [],
    'icon' => null,
    'prepend' => null,
    'append' => null,
    'size' => null,
    'help' => null,
    'model' => null,
    'lazy' => false,
    'defer' => true,
    'direction' => '',
    'rowWidth' => 9,
    'select2' => true,
    'select2search' => -1,
    'select2allowclear' => false,
    'formGroupClass' => '',
    'idPrepend' => null,
    'outlined' => null,
])

@php

    $bind = '';
    if ($lazy) $bind = '.lazy';
    else if ($defer) $bind = '.defer';

    $wireModel = $attributes->whereStartsWith('wire:model')->first();
    $key = $attributes->get('name', $model ?? $wireModel);
    $id = $attributes->get('id', $model ?? $wireModel);
    $id = $idPrepend ? $idPrepend . '-' . $id : $id;
    $prefix = null;
    $options = Arr::isAssoc($options) ? $options : array_combine($options, $options);
    $isRow = $direction === 'row';

    $attributes = $attributes->class([
        'form-control',
        'form-select',
        'form-select-' . $size => $size,
        'rounded-end' => !$append,
        'is-invalid' => $errors->has($key),
    ])->merge([
        'id' => $id,
        'wire:model' . $bind => $model ? $prefix . $model : null,
    ]);
@endphp

<x-ui.form-group :$label :$direction :$rowWidth :$formGroupClass :$outlined>
    <x-ui.input-addon :icon="$icon" :label="$prepend"/>

    <select 
        {{ $attributes }} 
        @if($select2)
            x-data="select2(
                @if($wireModel?? $model)
                @entangle($wireModel?? $model){{ $model && $defer? '.defer' : '' }} @else '[]' @endif,
                '{{ $select2search }}',
                '{{ $placeholder }}', 
                '{{ $select2allowclear }}'
            )"
            wire:key="{{ uniqid() }}"
        @endif
    >
        <option value="">{{ $placeholder }}</option>
        {{ $slot }}

        @foreach($options as $optionValue => $optionLabel)
            @if(is_array($optionLabel))
                <optgroup label="{{ $optionValue }}">
                    @foreach($optionLabel as $_optionValue => $_optionLabel)
                        <option value="{{ $_optionValue }}">{{ $_optionLabel }}</option>
                    @endforeach
                </optgroup>
            @else
                <option value="{{ $optionValue }}">{{ $optionLabel }}</option>
            @endif
        @endforeach
    </optgroup>
    </select>

    <x-ui.input-addon :label="$append" class="rounded-end"/>

    <x-ui.error :key="$key"/>

    <x-ui.help :label="$help"/>
</x-ui.form-group>