Personenliste fertig

views/routes/personen/components/searchbox.gohtml

@@ -0,0 +1,40 @@
+{{ $model := . }}
+
+
+<div class="ml-12 shrink-0 grow-0 mr-2.5">
+	<div class="min-w-[22.5rem] max-w-96 flex flex-row relative mt-9 ml-auto">
+		<div class="">
+			<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 }}"
+				placeholder="Suchbegriff"
+				x-model="search"
+				hx-get=""
+				hx-trigger="input changed delay=500ms, keyup[key=='Enter']"
+				hx-sync="this:replace"
+				hx-select="#searchresults"
+				hx-target="#searchresults"
+				autocomplete="off"
+				{{ if $model.active }}autofocus="true"{{ end }}
+				{{ if $model.search }}disabled="true"{{ end }} />
+		</div>
+		<div id="permalink" class="font-serif ml-3 min-w-7 pb-1">
+			<tool-tip position="right" x-show="search">
+				<a
+					:href="'/personen/?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 class="data-tip">Link zu dieser Suchanfrage</div>
+			</tool-tip>
+		</div>
+	</div>
+</div>