package view

import ()

templ BookingLines(bookings []*ListBookingsViewModel) {
	<ul id="booking-cards" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 list-none">
		for _, b := range bookings {
			<li class="card bg-base-200 shadow-xl hover:shadow-2xl transition-shadow duration-200">
				<article class="card-body">
					<div class="flex justify-between items-start">
						<h2 class="card-title">
							if b.Canceled {
								<span class="line-through text-gray-500">{ b.Name }</span>
							} else {
								<span>{ b.Name }</span>
							}
						</h2>
						<div class="badge badge-primary">{ b.Platform }</div>
					</div>
					<div class="grid grid-cols-2 gap-2 my-4">
						<div class="text-sm">
							<div class="text-gray-500">Check-in</div>
							<div class="font-medium">{ b.From }</div>
						</div>
						<div class="text-sm">
							<div class="text-gray-500">Check-out</div>
							<div class="font-medium">{ b.To }</div>
						</div>
					</div>
					<div class="flex justify-between items-center mt-2">
						<div class="text-lg font-bold text-primary">
							{ b.Total } €
						</div>
						<div class="text-sm text-gray-500">
							ID: { b.Id }
						</div>
					</div>
					<div class="card-actions justify-end mt-4">
						<a href={ b.Url } class="btn btn-primary btn-sm">
							View Details
						</a>
					</div>
				</article>
			</li>
		}
	</ul>
}