{{ $model := . }}

{{ if $model.letters }}
	<div
		class="flex flex-row border-b px-3 border-zinc-300 items-end min-h-14"
		x-data="{ search : '{{ $model.search }}' }">
		<div id="alphabet" class="alphabet flex flex-row items-end text-xl">
			{{ range $id, $r := .letters }}
				<a
					class="odd:bg-stone-100 even:bg-zinc-100 mr-1 border-zinc-300 border-x border-t [&>a[aria-current='page']]:font-bold
				px-2 no-underline transition-all duration-75
				{{ if not $model.active -}}inactive{{- end -}}"
					:class="search ? 'inactive' : 'active'"
					href="?letter={{ $r }}"
					{{ if eq $model.active $r }}aria-current="page"{{ end }}
					hx-select="main"
					hx-target="main"
					hx-swap="outerHTML scroll:#pageheading:top"
					>{{ $r }}</a
				>
			{{ end }}
		</div>

		<div class="flex-grow"></div>

		<div
			class="min-w-[22.5rem] max-w-96 flex flex-row bg-stone-50 relative"
			:class="search ?
		'activesearch' : ''">
			<div class="pb-0">
				<i class="ri-search-line"></i><i class="-ml-0.5 inline-block ri-arrow-right-s-line"></i>
			</div>
			<div class="pb-0 border-b-4 border-zinc-300 grow">
				<input
					class="px-1.5 font-serif placeholder:italic w-full"
					type="search"
					name="search"
					value="{{ $model.search }}"
					x-model="search"
					placeholder="Almanach-Nr oder Suchbegriff"
					hx-get=""
					hx-trigger="input changed delay=1000ms, keyup[key=='Enter']"
					hx-sync="this:replace"
					hx-select="#searchcontent"
					hx-target="#searchcontent"
					autocomplete="off" />
			</div>
			<div id="permalink" class="font-serif ml-3 min-w-7 pb-1">
				<a
					:href="'/reihen/?search=' + search"
					x-show="search"
					class="inline-block px-1
				text-white no-underline bg-stone-700 hover:bg-stone-900 rounded"
					hx-boost="false">
					<i class="ri-links-line"></i
				></a>
			</div>
		</div>
	</div>
{{ end }}