{{-- Custom dropdown --}}

{{-- Required settings: --}}
{{-- none --}}

{{-- Optional settings: --}}
{{-- options: array of value => text pairs --}}
{{-- selected: value of selected option, if multiple options are selected they should be separated by semicolons ";" --}}
{{-- label: label associated with the input; id is required --}}
{{-- id: required if label is specified --}}
{{-- name:  --}}
{{-- multiple: defaults to false --}}
{{-- required: defaults to false --}}
{{-- placeholder --}}
{{-- conatainerId --}}
{{-- containerExtraClass --}}
{{-- inputExtraClass --}}
{{-- includeEmptyOption: boolean indicating if empty value should be added to the list, defaults to false --}}
{{-- showEmptyOption: boolean indicating if empty value should be displayed as selectable value, defaults to false --}}
{{-- emptyOptionText --}}

<div
    class="form-input-container select-control-container {{$containerExtraClass ?? ''}}"
    @if(!empty($containerId)) id="{{$containerId}}" @endif
>
    @if(!empty($label) && !empty($id))
        <label for="{{$id}}">{{$label}}</label>
    @endif

    <select
        class="select-input {{$inputExtraClass ?? ''}}"
        @if(!empty($id)) id="{{$id}}" @endif
        @if(!empty($name)) name="{{$name}}" @endif
        @if($multiple ?? false) multiple @endif
        @if($required ?? false) required @endif

        data-selected="{{$selected ?? ''}}"
        data-placeholder="{{$placeholder ?? ''}}"
    >
        @if($includeEmptyOption ?? false)
            <option
                value=""
                data-type="empty-option"
                data-show-empty-option="{{($showEmptyOption ?? false) ? 'true' : 'false'}}"
            >
                {{$emptyOptionText ?? ''}}
            </option>
        @endif
        @foreach($options as $optionValue => $optionText)
            <option value="{{$optionValue}}">{{$optionText}}</option>
        @endforeach
    </select>

    <div class="select-display">
        <div class="custom-select-input">
            <div class="selected-options-container"></div>

            <div class="select-toggle-icon"></div>
        </div>

        <div class="options-container closed"></div>
    </div>
</div>