{{ define "main" }}
  <main class="min-h-screen bg-gray-100">
    <!-- Navigation -->
    <nav class="bg-black text-white p-4 mb-6">
      <div class="container mx-auto flex justify-between items-center">
        <a href="/" class="text-xl font-bold">SamCloud</a>
        <div class="space-x-4">
          <a href="/" class="hover:text-gray-300">Home</a>
          <a href="/gallery" class="hover:text-gray-300">Gallery</a>
        </div>
      </div>
    </nav>

    <!-- Gallery Content -->
    <div class="container mx-auto px-4 py-6">
      <h1 class="text-3xl font-bold mb-4">{{ .Title }}</h1>
      <div class="prose mb-8 text-gray-600">
        {{ .Content }}
      </div>

      <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {{ $imagesDir := .Params.imagesDir }}
        {{ $path := printf "images/gallery/%s" $imagesDir }}
        {{ $images := readDir (printf "static/%s" $path) }}

        {{ range $images }}
          {{ if and (not .IsDir) (.Name | lower | findRE `\.(jpg|jpeg|png|webp)$`) }}
            <div class="aspect-w-1 aspect-h-1 overflow-hidden border rounded shadow hover:shadow-lg transition-shadow duration-300">
              <a href="/{{ $path }}/{{ .Name }}" class="group" data-fslightbox="gallery">
                <img 
                  src="/{{ $path }}/{{ .Name }}" 
                  alt="{{ .Name }}" 
                  class="object-cover w-full h-full transform transition-transform duration-300 group-hover:scale-105"
                  loading="lazy">
              </a>
            </div>
          {{ end }}
        {{ end }}
      </div>
    </div>
  </main>

  <!-- Add Tailwind CSS -->
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  
  <!-- Add FSLightbox for image zooming -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fslightbox/3.4.1/fslightbox.min.js" integrity="sha512-0YoL1wgYXtP/qpZyZ5AIB1kz7fUZJukg1dBoMWOHltHrWzOhMz7kXnhZpWj7FyUGNJ1sAZhTgxEXKgCIZQJ1xw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <style>
    /* Custom styles for the gallery grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 1.5rem;
    }
    
    .aspect-w-1 {
      position: relative;
      padding-bottom: 100%;
    }
    
    .aspect-h-1 > * {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      object-fit: cover;
      object-position: center;
    }
  </style>
{{ end }}