package dashboard

import "spend-sparrow/internal/types"

templ Dashboard(summary *types.DashboardMonthlySummary) {
	<div class="mt-10">
		<form hx-get="/" hx-target="#dashboard" hx-trigger="change" hx-push-url="true">
			<label for="month">Select Month:</label>
			<input
				name="month"
				type="date"
				class="input"
				value={ summary.Month.String() }
			/>
		</form>
		<div id="dashboard">
			@DashboardData(summary)
		</div>
	</div>
}

templ DashboardData(summary *types.DashboardMonthlySummary) {
	<div class="mt-10">
		<section class="grid grid-cols-[auto_auto_auto_auto_1fr] gap-4">
			<span>Savings</span>
			<span>Income</span>
			<span>Expenses</span>
			<span>Total</span>
			<span></span>
			<span>{ types.FormatEuros(summary.Savings) }</span>
			@balance(summary.Income)
			@balance(summary.Expenses)
			@balance(summary.Total)
		</section>
	</div>
}

templ balance(balance int64) {
	if balance < 0 {
		<span class="text-red-700">{ types.FormatEuros(balance) }</span>
	} else {
		<span class="text-green-700">{ types.FormatEuros(balance) }</span>
	}
}