{{ define "main" }}
<div class="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800">
  {{ partial "nav.html" . }}

  <div class="container mx-auto px-4 py-16">
    <h1 class="text-4xl md:text-5xl font-bold mb-8 text-white text-center">{{ .Title }}</h1>
    
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      {{ range (readDir (printf "static/images/gallery/%s" .File.Dir)) }}
        {{ if and (not .IsDir) (or (strings.HasSuffix (lower .Name) ".jpg") (strings.HasSuffix (lower .Name) ".jpeg") (strings.HasSuffix (lower .Name) ".png") (strings.HasSuffix (lower .Name) ".webp")) }}
          <div class="relative aspect-w-1 aspect-h-1 rounded-lg overflow-hidden shadow-lg">
            <a href="/images/gallery/{{ $.File.Dir }}/{{ .Name }}" data-fslightbox="gallery">
              <img 
                src="/images/gallery/{{ $.File.Dir }}/{{ .Name }}" 
                alt="{{ .Name }}" 
                class="w-full h-full object-cover transition-transform duration-300 hover:scale-105"
                loading="lazy"
              />
            </a>
          </div>
        {{ end }}
      {{ end }}
    </div>
  </div>
</div>

<!-- Include FS Lightbox for gallery popups -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fslightbox/3.4.1/fslightbox.min.js"></script>

<style>
.aspect-w-1 {
    position: relative;
    padding-bottom: 100%;
}

.aspect-w-1 > * {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
</style>
{{ end }}