<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}AtlasServer{% endblock %}</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>
    <link rel="icon" href="/static/svg/atlas.svg" />
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --sidebar-width: 250px;
            --sidebar-collapsed-width: 80px;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent 40%),
               radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.05), transparent 30%),
               #050715;
        }
        
        .glass-effect {
            backdrop-filter: blur(12px);
            background: rgba(17, 24, 39, 0.65);
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.36);
        }

        [data-lucide] {
            transition: transform 0.2s ease;
        }

        /* Esto hace que el icono se anime cuando el PADRE recibe hover */
        a:hover [data-lucide], 
        button:hover [data-lucide],
        .hover-trigger:hover [data-lucide] {
            transform: scale(1.1);
        }
        /* Scrollbar styles */
        ::-webkit-scrollbar {
            width: 10px;
        }
        
        ::-webkit-scrollbar-track {
            background: #1f2937;
            border-radius: 5px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #4b5563;
            border-radius: 5px;
            border: 2px solid #1f2937;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #6b7280;
        }
        
        .status-indicator {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            margin-right: 8px;
        }
        
        .status-indicator.running {
            background-color: #10b981;
        }
        
        .status-indicator.stopped {
            background-color: #6b7280;
        }
        
        .status-indicator.error {
            background-color: #ef4444;
        }
        
        .status-indicator.unknown {
            background-color: #f59e0b;
        }
        
        .status-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
            margin-left: 1rem;
        }
        
        .status-badge.running {
            background-color: rgba(16, 185, 129, 0.1);
            color: #10b981;
            border: 1px solid rgba(16, 185, 129, 0.2);
        }
        
        .status-badge.stopped {
            background-color: rgba(107, 114, 128, 0.1);
            color: #9ca3af;
            border: 1px solid rgba(107, 114, 128, 0.2);
        }
        
        .status-badge.error {
            background-color: rgba(239, 68, 68, 0.1);
            color: #ef4444;
            border: 1px solid rgba(239, 68, 68, 0.2);
        }
        
        .sidebar-transition {
            transition: width 0.3s ease;
        }
        
        .content-transition {
            transition: margin-left 0.3s ease;
        }
        
        .logo-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #2563eb;
            color: white;
            border-radius: 8px;
            font-weight: bold;
            font-size: 16px;
        }
        
        .code-block {
            background-color: #1e293b;
            border-radius: 0.375rem;
            padding: 0.75rem;
            font-family: monospace;
            overflow-x: auto;
            color: #e2e8f0;
        }

        h1 { 
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    margin-bottom: 0.5rem; /* mb-2 */
}
@media (min-width: 768px) {
    h1 {
        font-size: 2.25rem; /* md:text-4xl */
    }
}

h2 { 
    font-size: 1.5rem; /* text-2xl */
    font-weight: 600; /* font-semibold */
    margin-bottom: 0.5rem; /* mb-2 */
}
@media (min-width: 768px) {
    h2 {
        font-size: 1.875rem; /* md:text-3xl */
    }
}

h3 { 
    font-size: 1.25rem; /* text-xl */
    font-weight: 500; /* font-medium */
    margin-bottom: 0.25rem; /* mb-1 */
}
@media (min-width: 768px) {
    h3 {
        font-size: 1.5rem; /* md:text-2xl */
    }
}

.text-caption { 
    font-size: 0.75rem; /* text-xs */
    color: #9ca3af; /* text-gray-400 */
}

.prose {
    line-height: 1.625; /* leading-relaxed */
}

p {
    margin-bottom: 1rem; /* mb-4 */
}

.w-16 a {
    justify-content: center;
}

.logo-container {
    transition: margin 0.3s ease;
}

/* Ajustar posición de logo cuando está colapsado */
.w-16 .logo-container {
    margin: 0 auto;
}
    </style>
    {% block head %}{% endblock %}
