{{ define "main" }}
<div class="bg-gray-900 min-h-screen py-16 px-4 sm:px-6 lg:px-8" 
     x-data="{ 
        lightboxOpen: false, 
        activeImage: '', 
        activeCaption: '',
        images: [
            {{ range .Params.images }}
            { url: '{{ .url }}', caption: '{{ .caption }}' },
            {{ end }}
        ],
        currentIndex: 0,
        openLightbox(index) {
            this.currentIndex = index;
            this.activeImage = this.images[index].url;
            this.activeCaption = this.images[index].caption;
            this.lightboxOpen = true;
        },
        next() {
            this.currentIndex = (this.currentIndex + 1) % this.images.length;
            this.activeImage = this.images[this.currentIndex].url;
            this.activeCaption = this.images[this.currentIndex].caption;
        },
        prev() {
            this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
            this.activeImage = this.images[this.currentIndex].url;
            this.activeCaption = this.images[this.currentIndex].caption;
        }
     }"
     @keydown.escape.window="lightboxOpen = false"
     @keydown.arrow-right.window="next()"
     @keydown.arrow-left.window="prev()">
    
    <div class="max-w-7xl mx-auto">
        <div class="text-center mb-12">
            <a href="/albums/" class="text-primary hover:text-emerald-700 font-medium mb-4 inline-block">&larr; Back to Albums</a>
            <h1 class="text-4xl font-extrabold text-gray-100">{{ .Title }}</h1>
            <p class="mt-4 text-gray-300">{{ .Description }}</p>
        </div>

        <!-- Masonry Grid -->
        <div class="columns-1 md:columns-2 lg:columns-3 gap-8 space-y-8">
            <template x-for="(img, index) in images" :key="index">
                <div class="break-inside-avoid rounded-xl overflow-hidden shadow-md hover:shadow-xl transition-all cursor-pointer bg-gray-800"
                     @click="openLightbox(index)">
                    
                    <template x-if="img.url.toLowerCase().endsWith('.mov') || img.url.toLowerCase().endsWith('.mp4')">
                        <video class="w-full h-auto object-cover" controls preload="metadata">
                            <source :src="img.url">
                            Your browser does not support the video tag.
                        </video>
                    </template>
                    
                    <template x-if="!(img.url.toLowerCase().endsWith('.mov') || img.url.toLowerCase().endsWith('.mp4'))">
                        <img :src="img.url" :alt="img.caption" class="w-full h-auto">
                    </template>

                    <div class="p-4" x-show="img.caption">
                        <p class="text-sm text-gray-600" x-text="img.caption"></p>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- Lightbox Modal -->
    <div x-show="lightboxOpen" 
         style="display: none;"
         class="fixed inset-0 z-[100] flex items-center justify-center bg-black/90 backdrop-blur-sm"
         x-transition.opacity>
         
        <!-- Close Button -->
        <button @click="lightboxOpen = false" class="absolute top-4 right-4 text-white text-4xl font-light hover:text-gray-300 focus:outline-none">&times;</button>
        
        <!-- Nav Buttons -->
        <button @click="prev()" class="absolute left-4 text-white text-4xl font-light hover:text-gray-300 focus:outline-none p-4">&lsaquo;</button>
        <button @click="next()" class="absolute right-4 text-white text-4xl font-light hover:text-gray-300 focus:outline-none p-4">&rsaquo;</button>

        <!-- Image/Video Display -->
        <div class="max-w-5xl max-h-screen p-4 flex flex-col items-center justify-center w-full">
            
            <template x-if="activeImage.toLowerCase().endsWith('.mov') || activeImage.toLowerCase().endsWith('.mp4')">
                <video controls autoplay class="max-h-[85vh] max-w-full rounded-lg shadow-2xl">
                    <source :src="activeImage">
                    Your browser does not support the video tag.
                </video>
            </template>

            <template x-if="!(activeImage.toLowerCase().endsWith('.mov') || activeImage.toLowerCase().endsWith('.mp4'))">
                <img :src="activeImage" class="max-h-[85vh] max-w-full rounded-lg shadow-2xl object-contain">
            </template>

            <p x-text="activeCaption" class="text-white mt-4 text-lg font-medium tracking-wide"></p>
            <p class="text-gray-400 text-sm mt-1" x-text="(currentIndex + 1) + ' / ' + images.length"></p>
        </div>
    </div>
</div>
{{ end }}