package budget

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

templ page() {
	<div class="flex flex-wrap gap-20 text-xl mt-10 justify-center">
		@newItem()
		for i:=range(10) {
			@item(i)
		}
	</div>
}

templ Items() {
	<div></div>
}

templ Edit() {
	<div></div>
}

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

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