package dashboard

import "spend-sparrow/internal/types"

templ Dashboard(treasureChests []*types.TreasureChest) {
	<div class="mt-10 h-full">
		<div id="main-chart" class="h-96 mt-10"></div>
		<div id="treasure-chests" class="h-96 mt-10"></div>
		<section>
			<form class="flex items-center justify-end gap-4 mr-40">
				<label for="treasure-chest">Treasure Chest:</label>
				<select id="treasure-chest-id" name="treasure-chest-id" class="bg-white input">
					<option value="">- Select Treasure Chest -</option>
					for _, parent := range treasureChests {
						if parent.ParentId == nil {
							<optgroup label={ parent.Name }>
								for _, child := range treasureChests {
									if child.ParentId != nil && *child.ParentId == parent.Id {
										<option
											value={ child.Id.String() }
										>{ child.Name }</option>
									}
								}
							</optgroup>
						}
					}
				</select>
			</form>
			<div id="treasure-chest" class="h-96 mt-10"></div>
		</section>
	</div>
}