package pages

import (
	"fmt"
	"git.schreifuchs.ch/schreifuchs/schreifuchs.ch/internal/components/gallery"
)

templ GallerySet(g gallery.Set) {
	<div
		class="grid gap-5 grid-cols-1 lg:hidden m-5"
	>
		for _,img := range g.SM.Images {
			<img
				src={ "/images/" + img.UID + "?w=600" }
				loading="lazy"
				class="w-full"
				alt="Gallery item"
			/>
		}
	</div>
	<div class="hidden lg:block 3xl:hidden m-5">
		@Gallery(g.SM)
	</div>
	<div class="hidden 3xl:block 6xl:hidden m-5">
		@Gallery(g.LG)
	</div>
	<div class="hidden 6xl:block m-5">
		@Gallery(g.XLG)
	</div>
}

templ Gallery(g gallery.Gallery) {
	<div
		class="grid gap-5"
		style={ fmt.Sprintf("grid-template-columns: repeat(%d, 1fr); grid-template-rows: repeat(%d, auto);", g.GridWith, g.GridHeight) }
	>
		for _, img := range g.Images {
			<div
				style={ fmt.Sprintf("grid-column: %d / span %d; grid-row: %d / span %d;aspect-ratio: %d / %d;", img.X+1, img.Width, img.Y+1, img.Height, img.Width, img.Height) }
				class="overflow-hidden shadow-sm"
			>
				<img
					src={ "/images/" + img.UID + "?w=800" }
					loading="lazy"
					class="w-full h-full object-cover"
					alt="Gallery item"
				/>
			</div>
		}
	</div>
}