{% load wagtailcore_tags wagtailimages_tags %}

{% if self.collection %}
<div class="image-collection-gallery-block" x-data="imageCollectionGallery()">
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        {% for image in self.collection.images.all %}
            <div class="group relative overflow-hidden rounded-lg cursor-pointer"
                 @click="openModal({{ forloop.counter0 }})">
                {% picture image format-{avif,webp,jpeg} fill-{400x300,600x450} sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, (max-width: 1024px) 33vw, 25vw" loading="lazy" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" alt="{{ image.title }}" %}
                
                <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-opacity duration-300 flex items-center justify-center">
                    <svg class="w-8 h-8 text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7"></path>
                    </svg>
                </div>
            </div>
        {% endfor %}
    </div>

    <!-- Modal -->
    <div x-show="showModal" 
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0"
         x-transition:enter-end="opacity-100"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         class="fixed inset-0 z-50 overflow-y-auto"
         @click.self="closeModal()"
         @keydown.escape.window="closeModal()"
         style="display: none;">
        
        <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
            <div class="fixed inset-0 transition-opacity bg-black bg-opacity-75" @click="closeModal()"></div>

            <div class="relative inline-block overflow-hidden bg-white rounded-lg shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
                <button @click="closeModal()" class="absolute top-4 right-4 z-10 text-white hover:text-gray-300 focus:outline-none">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>

                <div class="relative">
                    <template x-for="(image, index) in images" :key="index">
                        <div x-show="currentIndex === index" class="relative">
                            <img :src="image.src" :alt="image.alt" class="w-full h-auto">
                            
                            <div x-show="image.caption || image.attribution" class="bg-white px-6 py-4">
                                <p x-show="image.caption" x-text="image.caption" class="text-gray-700"></p>
                                <p x-show="image.attribution" class="text-sm text-gray-500 mt-1">
                                    <cite x-text="image.attribution"></cite>
                                </p>
                            </div>
                        </div>
                    </template>

                    <!-- Navigation arrows -->
                    <button x-show="images.length > 1" 
                            @click="previousImage()" 
                            class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-75 focus:outline-none">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                        </svg>
                    </button>

                    <button x-show="images.length > 1" 
                            @click="nextImage()" 
                            class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-75 focus:outline-none">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function imageCollectionGallery() {
    return {
        showModal: false,
        currentIndex: 0,
        images: [
            {% for image in self.collection.images.all %}
                {% image image max-1600x1200 format-webp preserve-svg as full_image %}
                {
                    src: '{{ full_image.url }}',
                    alt: '{{ image.title|escapejs }}',
                    caption: '{{ image.caption|default:""|escapejs }}',
                    attribution: '{{ image.attribution|default:""|escapejs }}'
                }{% if not forloop.last %},{% endif %}
            {% endfor %}
        ],

        openModal(index) {
            this.currentIndex = index;
            this.showModal = true;
            document.body.style.overflow = 'hidden';
        },

        closeModal() {
            this.showModal = false;
            document.body.style.overflow = '';
        },

        nextImage() {
            this.currentIndex = (this.currentIndex + 1) % this.images.length;
        },

        previousImage() {
            this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
        }
    }
}
</script>
{% endif %}
