@once
    @push('stylesheets')
        <link rel="stylesheet" href="{{asset('css/select.css')}}"/>
    @endpush
@endonce



@props([
    'options' => [],   //array of options, each option must be an arrau with 'id' and 'ui name' properties
    'selected' => null,  //id of selected values
    'id' => null,
    'class'=>'',
    'label',
    'placeholder' => '',    //placeholder for when nothing is selected
    'clearable' => false,   //addes -- options that allows deselecting
    'noNull' => false,
    'optionAttr' => '',
    'propertyAsValue' => 'id' //property of the object to pick as value
])


<div blade="{{ $viewName ?? 'unknown' }}" class="select-wrapper form {{ $class }}">
    <label for="{{$id}}" class="form-label">{{ $label }}</label>
    <select
        {{$attributes}}
        class="selectpicker form" {{ $attributes->merge(['class' => 'form-select select']) }}
        id="{{$id}}"
    >
        @if($clearable === true)
            <option value="@if($noNull === true) -1 @endif">
            </option>
        @endif

        @foreach ($options as $option)
            <option
                @if($optionAttr)  data-{{$optionAttr}}="{{$option[$optionAttr] ?? ""}}" @endif
                value="{{ $option[$propertyAsValue] }}" {{ $option[$propertyAsValue] == $selected ? 'selected' : '' }}>
                {{ $option['ui_name'] ?? $option['view_name'] ?? $option['view_name_el'] }}
            </option>
        @endforeach
    </select>
</div>