<x-app-layout>
    <x-slot name="header">
            @if($searchTerm)
                <span>
                    {{ __('Search results') }}
                </span>
                <span class="font-normal text-sm text-right">
                    @if (count($resultRefs) === 1)
                        1 {{ __('result for') }} <span class="font-semibold">{{ $searchTerm }}</span>.
                    @elseif (count($resultRefs) > 1)
                        @if (count($resultRefs) >= timebank_config('main_search_bar.search.max_results'))
                            {{ __('Please refine your search term.') }}
                            {{ __('Only the top :shown results out of :total are shown for', ['shown' => count($resultRefs), 'total' => $total]) }} <span class="font-semibold">{{ $searchTerm }}</span>.
                        @else
                            {{ count($resultRefs) }} {{ __('results for') }} <span class="font-semibold">{{ $searchTerm }}</span>.
                        @endif
                    @else
                        {{ __('Sorry, no results for') }} <span class="font-semibold">{{ $searchTerm }}</span>. <span class="font-normal">{{ __('Please search again.') }}</span>
                    @endif
                </span>

            @else
                <span>
                    {{ __('Search') }}
                </span>
            @endif

    </x-slot>

    @if ($searchTerm)
        @if (count($resultRefs) === 0)
            <!-- No Results Message -->
            <div class="py-12">
                <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
                    <div class="flex justify-center">
                        <div class="max-w-2xl w-full text-center">
                            @livewire('side-post', [
                                'type' => 'SiteContents\Search\NoResults' ?? null,
                                'random' => false,
                                'fallbackTitle' =>  __('No results found'),
                                'fallbackDescription' => ''
                            ])
                        </div>
                    </div>
                </div>
            </div>
        @else
            <!-- Display search results -->
            @livewire('search.show', ['resultRefs' => $resultRefs, 'searchTerm' => $searchTerm, 'total' => $total])
        @endif
    @else
        <!-- Search --->
        <div class="py-6">
            <div class="max-h-3xl mx-auto max-h-screen max-w-7xl sm:px-6 lg:px-8">
                <div class="flex h-[430px] md:h-[370px] lg:h-[430px] flex-col border-b border-gray-200 bg-white p-3 sm:px-20 rounded-lg justify-center">
                    <div class="my-6 grid grid-cols-1">
                        <div class="mx-auto pb-6">
                            @include('components.jetstream.application-logo')
                        </div>
                        <div class="max-w-[20rem] w-full mx-auto">
                            <livewire:main-search-bar />
                        </div>
                        <div class="mx-auto text-center pt-2 pb-3 text-2xs text-gray-500">
                            {{ __('Find profiles, skills, events and more...')}}
                            <button
                                wire:click="$dispatch('openSearchInfoModal')"
                                class="ml-1 hover:text-theme-accent underline cursor-pointer">
                                {{ __('info') }}
                            </button>
                        </div>
                    </div>
                </div>
                  <!-- Category Browser -->
                <div class="lg:col-span-2">
                    <div class="max-w-4xl mx-auto">
                        <livewire:main-browse-tag-categories />
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Search Info Modal -->
    <livewire:search-info-modal />

    @if(request()->query('openSearchInfo') === 'true')
        <script>
            document.addEventListener('livewire:initialized', function() {
                setTimeout(function() {
                    Livewire.dispatch('openSearchInfoModal');
                }, 500);
            });
        </script>
    @endif

    </x-app-layout>