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}" target="_blank">
                    <img src="${img.url}" alt="${img.name}">
                </a>
                <button class="copy-btn" title="Copy URL">Copy URL</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);
                });
            });
            gallery.appendChild(imgContainer);
        });
    })
    .catch(error => console.error("Error loading images:", error));