@props(['name', 'id', 'value', 'placeholder', 'options', 'class'])

@php
$value = isset($value) ? $value ?? '' : '';
@endphp

<select name="{{ $name }}"
    id="{{ $id ?? $name }}"
    class="form-select @error($name) is-invalid @enderror {{ $class ?? '' }}"
    {{ $attributes }}
    x-data="{ options: @js($options) }">
    @isset($placeholder)
    <option value="" {{ $value == "" ? 'selected' : '' }}>{{ $placeholder }}</option>
    @endisset

    <template x-for="option in options">
        <option x-bind:value="option.id" x-text='option.name'></option>
    </template>
</select>
@error($name)
    <div class="invalid-feedback">
        {{ $message }}
    </div>
@enderror