<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="wi    <!-- Theme toggle button -->
    <button id="themeToggle" class="theme-toggle" title="Switch to dark mode">🌙</button>h=device-width, initial-scale=1.0">
    <title>Sharey - Maintenance</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    
    <!-- Immediate theme application to prevent flash -->
    <script>
        (function() {
            function getCookie(name) {
                const nameEQ = name + "=";
                const ca = document.cookie.split(';');
                for (let i = 0; i < ca.length; i++) {
                    let c = ca[i];
                    while (c.charAt(0) === ' ') c = c.substring(1, c.length);
                    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
                }
                return null;
            }
            
            function getSystemTheme() {
                return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
            }
            
            const savedTheme = getCookie('sharey-theme') || 'auto';
            let actualTheme;
            
            if (savedTheme === 'auto') {
                actualTheme = getSystemTheme();
            } else {
                actualTheme = savedTheme;
            }
            
            if (actualTheme === 'dark') {
                document.documentElement.setAttribute('data-theme', 'dark');
            }
        })();
    </script>
    
    <style>
        .maintenance-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 80vh;
            text-align: center;
            padding: 20px;
        }
        
        .maintenance-icon {
            font-size: 4rem;
            margin-bottom: 20px;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        
        .maintenance-title {
            font-size: 2.5rem;
            color: var(--text-primary);
            margin-bottom: 20px;
        }
        
        .maintenance-message {
            font-size: 1.2rem;
            color: var(--text-secondary);
            margin-bottom: 30px;
            max-width: 600px;
            line-height: 1.6;
        }
        
        .maintenance-return {
            font-size: 1rem;
            color: var(--text-secondary);
            background: var(--bg-secondary);
            padding: 15px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }
        
        .refresh-button {
            display: inline-block;
            margin-top: 20px;
            padding: 12px 24px;
            background: var(--border-color);
            color: white;
            text-decoration: none;
            border-radius: 6px;
            transition: background-color 0.3s ease;
        }
        
        .refresh-button:hover {
            background: var(--text-secondary);
        }
    </style>
</head>
<body>
    <!-- Theme toggle button -->
    <button id="themeToggle" class="theme-toggle" title="Switch to dark mode">�</button>
    
    <div class="container">
        <div class="maintenance-container">
            <div class="maintenance-icon">🔧</div>
            <h1 class="maintenance-title">Under Maintenance</h1>
            <p class="maintenance-message">{{ message }}</p>
            
            {% if estimated_return %}
            <div class="maintenance-return">
                <strong>Estimated return:</strong> {{ estimated_return }}
            </div>
            {% endif %}
            
            <a href="/" class="refresh-button">🔄 Check Again</a>
        </div>
    </div>

    <script src="{{ url_for('static', filename='script.js') }}"></script>
</body>
</html>
