<div x-data="{ open: false }" class="w-fit lg:w-50 flex-shrink min-w-0 flex items-center" x-on:click.away="open = false">
    <div class="relative text-theme-secondary w-full">
        <div class="flex rounded-md border border-theme-primary bg-theme-background placeholder-theme-light transition duration-150 ease-in-out focus-within:border-theme-accent focus-within:ring-1 focus-within:ring-theme-accent focus:placeholder-gray-600 sm:text-sm w-full">
            <input
                @if (timebank_config('main_search_bar.suggestions') === 0)
                    wire:model="search"
                @else
                    wire:model.live.debounce="search"
                @endif
                wire:keydown.enter="showSearchResults"
                x-on:focus="open = true"
                x-on:input="open = true"
                x-on:keydown.enter="open = false"
                type="search"
                placeholder="{{ __('Search') . '...' }}"
                class="w-full border-none focus:border-none focus:outline-none focus:ring-0 mx-2 leading-5 text-sm"
                placeholder="{{ __('Search name, skill or keyword') }}"
                autocomplete="off"
            />
            <x-mini-button style="background-color:none" onmouseover="this.style.backgroundColor='transparent'" onmouseout="this.style.backgroundColor='none'" class="!cursor-default focus:ring-offset-0 focus:ring-offset-transparent border-none focus:border-none hover:text-transparent hover:bg-none hover:-bg-transparent focus:outline-hidden focus:ring-transparent focus:outline-none focus:ring-0 hover:border-none hover:outline-none hover:ring-0" flat icon="" spinner />
            <button wire:click="showSearchResults()"
                class="px-2 placeholder-theme-light transition duration-150 ease-in-out focus:outline-none sm:text-sm"
                placeholder="{{ __('Search name, skill or keyword') }}">
                <svg class="h-5 w-5 text-theme-light" 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>
            </button>
        </div>


        @if (strlen($search) > 3 && timebank_config('main_search_bar.suggestions') > 0 && !empty($suggestions) && count($suggestions) > 0)
            <div class="absolute z-[9999] mt-2 w-full">
                <ul class="cursor-pointer rounded-lg border border-theme-primary bg-theme-background text-sm text-theme-primary shadow-md">
                    @foreach($suggestions as $suggestion)
                        @if ($suggestion)
                            <li class="suggestion-item block px-4 py-2 text-sm leading-5 text-theme-primary hover:bg-theme-surface transition cursor-pointer"
                                onclick="Livewire.find('{{ $_instance->getId() }}').call('selectSuggestion', {{ $suggestion['index'] }})">
                                {{ $suggestion['text'] }}
                            </li>
                        @endif
                    @endforeach
                </ul>
            </div>
        @endif

        @if ($showResults && timebank_config('main_search_bar.suggestions') > 0)
            <!-- Display search results here -->
            <label for="mainSearchBar" class="my-2 block text-sm font-medium text-theme-primary">
                {{ count($results) . ' ' . __('results') }}
            </label>
            <table>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Model</th>
                        <th>ID</th>
                        <th>Score</th>
                        <th>Highlight</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($results as $result)
                        <tr>
                            <td></td>
                            <td>
                                @if ($result['model'] === 'App\Models\User')
                                    <a
                                        href="{{ route('user.show', ['userId' => $result['id']]) }}">{{ $result['model'] }}</a>
                                @elseif($result['model'] === 'App\Models\Organization')
                                    <a
                                        href="{{ route('org.show', ['orgId' => $result['id']]) }}">{{ $result['model'] }}</a>
                                @elseif($result['model'] === 'App\Models\Post')
                                    <a
                                        href="{{ route('post.show_by_id', ['postId' => $result['id']]) }}">{{ $result['model'] }}</a>
                                @else
                                    {{ $result['model'] }}
                                @endif
                            </td>
                            <td>{{ $result['id'] }}</td>
                            <td>{{ $result['score'] }}</td>
                            <td>
                                {{-- XSS SECURITY: Highlights are sanitized in MainSearchBar::sanitizeHighlights() --}}
                                {{-- DO NOT change {!! !!} to {{ }} - highlights contain safe HTML <span> tags for styling --}}
                                {{-- DO NOT bypass sanitization - user content from profiles could contain malicious code --}}
                                {{-- If you modify highlight handling, review MainSearchBar.php lines 1107-1180 for security notes --}}
                                @foreach (collect($result['highlight'])->unique()->toArray() as $highlight)
                                    {!! $highlight !!} <br>
                                @endforeach
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        @endif
    </div>
</div>
