spend-sparrow/internal/tag/template.templ

package tag

import (
	"spend-sparrow/internal/core"
	"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">
		@newItem()
		for _,tag:=range(tags ) {
			@item(tag)
		}
	</div>
}

templ editNew() {
	<div class="flex flex-col h-full">
		@core.Breadcrumb([]string{"Home", "Tag", "New"}, []string{"/", "/tag", "/tag/new"})
		<div class="flex justify-center items-center flex-1">
			<form
				hx-post={ "/tag/new" }
				class="grid grid-cols-4 items-center gap-4 max-w-2xl"
			>
				<label for="timestamp" class="text-sm text-gray-500">Name</label>
				<input
					autofocus
					name="name"
					type="text"
					class="bg-white input datetime col-span-3"
				/>
				<div class="flex gap-6 justify-end col-span-4">
					<a href="/tag" class="col-start-3 p-2 px-4 decoration-yellow-400 decoration-[0.25rem] hover:bg-gray-200 rounded-lg hover:underline flex items-center gap-2 justify-center">
						<span class="h-4 w-4">
							@svg.Cancel()
						</span>
						<span>
							Cancel
						</span>
					</a>
					<button type="submit" class="col-start-4 p-2 px-4 decoration-yellow-400 decoration-[0.25rem] hover:bg-gray-200 rounded-lg hover:underline flex items-center gap-2 justify-center">
						@svg.Save()
						<span>
							Save
						</span>
					</button>
				</div>
			</form>
		</div>
	</div>
}

templ edit(tag Tag) {
	<div class="flex flex-col h-full">
		@core.Breadcrumb([]string{"Home", "Tag", tag.Name}, []string{"/", "/tag", "/tag/" + tag.Id.String()})
		<div class="flex justify-center items-center flex-1">
			<form
				hx-post={ "/tag/" + tag.Id.String() }
				class="grid grid-cols-4 items-center gap-4 max-w-2xl"
			>
				<label for="timestamp" class="text-sm text-gray-500">Name</label>
				<input
					autofocus
					name="name"
					type="text"
					value={ tag.Name }
					class="bg-white input datetime col-span-3"
				/>
				<div class="flex flex-row-reverse gap-6 justify-end col-span-4">
					<button type="submit" class="col-start-4 p-2 px-4 decoration-yellow-400 decoration-[0.25rem] hover:bg-gray-200 rounded-lg hover:underline flex items-center gap-2 justify-center">
						@svg.Save()
						<span>
							Save
						</span>
					</button>
					<a href="/tag" class="col-start-3 p-2 px-4 decoration-yellow-400 decoration-[0.25rem] hover:bg-gray-200 rounded-lg hover:underline flex items-center gap-2 justify-center">
						<span class="h-4 w-4">
							@svg.Cancel()
						</span>
						<span>
							Cancel
						</span>
					</a>
					<button
						hx-delete={ "/tag/" + tag.Id.String() }
						hx-confirm={ "Do you really want to delete '" + tag.Name + "'" }
						class="col-start-4 p-2 px-4 decoration-yellow-400 decoration-[0.25rem] hover:bg-red-50 rounded-lg hover:underline flex items-center gap-2 justify-center"
					>
						@svg.Delete()
						<span>
							Delete
						</span>
					</button>
				</div>
			</form>
		</div>
	</div>
}

templ newItem() {
	<a
		href="/tag/new"
		class="p-5 w-64 h-64 flex gap-10 active:bg-gray-200 flex-col justify-center items-center hover:bg-gray-100 transition-all cursor-pointer rounded-lg bg-gray-50 border-1 border-gray-300"
	>
		New Tag
		<div class="w-10">
			@svg.Plus()
		</div>
	</a>
}

templ item(tag Tag) {
	<a href={ "/tag/" + tag.Id.String() } class="p-5 w-64 h-64 flex gap-10 active:bg-gray-200 flex-col justify-center items-center hover:bg-gray-100 transition-all cursor-pointer rounded-lg bg-gray-50 border-1 border-gray-300">
		<span>
			{ tag.Name }
		</span>
	</a>
}