</head>
<body class="min-h-screen bg-black text-white">
    <!-- Grid Background -->
    <div class="fixed inset-0 -z-10"></div>

    <div class="flex h-screen overflow-hidden">
        <!-- Sidebar -->
        <nav id="sidebar" class="w-64 glass-effect border-r border-gray-800/30 h-full flex flex-col sidebar-transition overflow-y-auto">
            <div class="p-4 border-b border-gray-800 flex items-center gap-3">
                <div class="logo-container w-10 h-10 flex items-center justify-center bg-blue-600 rounded-lg">
                    <img src="/static/svg/atlas.svg" alt="AtlasServer Logo" class="w-7 h-7" />
                </div>
                <h3 class="text-xl font-bold logo-text">AtlasServer</h3>
            </div>

            <div class="flex-1 py-4">
                <ul class="space-y-2 px-2">
                    <li>
                        <a href="/" class="flex items-center gap-3 px-4 py-2 rounded-md hover:bg-white/5 transition-colors {% if request.url.path == '/' %}bg-blue-900/20 text-blue-400 border border-blue-900/30{% endif %}">
                            <i data-lucide="layout-dashboard" class="w-5 h-5 icon-animated"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    <li>
                        <a href="/applications/new" class="flex items-center gap-3 px-4 py-2 rounded-md hover:bg-white/5 transition-colors {% if request.url.path == '/applications/new' %}bg-blue-900/20 text-blue-400 border border-blue-900/30{% endif %}">
                            <i data-lucide="plus-circle" class="w-5 h-5 icon-animated"></i>
                            <span>New App</span>
                        </a>
                    </li>
                    <li>
                        <a href="/config" class="flex items-center gap-3 px-4 py-2 rounded-md hover:bg-white/5 transition-colors {% if request.url.path == '/config' %}bg-blue-900/20 text-blue-400 border border-blue-900/30{% endif %}">
                            <i data-lucide="settings" class="w-5 h-5 icon-animated"></i>
                            <span>Settings</span>
                        </a>
                    </li>
                    <!--<li>
                        <a href="#" class="flex items-center gap-3 px-4 py-2 rounded-md hover:bg-white/5 transition-colors">
                            <i data-lucide="help-circle" class="w-5 h-5"></i>
                            <span>Help</span>
                        </a>
                    </li>-->
                </ul>
            </div>

            <div class="p-4 border-t border-gray-800 text-sm text-gray-500">
                <p>© AtlasServer 2025</p>
            </div>
        </nav>

        <!-- Main Content -->
        <div id="content" class="flex-1 flex flex-col overflow-hidden content-transition">
            <!-- Navbar -->
            <nav class="border-b border-gray-800 bg-black/50 backdrop-blur">
                <div class="px-4 py-3 flex justify-between items-center">
                    <div class="flex items-center gap-4">
                        <button type="button" id="sidebarCollapse" class="p-1 rounded-md hover:bg-white/10 transition-colors">
                            <i data-lucide="menu" class="w-6 h-6"></i>
                        </button>
                        <span class="text-lg font-medium">{% block header_title %}Dashboard{% endblock %}</span>
                    </div>
                    <div class="flex items-center gap-4">
                        <div class="flex items-center gap-2 px-3 py-1 rounded-full bg-green-500/10 text-green-400 border border-green-500/20">
                            <span class="status-indicator running"></span>
                            <span class="text-sm">Server Active</span>
                        </div>
                        
                        <!-- Menú de usuario -->
                        <div class="relative" id="userMenu">
                            <button type="button" id="userMenuButton" class="flex items-center gap-2 px-3 py-1 rounded-md hover:bg-gray-800 transition-colors">
                                <span class="text-sm font-medium">{{ user.username }}</span>
                                <i data-lucide="chevron-down" class="w-4 h-4"></i>
                            </button>
                            
                            <div id="userMenuDropdown" class="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-gray-900 border border-gray-800 hidden z-50">
                                <div class="py-1">
                                    {% if user.is_admin %}
                                    <a href="/config" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 transition-colors">
                                        <i data-lucide="settings" class="w-4 h-4"></i>
                                        <span>Settings</span>
                                    </a>
                                    {% endif %}
                                    <a href="/logout" class="flex items-center gap-2 px-4 py-2 text-sm text-gray-300 hover:bg-gray-800 transition-colors">
                                        <i data-lucide="log-out" class="w-4 h-4"></i>
                                        <span>Log Out</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </nav>

            <!-- Page Content -->
            <div class="flex-1 overflow-y-auto py-6">
                {% block content %}{% endblock %}
            </div>
        </div>
    </div>

    <!-- Javascript -->
    <script>
        // Initialize Lucide icons
        lucide.createIcons();
        
        // Sidebar toggle
        const sidebarCollapse = document.getElementById('sidebarCollapse');
