<div  x-cloak  class="w-full px-3 mb-6 bg-main-container">
    <div class="my-5 flex h-8 place-content-center px-4 ">
        <h2 class="text-xl  text-slate-800">
            Delete Patch
        </h2>
        <h2 @click="selectedPatches = []; "
            class="ml-3 text-xl text-slate-800 font-semibold underline  underline-offset-4 cursor-pointer">
            Delete Multi
        </h2>
    </div>
    <div class="pt-2 pb-4 rounded-lg relative h-svh bg-main-container ">
        <div class="flex flex-wrap -mx-3">
            <div class="w-2/3 px-3 mb-6 ">
                <div class="shadow-md bg-white w-full mb-3 p-3 rounded-lg">
                    <div class="flex flex-col items-center ">
                        <div class="flex flex-row justify-items-start self-start ">
                            <h5 class="flex justify-self-center items-center mx-2 ml-4 text-xl">Serverkey : </h5>
                            <div class="flex flex-col">
                                <input type="text"
                                    class="form-input h-9 peer  w-64 rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    wire:model="serverkey" placeholder="Search for a server key">
                                @if (!empty($serverkey) && $showSearch)
                                    <ul
                                        class="z-50 border  border-gray-200 top-14 rounded-md max-h-64 w-64 overflow-auto absolute bg-white  mt-1">
                                        @forelse($results as $result)
                                            <li class="p-2 hover:bg-gray-100 cursor-pointer"
                                                wire:click="selectResult('{{ $result->SNKEY }}')">
                                                {{ $result->SNKEY }}
                                            </li>
                                        @empty
                                            <li class="p-2 text-gray-500">No results found</li>
                                        @endforelse
                                    </ul>
                                @endif

                            </div>
                            <span wire:loading>
                                <svg class="animate-spin h-5 w-5 text-primary m-2" xmlns="http://www.w3.org/2000/svg"
                                    fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10"
                                        stroke="currentColor" stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor"
                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.964 7.964 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                    </path>
                                </svg>
                            </span>
                            <span
                                class="flex justify-self-center items-center ml-3">{{ !empty($companyName) ? '(' . $companyName . ')' : '' }}
                            </span>
                        </div>
                    </div>
                </div>

                <livewire:pages.send-patch.delete-multi-patch-list />
            </div>
            <livewire:pages.send-patch.delete-multi-patch-box :selectedPatches="$selectedPatches" />
        </div>

    </div>
</div>
