package budget

import "spend-sparrow/internal/template/svg"

templ page(budgets []Budget) {
	<!-- for _,name:=range([]string{"Lebensmittel", "Tanken", "Drogerie", "Milch", "Parken"}) { -->
	<div class="flex flex-wrap gap-20 text-xl mt-10 justify-center">
		@newItem()
		for _,budget:=range(budgets ) {
			@item(budget)
		}
	</div>
}

templ editNew() {
	<dialog id="newBudget" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-lg openDialogModal">
		<form
			hx-post={ "/transaction/new" }
			class="flex justify-end gap-4 items-center "
		>
			<div class="grid grid-cols-[auto_auto] items-center gap-4 mr-auto">
				<label for="timestamp" class="text-sm text-gray-500">Name</label>
				<input
					autofocus
					name="name"
					type="text"
					class="bg-white input datetime"
				/>
				<label for="value" class="text-sm text-gray-500">Value</label>
				<input
					name="value"
					type="number"
					class="mr-auto bg-white input"
				/>
			</div>
			<button type="submit" class="button button-neglect px-1 flex items-center gap-2">
				@svg.Save()
				<span>
					Save
				</span>
			</button>
			<button commandfor="newBudget" command="close" class="button button-neglect px-1 flex items-center gap-2">
				<span class="h-4 w-4">
					@svg.Cancel()
				</span>
				<span>
					Cancel
				</span>
			</button>
		</form>
	</dialog>
}

templ newItem() {
	<button
		hx-get="/budget/new"
		hx-target="#dialogContainer"
		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 Budget
		<div class="w-10">
			@svg.Plus()
		</div>
	</button>
}

templ item(budget Budget) {
	<section class="flex flex-col w-64 h-64 p-5 rounded-lg bg-gray-50 border-1 border-gray-300 ">
		<span>
			{ budget.Description }
		</span>
		<span>
			{ 200 }€
		</span>
	</section>
}