feat(tag): draft for inline editing

internal/tag/template.templ

@@ -5,6 +5,46 @@ import (
 	"spend-sparrow/internal/template/svg"
 )
 
+templ InlineEditInput(classes string) {
+	<div class={ "flex flex-wrap gap-2 input max-w-full " + classes }>
+		<span class="flex items-center gap-1 p-1 bg-green-100 rounded-sm">
+			Lebensmittel 
+			<button class="hover:bg-red-900 rounded p-1 w-5 transition-all">
+				@svg.Cancel()
+			</button>
+		</span>
+		<span class="flex items-center gap-1 p-1 bg-yellow-100 rounded-sm">
+			Sparen
+			<button class="hover:bg-red-900 rounded p-1 w-5 transition-all">
+				@svg.Cancel()
+			</button>
+		</span>
+		<span class="flex items-center gap-1 p-1 bg-red-100 rounded-sm">
+			Tanken
+			<button class="hover:bg-red-900 rounded p-1 w-5 transition-all">
+				@svg.Cancel()
+			</button>
+		</span>
+		<div>
+			<input
+				class="inline"
+				name="search"
+				placeholder="Begin Typing To Search ..."
+				hx-post="/tag/search"
+				hx-trigger="input changed delay:250ms, keyup[key=='Enter'], load"
+				hx-target="#tag-search-results"
+			/>
+			<div id="tag-search-results" class="absolute bg-white border-gray-200 border-1 rounded-lg p-4"></div>
+		</div>
+	</div>
+}
+
+templ inlineEditSearch(tags []Tag) {
+	for _,tag:=range(tags) {
+		<p x-data={ tag.Id.String() }>{ tag.Name }</p>
+	}
+}
+
 templ page(tags []Tag) {
 	@core.Breadcrumb([]string{"Home", "Tag"}, []string{"/", "/tag"})
 	<div class="flex flex-wrap gap-20 text-xl mt-10 justify-center">