document.getElementById('showMilkaButton').addEventListener('click', async function() {
    try {
        const milkaModal = document.createElement('div');
        milkaModal.className = 'modal-backdrop';
        milkaModal.innerHTML = `
            <div class="modal-content" onclick="event.stopPropagation()">
                <div class="modal-header">
                    <h3 style="font-family: Arial, sans-serif; font-weight: normal; font-size: 1.2rem; margin: 0;">wide_gold_storage_silo</h3>
                    <button class="modal-close">×</button>
                </div>
                <div class="modal-body">
                    <img alt="Milka" class="modal-image" 
                         onload="this.style.opacity = '1'"
                         onerror="this.style.display = 'none'"
                         style="opacity: 0; transition: opacity 0.3s ease;">
                </div>
            </div>
        `;
        
        document.body.appendChild(milkaModal);

        // Load image with authentication
        const img = milkaModal.querySelector('.modal-image');
        fetch('/api/protected-image?image=milka.jpg', {
            headers: {
                'x-auth': 'milka-authenticated'
            }
        })
        .then(response => response.blob())
        .then(blob => {
            img.src = URL.createObjectURL(blob);
        })
        .catch(error => {
            console.error('Error loading image:', error);
            img.style.display = 'none';
        });
        
        const closeModal = () => {
            document.body.removeChild(milkaModal);
            document.body.style.overflow = ''; // Restore scroll
            document.removeEventListener('keydown', handleEscape); // Clean up listener
        };
        
        milkaModal.querySelector('.modal-close').addEventListener('click', closeModal);
        milkaModal.addEventListener('click', closeModal); // Close on backdrop click

        // Prevent scrolling when modal is open
        document.body.style.overflow = 'hidden';
        
        // Handle escape key
        const handleEscape = (e) => {
            if (e.key === 'Escape') {
                closeModal();
            }
        };
        document.addEventListener('keydown', handleEscape);
    } catch (error) {
        console.error('Error loading Milka:', error);
    }
});