// Gallery functionality
fetch("/images")
    .then(response => {
        if (!response.ok) throw new Error("Failed to fetch images.");
        return response.json();
    })
    .then(images => {
        const gallery = document.getElementById("gallery");
        images.forEach(img => {
            const imgContainer = document.createElement("div");
            imgContainer.className = "image-container";
            imgContainer.innerHTML = `
                <a href="${img.url}" class="glightbox" data-gallery="gallery">
                    <img src="${img.url}" alt="${img.name}">
                </a>
                <button class="copy-btn" title="Copy URL">Copy URL</button>
                <button class="open-btn" title="Open Image">Open</button>
            `;
            const copyBtn = imgContainer.querySelector('.copy-btn');
            copyBtn.addEventListener('click', (e) => {
                e.preventDefault();
                navigator.clipboard.writeText(img.url).then(() => {
                    copyBtn.textContent = 'Copied!';
                    setTimeout(() => copyBtn.textContent = 'Copy URL', 1200);
                });
            });

            const openBtn = imgContainer.querySelector('.open-btn');
            openBtn.addEventListener('click', (e) => {
                e.preventDefault();
                window.open(img.url, '_blank');
            });

            gallery.appendChild(imgContainer);
        });

        // Initialize GLightbox after images are loaded
        const lightbox = GLightbox({
            touchNavigation: true,
            loop: true,
            autoplayVideos: false
        });
    })
    .catch(error => console.error("Error loading images:", error));