@props(['options'])
<div x-data="{open:false,selected:'{{$attributes['value']??$options[0]['value']}}',items:{{json_encode($options)}}}">
    <input type="hidden" name="{!! $attributes['name'] !!}" :value="selected">

    <span @click="open=!open" @click.away="open=false" x-text="items.find(i=>i.value===selected).name"  class="cursor-pointer"></span>
    <div x-show="open">
        <div x-show="open"
             class="absolute border left-0  border-black border-opacity-25 z-50 py-2 top-0 mt-16 rounded-lg shadow-lg bg-white">
            <ul class="w-full">
                @foreach($options as $option)
                    <li @click="selected='{{$option['value']}}'" class="cursor-pointer  text-right px-4 hover:bg-gray-100 w-full flex">
                        <a class="w-full py-3 px-2">{{$option['name']}}</a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>