{{ define "main" }}
<div class="page-wrapper bg-gray-900 min-h-screen text-white">
  <!-- Navigation -->
  <nav class="bg-black/50 backdrop-blur-sm fixed w-full z-50">
    <div class="container mx-auto px-4 py-3">
      <div class="flex justify-between items-center">
        <a href="/" class="text-2xl font-bold">SamCloud</a>
        <div class="space-x-6">
          <a href="/" class="hover:text-blue-400 transition-colors">Home</a>
          <a href="/gallery" class="hover:text-blue-400 transition-colors">Gallery</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- Main Content -->
  <main class="container mx-auto px-4 pt-20 pb-12">
    <header class="mb-12 text-center">
      <h1 class="text-4xl font-bold mb-4">{{ .Title }}</h1>
      <div class="max-w-2xl mx-auto text-gray-300">
        {{ .Content }}
      </div>
    </header>

    <!-- Image Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
      {{ with .Params.imagesDir }}
        {{ $path := printf "images/gallery/%s" . }}
        {{ $staticPath := printf "static/%s" $path }}
        {{ if fileExists $staticPath }}
          {{ range (readDir $staticPath) }}
          <div class="group relative aspect-square overflow-hidden bg-gray-800 rounded-lg">
            <a href="/{{ $path }}/{{ .Name }}" class="block w-full h-full" data-fslightbox="gallery">
              <img 
                src="/{{ $path }}/{{ .Name }}" 
                alt="{{ .Name }}" 
                class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
              <div class="absolute inset-0 bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
            </a>
          </div>
          {{ end }}
        {{ else }}
          <div class="col-span-full text-center text-gray-400">
            <p>No images found in gallery directory.</p>
          </div>
        {{ end }}
      {{ end }}
    </div>
  </main>
</div>

<!-- Scripts and Styles -->
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/fslightbox/3.4.1/fslightbox.min.js"></script>
<style>
  /* Remove any default margins */
  body { margin: 0; }
  
  /* Ensure images maintain aspect ratio */
  img { max-width: 100%; height: auto; }
  
  /* Smooth scrolling */
  html { scroll-behavior: smooth; }
  
  /* Image hover effect */
  .group:hover img {
    transform: scale(1.1);
  }
</style>
{{ end }}