<div x-data class="max-w-md">

    <label for="selectProfile" class="block text-sm font-medium text-theme-primary"> {{ $label }} </label>

    <div class="relative">
        <div class="pointer-events-none absolute inset-y-0 left-0 flex pl-3 pt-2">
            <svg class="h-5 w-5 text-theme-muted" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd"
                    d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                    clip-rule="evenodd" />
            </svg>
        </div>


        <!----- When nothing is selected ---->
        @if (!isset($selected['id']) || $search != '')

            <input wire:model.live.debounce.300ms="search" x-on:blur="$wire.inputBlur()"
                class="block w-full rounded-md border border-theme-border bg-white py-2 pl-10 pr-3 leading-5 placeholder-gray-400 shadow-sm transition duration-150 ease-in-out focus:border-theme-border focus:placeholder-gray-700 sm:text-sm"
                placeholder="{{ __('Search') . ' (' . $placeholder . ')' }}" type="search" autocomplete="off">

            @if (strlen($search) > 2)
                <ul
                    class="absolute z-[60] mt-0 w-full rounded-md border border-theme-border bg-white text-sm text-theme-primary shadow-lg">
                    @forelse ($searchResults as $searchResult)
                        <li>
                            <a wire:click="selectProfile({{ $searchResult['id'] }})"
                                class="flex items-center px-2 py-2 hover:bg-gray-100">
                                <img src="{{ $searchResult['profile_photo_path'] }}" class="w-10 rounded-full profile-photo">
                                <div class="ml-3 leading-tight">
                                    <div class="font-semibold text-theme-primary">
                                        @if (array_key_exists('name', $searchResult))
                                            {{ $searchResult['name'] }}
                                        @else
                                            {{ __('No results found') }}
                                        @endif
                                    </div>
                                    <div class="text-theme-secondary">
                                        @if (array_key_exists('description', $searchResult))
                                            {{ $searchResult['description'] }}
                                        @else
                                            {{ __('No results found') }}
                                        @endif
                                    </div>
                                </div>
                            </a>
                        </li>
                    @empty
                        <li class="px-4 py-4">{{ __('No results found for') }} "{{ $search }}"</li>
                    @endforelse
                </ul>
            @endif
        <div
                class=" focus:shadow-outline-blue my-3 w-full rounded-md border border-theme-border bg-white pl-0 pr-3 leading-5 transition duration-150 ease-in-out focus:border-theme-border focus:outline-none sm:text-sm">
                <div class="flex items-center px-2 py-2">
                    <div class="ml-3 h-10">
                    </div>
                </div>  
            </div>
        <!----- When selected ---->
        @else
            <input wire:model.live.debounce.300ms="search"
                class="shadow-sm block w-full rounded-md border border-theme-border bg-white py-2 pl-10 pr-3 leading-5 placeholder-gray-400 transition duration-150 ease-in-out focus:border-theme-border focus:placeholder-gray-300 focus:outline-none sm:text-sm"
                placeholder="{{ __('Search again...') }}" type="search" autocomplete="off">
            <div
                class=" focus:shadow-outline-blue my-3 w-full rounded-md border border-theme-border bg-white pl-0 pr-3 leading-5 transition duration-150 ease-in-out focus:border-theme-border focus:outline-none sm:text-sm">
                <div class="flex items-center px-2 py-2">
                    <img src="{{ $selected['profile_photo_path'] }}" class="w-10 rounded-full profile-photo">
                    <div class="ml-3 leading-tight">
                        <div class="font-semibold">
                            {{ $selected['name'] }}
                        </div>
                        <div class="text-theme-secondary">
                            {{ $selected['description'] }}
                        </div>
                    </div>
                    <button type="button" class="ml-auto text-theme-secondary hover:text-red-600" wire:click="removeSelectedProfile">
                        <x-icon mini name="x-circle" />
                    </button>
                </div>
            </div>
        @endif

    </div>
</div>
