package view

import "github.com/rjNemo/rentease/internal/view/layout"

templ ListBookings(bookings []*ListBookingsViewModel) {
	@layout.BaseLayout() {
		<section class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-4 p-4 w-[98%] mx-auto">
			<hgroup class="flex-shrink-0">
				<h1 class="text-3xl font-bold text-primary tracking-tight">Bookings</h1>
				<h2 class="text-muted text-lg font-normal">Overview of the activity</h2>
			</hgroup>
			<input
				type="search"
				name="search"
				placeholder="Search bookings by name…"
				hx-get="/bookings"
				hx-target="tbody"
				hx-swap="outerHTML"
				hx-trigger="keyup changed delay:500ms"
				class="input input-bordered input-primary w-full md:w-96"
			/>
		</section>
		<div class="overflow-x-auto">
			<table class="table table-zebra w-full">
				<thead>
					<tr>
						<th scope="col" class="text-left px-4 py-2 text-primary">ID</th>
						<th scope="col" class="text-left px-4 py-2 text-primary">Name</th>
						<th scope="col" class="text-left px-4 py-2 text-primary">Total (€)</th>
						<th scope="col" class="text-left px-4 py-2 text-primary">From</th>
						<th scope="col" class="text-left px-4 py-2 text-primary">To</th>
						<th scope="col" class="text-left px-4 py-2 text-primary">Platform</th>
					</tr>
				</thead>
				@BookingLines(bookings)
			</table>
		</div>
	}
}