<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}AtlasUI - MongoDB Atlas Administration{% endblock %}</title>

    <!-- Favicons -->
    <link rel="icon" type="image/svg+xml" href="{{ url_for('static', path='/favicon.svg') }}">
    <link rel="alternate icon" type="image/x-icon" href="{{ url_for('static', path='/favicon.ico') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', path='/favicon.svg') }}">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{{ url_for('static', path='/css/style.css') }}">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-success">
        <div class="container-fluid">
            <a class="navbar-brand" href="/">
                <i class="bi bi-database"></i> AtlasUI
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="/organizations">
                            <i class="bi bi-diagram-3"></i> Organizations
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/projects">
                            <i class="bi bi-folder"></i> Projects
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/clusters">
                            <i class="bi bi-hdd-rack"></i> Clusters
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/clusters">
                            <i class="bi bi-database"></i> Databases
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <button class="btn btn-outline-light btn-sm" id="exitServerBtn" data-bs-toggle="modal" data-bs-target="#exitServerModal">
                            <i class="bi bi-power"></i> Exit
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container-fluid mt-2">
        {% block content %}{% endblock %}
    </div>

    <!-- Exit Server Confirmation Modal -->
    <div class="modal fade" id="exitServerModal" tabindex="-1" aria-labelledby="exitServerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="exitServerModalLabel">
                        <i class="bi bi-exclamation-triangle-fill"></i> Confirm Server Shutdown
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p><strong>Are you sure you want to shut down the AtlasUI server?</strong></p>
                    <p class="mb-0">This will:</p>
                    <ul class="mb-0">
                        <li>Stop the web server</li>
                        <li>Close all active MongoDB Atlas sessions</li>
                        <li>Terminate all background operations</li>
                    </ul>
                    <p class="mt-3 mb-0 text-muted small">
                        <i class="bi bi-info-circle"></i> You will need to restart the server manually to continue using AtlasUI.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="bi bi-x-circle"></i> Cancel
                    </button>
                    <button type="button" class="btn btn-danger" onclick="confirmShutdown()">
                        <i class="bi bi-power"></i> Shutdown Server
                    </button>
                </div>
            </div>
        </div>
    </div>

    <footer class="mt-5 py-3 bg-light">
        <div class="container text-center">
            <span class="text-muted">AtlasUI v{{ app_version }} - MongoDB Atlas Administration Interface</span>
            <br>
            <span class="text-muted small">by <a href="mailto:{{ app_author }}" class="text-decoration-none">{{ app_author }}</a></span>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', path='/js/app.js') }}"></script>
    <script src="{{ url_for('static', path='/js/operations-queue.js') }}?v=22"></script>
    <script>
        async function confirmShutdown() {
            // Close the modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('exitServerModal'));
            if (modal) {
                modal.hide();
            }

            // Show a clean shutdown message immediately
            document.body.innerHTML = `
                <div style="display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <div style="background: white; padding: 3rem; border-radius: 1rem; box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center; max-width: 500px;">
                        <div style="font-size: 4rem; color: #667eea; margin-bottom: 1rem;">
                            <i class="bi bi-power"></i>
                        </div>
                        <h2 style="color: #333; margin-bottom: 1rem;">Shutting Down...</h2>
                        <p style="color: #666; margin-bottom: 0.5rem;">AtlasUI server is shutting down</p>
                        <div class="spinner-border text-primary mt-3" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
            `;

            try {
                // Attempt to call the shutdown endpoint
                const response = await fetch('/api/server/shutdown', {
                    method: 'POST'
                });

                // Update the message whether the call succeeded or not
                setTimeout(() => {
                    document.body.innerHTML = `
                        <div style="display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                            <div style="background: white; padding: 3rem; border-radius: 1rem; box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center; max-width: 500px;">
                                <div style="font-size: 4rem; color: #28a745; margin-bottom: 1rem;">
                                    <i class="bi bi-check-circle-fill"></i>
                                </div>
                                <h2 style="color: #333; margin-bottom: 1rem;">Server Stopped</h2>
                                <p style="color: #666; margin-bottom: 0.5rem;">AtlasUI has been shut down successfully</p>
                                <p style="color: #999; font-size: 0.875rem;">You can close this window</p>
                            </div>
                        </div>
                    `;
                }, 500);
            } catch (err) {
                // Server already shut down, connection refused - this is expected
                setTimeout(() => {
                    document.body.innerHTML = `
                        <div style="display: flex; justify-content: center; align-items: center; height: 100vh; flex-direction: column; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                            <div style="background: white; padding: 3rem; border-radius: 1rem; box-shadow: 0 20px 60px rgba(0,0,0,0.3); text-align: center; max-width: 500px;">
                                <div style="font-size: 4rem; color: #28a745; margin-bottom: 1rem;">
                                    <i class="bi bi-check-circle-fill"></i>
                                </div>
                                <h2 style="color: #333; margin-bottom: 1rem;">Server Stopped</h2>
                                <p style="color: #666; margin-bottom: 0.5rem;">AtlasUI has been shut down successfully</p>
                                <p style="color: #999; font-size: 0.875rem;">You can close this window</p>
                            </div>
                        </div>
                    `;
                }, 500);
            }
        }
    </script>
    {% block scripts %}{% endblock %}
</body>
</html>
