@php
    $searchable = isset($searchable) ? $searchable : false;
    $value = isset($value) ? $value ?? '' : '';
    $wire = getWireAttributes($attributes);
@endphp
<div class="mb-3">
    <label for="{{ $name }}">{{ $label }}</label>
    <select name="{{ $name }}" id="{{ $id ?? $name }}" class="form-select @error($name) is-invalid @enderror dselect" @if ($searchable) data-dselect-search="true" @endif {!! $wire !!}>
        @isset($hasPlaceholder)
            <option value="" {{ $value == "" ? 'selected' : '' }}>Select {{ $label }}</option>
        @endisset
        @foreach ($options as $option)
            <optgroup label="{{$option}}">
                <option value="{{ isset($param) ? $option->$param : $option->id }}" {{ isset($param) ? $option->$param : ($option->id == old($name, $value) ? 'selected' : '') }}>{{ ucfirst(isset($titleKey) ? $option->$titleKey : $option->name) }}</option>
            </optgroup>
        @endforeach
    </select>
    @error($name)
        <div class="invalid-feedback">
            {{ $message }}
        </div>
    @enderror
</div>
@push('stylesheets')
    <style>
        .form-select {
            text-align: left !important;
        }
        .dselect .dropdown-menu{
            padding: 0 !important;
        }
    </style>
@endpush

{{-- <div class="vstack gap-2">
    <select class="dselect form-select" data-dselect-search="true">
        <option value>Choose browser</option>
        <option value="chrome">
    </select>
</div> --}}