<div
	class="fixed inset-0 overflow-hidden z-20"
	:class="{'fixed': open}"
	aria-label="Search docs"
	role="dialog"
	aria-modal="true"
	@keydown.right="$focus.next()"
	@keydown.left="$focus.previous()"
	@keydown.esc="open=false"
	x-cloak>
	<div class="absolute inset-0 overflow-hidden z-20" x-show="open">
		<div class="absolute inset-0" aria-hidden="true"></div>

		<div
			class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10"
			@click.outside="open = false">
			<div
				class="pointer-events-auto w-screen max-w-md"
				x-show="open"
				x-transition:enter="transform transition ease-in-out duration-300 sm:duration-500"
				x-transition:enter-start="translate-x-full"
				x-transition:enter-end="translate-x-0"
				x-transition:leave="transform transition ease-in-out duration-300 sm:duration-500"
				x-transition:leave-start="translate-x-0"
				x-transition:leave-end="translate-x-full">
				<div
					class="flex h-full flex-col overflow-y-scroll dark:bg-blue-950/96 bg-white py-6 shadow-sm dark:shadow-gray-800">
					<div class="px-4 sm:px-6">
						<div class="flex items-start justify-between">
							<input
								x-model.debounce.100ms="query"
								@click="search()"
								type="search"
								arial-label="Search"
								class="text-gray-800 dark:text-gray-100 bg-white/40 dark:bg-gray-900 shadow rounded border-0 p-3 w-full"
								placeholder="Search docs"
								x-ref="input">
						</div>
					</div>
					<div class="relative mt-6 flex-1 px-4 sm:px-6 h-full">
						<ul
							role="list"
							class="divide-y divide-gray-200 dark:divide-gray-900 h-[calc(100%-6rem)] overflow-y-auto">
							<template
								x-for="[group, entries] in Object.entries(result)"
								:key="group">
								<li class="py-4">
									<div
										class="mb-1 dark:text-gray-300 font-semibold uppercase tracking-widest text-sm"
										x-text="group"></div>
									<template x-for="entry in entries" :key="entry.objectID">
										<a
											class="flex flex-nowrap space-x-4 py-2 text-sm leading-5 text-gray-900 dark:text-gray-500 hover:dark:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:bg-gray-50 dark:focus:bg-gray-800 cursor-pointer transition duration-150 ease-in-out"
											:href="entry.url">
											<span
												class="w-1/3 text-xs text-right text-gray-500 dark:text-gray-300"
												x-text="entry.hierarchy.lvl1">
											</span>
											<div class="w-2/3">
												<h3
													class="text-md font-bold"
													x-html="entry.getHeadingHTML()"></h3>
												<template
													x-if="entry._snippetResult && entry._snippetResult.content">
													<div class="two-lines-ellipsis mt-1">
														<span>…</span>
														<span x-html="entry._snippetResult.content.value">
														</span>
														<span>…</span>
													</div>
												</template>
											</div>
										</a>
									</template>
								</li>
							</template>
						</ul>
					</div>
					{{/* End listing */ -}}
				</div>
			</div>
			<div
				class="z-40 fixed pointer-events-auto bottom-0 right-0 dark:text-gray-300 text-gray-800 float-right mr-8 mb-4 text-sm lg:text-md"
				x-show="open"
				x-transition.opacity.duration.800ms>
				{{ partial "layouts/search/algolialogo.html" }}
			</div>
		</div>
	</div>
</div>
