package main

// contactSheetComponent renders the contact sheet grid with sprocket frames.
templ contactSheetComponent(frames []ContactFrame) {
	<section data-block="noir:contact_sheet" class="py-12">
		<div class="max-w-6xl mx-auto px-6">
			if len(frames) == 0 {
				<div class="hairline p-12 text-center tracked-mono" style="color: hsl(var(--mutedForeground));">
					Add frames to populate the contact sheet.
				</div>
			} else {
				<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
					for _, frame := range frames {
						<figure class="noir-sprocket noir-figure" data-frame-number={ frame.Frame }>
							<span class="noir-frame-number tracked-mono" style="color: hsl(var(--mutedForeground));">
								{ frame.Frame }
							</span>
							if frame.Image != "" {
								<img
									src={ frame.Image }
									alt={ frame.Label }
									loading="lazy"
									class="w-full h-auto block mt-2"
								/>
							} else {
								<div class="aspect-square hairline" style="background-color: hsl(var(--muted));"></div>
							}
							if frame.Label != "" {
								<figcaption class="tracked-mono mt-2" style="color: hsl(var(--mutedForeground));">
									{ frame.Label }
								</figcaption>
							}
						</figure>
					}
				</div>
			}
		</div>
	</section>
}