@props(['options'])
@foreach ($options as $key => $option)
<li   
    {{-- wire:sortable.item="{{$key}}" wire:key="task-{{rand()}}"  --}}
>

    <div class="flex items-center mb-3 " >
        <div class="w-full border border-gray-200 rounded-md mr-4">
            <div class="p-3 flex items-center justify-between  ">
                <div class=" w-full min-h-[42px] mr-2  relative"  
                    {{-- x-data="{isEditing:true}"    
                    @click.away="isEditing = false" --}}
                >
                    <svg 
                    {{-- @click.prevent @click="isEditing=true"  --}}
                    class="right-1.5 top-1/2 -translate-y-1/2 absolute z-10 fill-[#6B7280] hover:fill-blue-500 cursor-pointer" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 10.9999C18.7348 10.9999 18.4804 11.1053 18.2929 11.2928C18.1054 11.4804 18 11.7347 18 11.9999V17.9999C18 18.2652 17.8946 18.5195 17.7071 18.707C17.5196 18.8946 17.2652 18.9999 17 18.9999H3C2.73478 18.9999 2.48043 18.8946 2.29289 18.707C2.10536 18.5195 2 18.2652 2 17.9999V3.99994C2 3.73472 2.10536 3.48037 2.29289 3.29283C2.48043 3.1053 2.73478 2.99994 3 2.99994H9C9.26522 2.99994 9.51957 2.89458 9.70711 2.70705C9.89464 2.51951 10 2.26516 10 1.99994C10 1.73472 9.89464 1.48037 9.70711 1.29283C9.51957 1.1053 9.26522 0.999939 9 0.999939H3C2.20435 0.999939 1.44129 1.31601 0.87868 1.87862C0.316071 2.44123 0 3.20429 0 3.99994V17.9999C0 18.7956 0.316071 19.5587 0.87868 20.1213C1.44129 20.6839 2.20435 20.9999 3 20.9999H17C17.7956 20.9999 18.5587 20.6839 19.1213 20.1213C19.6839 19.5587 20 18.7956 20 17.9999V11.9999C20 11.7347 19.8946 11.4804 19.7071 11.2928C19.5196 11.1053 19.2652 10.9999 19 10.9999ZM4 11.7599V15.9999C4 16.2652 4.10536 16.5195 4.29289 16.707C4.48043 16.8946 4.73478 16.9999 5 16.9999H9.24C9.37161 17.0007 9.50207 16.9755 9.62391 16.9257C9.74574 16.8759 9.85656 16.8026 9.95 16.7099L16.87 9.77994L19.71 6.99994C19.8037 6.90698 19.8781 6.79637 19.9289 6.67452C19.9797 6.55266 20.0058 6.42195 20.0058 6.28994C20.0058 6.15793 19.9797 6.02722 19.9289 5.90536C19.8781 5.7835 19.8037 5.6729 19.71 5.57994L15.47 1.28994C15.377 1.19621 15.2664 1.12182 15.1446 1.07105C15.0227 1.02028 14.892 0.994141 14.76 0.994141C14.628 0.994141 14.4973 1.02028 14.3754 1.07105C14.2536 1.12182 14.143 1.19621 14.05 1.28994L11.23 4.11994L4.29 11.0499C4.19732 11.1434 4.12399 11.2542 4.07423 11.376C4.02446 11.4979 3.99924 11.6283 4 11.7599ZM14.76 3.40994L17.59 6.23994L16.17 7.65994L13.34 4.82994L14.76 3.40994ZM6 12.1699L11.93 6.23994L14.76 9.06994L8.83 14.9999H6V12.1699Z"/>
                        </svg>
                  


                        <div x-data="{ content: '' }">
                            <div wire:ignore
                                x-bind:contenteditable="true"
                                x-on:input=" function() {
                                    @this.set('options.{{$key}}.option', $el.innerHTML);
                                }"
                                x-on:contextmenu="enterHyperLink"
                                class="border pr-10 rounded-md w-full p-2 min-h-[42px] border-solid border-gray-300 text-gray-800 placeholder-gray-500 focus:border-gray-400 ring-0 focus:ring-0"
                            >
                                {!!$option->option!!}
                            </div>
                        </div>





                </div>
                <div class="flex items-center">
                   
                    <button type="button" wire:sortable.handle>
                        <img src="{{ Vite::asset('resources/images/icon-dots.svg')}}" class="h-[15px] w-2.5 ">
                    </button>
                </div>
            </div>
        </div>
        <a href="#" wire:click.prevent="removeOption({{$key}})">
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M8.40994 7.00019L12.7099 2.71019C12.8982 2.52188 13.004 2.26649 13.004 2.00019C13.004 1.73388 12.8982 1.47849 12.7099 1.29019C12.5216 1.10188 12.2662 0.996094 11.9999 0.996094C11.7336 0.996094 11.4782 1.10188 11.2899 1.29019L6.99994 5.59019L2.70994 1.29019C2.52164 1.10188 2.26624 0.996094 1.99994 0.996094C1.73364 0.996094 1.47824 1.10188 1.28994 1.29019C1.10164 1.47849 0.995847 1.73388 0.995847 2.00019C0.995847 2.26649 1.10164 2.52188 1.28994 2.71019L5.58994 7.00019L1.28994 11.2902C1.19621 11.3831 1.12182 11.4937 1.07105 11.6156C1.02028 11.7375 0.994141 11.8682 0.994141 12.0002C0.994141 12.1322 1.02028 12.2629 1.07105 12.3848C1.12182 12.5066 1.19621 12.6172 1.28994 12.7102C1.3829 12.8039 1.4935 12.8783 1.61536 12.9291C1.73722 12.9798 1.86793 13.006 1.99994 13.006C2.13195 13.006 2.26266 12.9798 2.38452 12.9291C2.50638 12.8783 2.61698 12.8039 2.70994 12.7102L6.99994 8.41019L11.2899 12.7102C11.3829 12.8039 11.4935 12.8783 11.6154 12.9291C11.7372 12.9798 11.8679 13.006 11.9999 13.006C12.132 13.006 12.2627 12.9798 12.3845 12.9291C12.5064 12.8783 12.617 12.8039 12.7099 12.7102C12.8037 12.6172 12.8781 12.5066 12.9288 12.3848C12.9796 12.2629 13.0057 12.1322 13.0057 12.0002C13.0057 11.8682 12.9796 11.7375 12.9288 11.6156C12.8781 11.4937 12.8037 11.3831 12.7099 11.2902L8.40994 7.00019Z" fill="#6B7280"/>
            </svg>
        </a>
    </div>
</li>
@endforeach