package view

import "github.com/rjNemo/rentease/internal/i18n"

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">{ i18n.Localize(ctx, "booking.lines.check_in") }</div>
							<div class="font-medium">{ b.From }</div>
						</div>
						<div class="text-sm">
							<div class="text-gray-500">{ i18n.Localize(ctx, "booking.lines.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">
							{ i18n.Localize(ctx, "booking.lines.id_label") }: { b.Id }
						</div>
					</div>
					<div class="card-actions justify-end mt-4">
						<a href={ b.Url } class="btn btn-primary btn-sm">
							{ i18n.Localize(ctx, "booking.lines.view_details") }
						</a>
					</div>
				</article>
			</li>
		}
	</ul>
}