<div class="max-w-7xl mx-auto px-4 py-20">
    <div class="mb-12">
        <h1 class="text-5xl font-black text-gray-900 mb-4 tracking-tight leading-none text-center"><%= t('gallery.title') %></h1>
        <p class="text-xl text-gray-500 font-medium italic text-center"><%= t('gallery.subtitle') %></p>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <% if (collection && collection.length> 0) { %>
            <% collection.forEach(item=> { %>
                <div
                    class="aspect-square rounded-3xl overflow-hidden group relative shadow-lg hover:shadow-2xl transition-shadow cursor-pointer"
                    data-gallery-item data-gallery-src="<%= item.image_url %>" data-gallery-title="<%= item.title %>">
                    <img src="<%= item.image_url %>" alt="<%= item.title %>"
                        class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                    <div
                        class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-6">
                        <p class="font-bold text-white text-lg">
                            <%= item.title %>
                        </p>
                        <p class="text-gray-300 text-xs mt-1 uppercase tracking-widest font-bold">
                            <%= formatDate(item.created_at) %>
                        </p>
                    </div>
                </div>
                <% }) %>
                    <% } else { %>
                        <div class="col-span-full py-20 text-center">
                            <p class="text-gray-500 italic"><%= t('gallery.empty') %></p>
                        </div>
                        <% } %>
    </div>
</div>

<!-- Gallery Modal -->
<div id="gallery-modal"
    class="fixed inset-0 z-50 hidden items-center justify-center bg-black/80 p-4">
    <div class="relative w-full max-w-6xl">
        <button id="gallery-modal-close"
            class="absolute -top-10 right-0 text-white text-3xl hover:text-gray-300 transition-colors">
            <i class="fas fa-times"></i>
        </button>
        <div class="bg-black rounded-2xl overflow-hidden shadow-2xl">
            <img id="gallery-modal-image" src="" alt=""
                class="w-full max-h-[85vh] object-contain bg-black">
        </div>
        <p id="gallery-modal-title" class="text-center text-white mt-4 font-semibold"></p>
    </div>
</div>

<script>
    const galleryModal = document.getElementById('gallery-modal');
    const galleryModalImage = document.getElementById('gallery-modal-image');
    const galleryModalTitle = document.getElementById('gallery-modal-title');
    const galleryModalClose = document.getElementById('gallery-modal-close');

    const openGalleryModal = (src, title) => {
        galleryModalImage.src = src;
        galleryModalImage.alt = title || '';
        galleryModalTitle.textContent = title || '';
        galleryModal.classList.remove('hidden');
        galleryModal.classList.add('flex');
        document.body.style.overflow = 'hidden';
    };

    const closeGalleryModal = () => {
        galleryModal.classList.add('hidden');
        galleryModal.classList.remove('flex');
        galleryModalImage.src = '';
        document.body.style.overflow = '';
    };

    document.querySelectorAll('[data-gallery-item]').forEach((item) => {
        item.addEventListener('click', () => {
            openGalleryModal(item.dataset.gallerySrc, item.dataset.galleryTitle);
        });
    });

    galleryModalClose.addEventListener('click', closeGalleryModal);
    galleryModal.addEventListener('click', (e) => {
        if (e.target === galleryModal) {
            closeGalleryModal();
        }
    });

    window.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            closeGalleryModal();
        }
    });
</script>
