{{--
    項目リストから単一セレクトを生成する
    @props items 項目リスト
    @props values デフォルト値配列
    @props attr 属性リスト
--}}
@props(['items', 'name', 'values', 'attr'=>[]])

@php
    $selected = fn($val) => in_array($val, $values) ? 'selected' : '';
    $class = (isset($attr['class']))? $attr['class']: '';
    $attr['class'] = $class.' input-select';
@endphp
<div x-data="Component.inputChoiceMultiple" class="flex items-start gap-1.5 ">
<div class="flex-1">
<select name='{{$name}}' {!! $attributes->merge($attr) !!} multiple>
    @foreach($items as $item)  
    <option value="{{$item->id}}" {{ $selected($item->id) }} >{{$item->name}}</option>
    @endforeach
</select>
</div>
<div class="flex items-center gap-1 ">
<x-button x-ref="selectAll" shape="btn-sub text-xs" text="全選択" />
<x-button x-ref="deselectAll" shape="btn-sub text-xs" text="全解除" />
</div>
</div>