const sidebar = document.getElementById('sidebar');
const content = document.getElementById('content');

sidebarCollapse.addEventListener('click', function() {
    const isCollapsed = sidebar.classList.contains('w-16');
    
    // 1. Cambiar ancho del sidebar
    if (isCollapsed) {
        sidebar.classList.remove('w-16');
        sidebar.classList.add('w-64');
    } else {
        sidebar.classList.remove('w-64');
        sidebar.classList.add('w-16');
    }
    
    // 2. Ocultar SOLO los textos (no los iconos)
    const sidebarTexts = sidebar.querySelectorAll('a span:not([data-lucide]), .border-t.border-gray-800 p, .p-4 h3');
    sidebarTexts.forEach(item => {
        item.classList.toggle('hidden');
    });
    
    // 3. Ajustar los iconos y links cuando el sidebar está colapsado
    const sidebarLinks = sidebar.querySelectorAll('a');
    sidebarLinks.forEach(link => {
        // Cuando está colapsado, centrar contenido
        if (!isCollapsed) {
            link.style.justifyContent = 'center';
        } else {
            link.style.justifyContent = '';
        }
    });
    
    // 4. Ajustar el logo cuando está colapsado
    const logoContainer = sidebar.querySelector('.p-4 div.logo-icon');
    if (logoContainer) {
        if (!isCollapsed) {
            logoContainer.style.margin = '0 auto';
        } else {
            logoContainer.style.margin = '';
        }
    }
    
    // 5. Preservar tamaño original de iconos
    const icons = sidebar.querySelectorAll('[data-lucide]');
    icons.forEach(icon => {
        // Importante: Asegurarnos de que los iconos mantengan su tamaño
        if (!isCollapsed) {
            // Guardamos las clases originales para preservar tamaño
            if (!icon.dataset.originalClasses) {
                icon.dataset.originalClasses = icon.className;
            }
            // Aseguramos que tenga un tamaño mínimo
            icon.style.minWidth = getComputedStyle(icon).width;
            icon.style.minHeight = getComputedStyle(icon).height;
        } else {
            // Restauramos las clases originales al expandir
            if (icon.dataset.originalClasses) {
                icon.className = icon.dataset.originalClasses;
            }
            icon.style.minWidth = '';
            icon.style.minHeight = '';
        }
    });
});
    </script>

    <!-- Custom JavaScript -->
    <script src="{{ url_for('static', path='/js/script.js') }}"></script>
    <script>
        // Toggle de menú de usuario
        document.addEventListener('DOMContentLoaded', function() {
            const userMenuButton = document.getElementById('userMenuButton');
            const userMenuDropdown = document.getElementById('userMenuDropdown');
            
            if (userMenuButton && userMenuDropdown) {
                userMenuButton.addEventListener('click', function() {
                    userMenuDropdown.classList.toggle('hidden');
                });
                
                // Cerrar al hacer clic fuera
                document.addEventListener('click', function(event) {
                    if (!userMenuButton.contains(event.target) && !userMenuDropdown.contains(event.target)) {
                        userMenuDropdown.classList.add('hidden');
                    }
                });
            }
        });
    </script>
    {% block scripts %}{% endblock %}
</body>
</html>