{% load static %}

<style>
.global-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(var(--body-bg-rgb, 255, 255, 255), 0.8);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.3s ease-out;
}

.global-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--link-fg);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    margin-top: 15px;
    color: var(--body-quiet-color);
    font-size: 14px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
</style>

<div class="global-loading-overlay">
    <div style="text-align: center;">
        <div class="loading-spinner"></div>
        <div class="loading-text">Loading...</div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle global page loading
    const globalLoadingOverlay = document.querySelector('.global-loading-overlay');
    if (globalLoadingOverlay) {
        globalLoadingOverlay.classList.add('hidden');
    }

    // Handle form submissions
    document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', function() {
            // Show the global loading overlay with "Sending..." text
            if (globalLoadingOverlay) {
                globalLoadingOverlay.querySelector('.loading-text').textContent = 'Sending...';
                globalLoadingOverlay.classList.remove('hidden');
            }
            
            // Disable submit buttons
            form.querySelectorAll('input[type="submit"], button[type="submit"]').forEach(button => {
                button.disabled = true;
                if (button.tagName === 'INPUT') {
                    button.value = 'Sending...';
                } else {
                    button.textContent = 'Sending...';
                }
            });
        });
    });
});
</script> 