<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ app_name }} - {% block title %}{% endblock %}</title>
    <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
    <link rel="stylesheet" href="/static/css/tailwind.css">
    <script src="/static/js/htmx.min.js"></script>
    <script src="/static/js/alpine.min.js" defer></script>
    <style>
        body { background: #0a0e17; color: #e2e8f0; font-family: 'Segoe UI', system-ui, sans-serif; }
        .sidebar { background: #111827; border-right: 1px solid #1e3a5f; }
        .card { background: #111827; border: 1px solid #1e3a5f; border-radius: 8px; }
        .btn-primary { background: #00d4ff; color: #0a0e17; font-weight: 600; border-radius: 6px; }
        .btn-primary:hover { background: #00b8e6; }
        .btn-danger { background: #ff3366; color: white; border-radius: 6px; }
        .btn-sm { padding: 2px 10px; font-size: 0.75rem; border-radius: 4px; cursor: pointer; }
        .table-cyber th { background: #1e3a5f; color: #00d4ff; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; }
        .table-cyber td { border-bottom: 1px solid #1e3a5f; font-size: 0.8rem; }
        .table-cyber tr:hover { background: #1a2332; cursor: pointer; }
        .table-cyber tr.selected { background: #1e3a5f44; }
        .badge { padding: 2px 8px; border-radius: 12px; font-size: 0.65rem; font-weight: 600; }
        .badge-green { background: #00ff8822; color: #00ff88; }
        .badge-red { background: #ff336622; color: #ff3366; }
        .badge-yellow { background: #ffcc0022; color: #ffcc00; }
        .badge-blue { background: #00d4ff22; color: #00d4ff; }
        .badge-gray { background: #4a556822; color: #94a3b8; }
        input, select, textarea { background: #0a0e17; border: 1px solid #1e3a5f; color: #e2e8f0; border-radius: 6px; padding: 6px 12px; font-size: 0.85rem; }
        input:focus, select:focus, textarea:focus { outline: none; border-color: #00d4ff; box-shadow: 0 0 0 2px #00d4ff33; }
        .panel-slide { transition: transform 0.3s ease, opacity 0.3s ease; }
        .htmx-indicator { opacity: 0; transition: opacity 200ms; }
        .htmx-request .htmx-indicator { opacity: 1; }
        .htmx-only-request { display: none; }
        .htmx-request .htmx-no-request { display: none; }
        .htmx-request .htmx-only-request { display: inline; }
        .inline-edit { background: transparent; border: 1px solid transparent; padding: 2px 4px; }
        .inline-edit:hover { border-color: #1e3a5f; }
        .inline-edit:focus { background: #0a0e17; border-color: #00d4ff; }
        .toast { position: fixed; bottom: 20px; right: 20px; padding: 12px 24px; border-radius: 8px; z-index: 1000; animation: fadeIn 0.3s; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
        [x-cloak] { display: none !important; }
    </style>
</head>
<body class="min-h-screen" hx-headers='{"X-Requested-With": "htmx"}'>
    {% if user %}
    <div class="flex min-h-screen">
        <aside class="sidebar w-52 flex-shrink-0 flex flex-col">
            <div class="p-4 border-b border-cyber-border">
                <div class="flex items-center gap-2">
                    <img src="/static/logo_sanef.jpg" alt="SANEF" class="h-8 rounded" style="opacity:0.85">
                </div>
                <h1 class="text-cyber-accent font-bold text-lg mt-1">PatchCenter</h1>
                <p class="text-xs text-gray-500">v2.0 — SecOps</p>
            </div>
            <nav class="flex-1 p-3 space-y-1" x-data='{
                open: localStorage.getItem("menu_open") || "",
                subOpen: localStorage.getItem("menu_sub_open") || "",
                toggle(k){ this.open = (this.open === k) ? "" : k; this.subOpen = ""; localStorage.setItem("menu_open", this.open); localStorage.setItem("menu_sub_open", ""); },
                toggleSub(k){ this.subOpen = (this.subOpen === k) ? "" : k; localStorage.setItem("menu_sub_open", this.subOpen); }
            }'>
                {% set p = perms if perms is defined else request.state.perms %}
                {% set path = request.url.path %}

                {# Dashboard principal #}
                {% if p.servers or p.qualys or p.audit or p.planning %}<a href="/dashboard" class="block px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 {% if 'dashboard' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %}">Dashboard</a>{% endif %}

                {# Serveurs (groupe repliable avec Correspondance) #}
                {% if p.servers %}
                <div>
                    <button @click="toggle('servers')" class="w-full flex justify-between items-center px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 text-cyber-accent font-bold">
                        <span>Serveurs</span>
                        <span x-text="open === 'servers' ? '▾' : '▸'" class="text-xs"></span>
                    </button>
                    <div x-show="open === 'servers'" x-cloak class="space-y-1 pl-1">
                        <a href="/servers" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if path == '/servers' or path.startswith('/servers/') %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Liste</a>
                        {% if p.campaigns or p.quickwin %}<a href="/patching/correspondance" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/patching/correspondance' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Correspondance prod ↔ hors-prod</a>{% endif %}
                    </div>
                </div>
                {% endif %}

                {# ===== PATCHING (groupe repliable) ===== #}
                {% if p.campaigns or p.planning or p.quickwin %}
                <div>
                    <button @click="toggle('patching')" class="w-full flex justify-between items-center px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 text-cyber-accent font-bold">
                        <span>Patching</span>
                        <span x-text="open === 'patching' ? '▾' : '▸'" class="text-xs"></span>
                    </button>
                    <div x-show="open === 'patching'" x-cloak class="space-y-1 pl-1">
                        {% if p.planning %}<a href="/planning" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if path == '/planning' %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Planning</a>{% endif %}
                        {% if p.planning or p.campaigns %}<a href="/patching/import" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/patching/import' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Importer planning</a>{% endif %}
                        {% if p.campaigns in ('edit', 'admin') %}<a href="/assignments" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'assignments' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Assignation</a>{% endif %}
                        {% if p.campaigns %}<a href="/campaigns" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'campaigns' in path and 'assignments' not in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Campagnes</a>{% endif %}
                        {% if p.servers in ('edit','admin') or p.campaigns in ('edit','admin') or p.quickwin in ('edit','admin') %}<a href="/patching/config-exclusions" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'config-exclusions' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Config exclusions</a>{% endif %}
                        {% if p.campaigns in ('edit','admin') or p.quickwin in ('edit','admin') %}<a href="/patching/validations" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/patching/validations' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Validations</a>{% endif %}
                        <a href="/patching/historique" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/patching/historique' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Historique</a>
<a href="/duty" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/duty' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Tour de garde</a>

                        {# Quickwin sous-groupe #}
                        {% if p.campaigns or p.quickwin %}
                        <div>
                            <button @click="toggleSub('quickwin')" class="w-full flex justify-between items-center px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 pl-6 {% if 'quickwin' in path %}text-cyber-accent{% else %}text-gray-400{% endif %}">
                                <span>QuickWin</span>
                                <span x-text="subOpen === 'quickwin' ? '▾' : '▸'" class="text-xs opacity-60"></span>
                            </button>
                            <div x-show="subOpen === 'quickwin'" x-cloak class="space-y-1">
                                <a href="/quickwin" style="padding-left:3rem" class="block py-1 pr-3 rounded-md text-xs hover:bg-cyber-border/30 {% if 'quickwin' in path and 'config' not in path and 'correspondance' not in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-500{% endif %}">Vue d'ensemble</a>
                                {% if p.quickwin in ('edit', 'admin') or p.campaigns in ('edit', 'admin') %}
                                <a href="/quickwin/config" style="padding-left:3rem" class="block py-1 pr-3 rounded-md text-xs hover:bg-cyber-border/30 {% if '/quickwin/config' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-500{% endif %}">Config exclusion</a>
                                {% endif %}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}

                {# ===== AUDIT (au meme niveau que Patching, repliable) ===== #}
                {% if p.audit %}
                <div>
                    <button @click="toggle('audit')" class="w-full flex justify-between items-center px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 text-cyber-accent font-bold">
                        <span>Audit</span>
                        <span x-text="open === 'audit' ? '▾' : '▸'" class="text-xs"></span>
                    </button>
                    <div x-show="open === 'audit'" x-cloak class="space-y-1 pl-1">
                        <a href="/audit" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if path == '/audit' %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Audit global</a>
                        {% if p.audit in ('edit', 'admin') %}<a href="/audit/specific" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'specific' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Spécifique</a>{% endif %}
                    </div>
                </div>
                {% endif %}

                {# ===== QUALYS (groupe repliable) ===== #}
                {% if p.qualys %}
                <div>
                    <button @click="toggle('qualys')" class="w-full flex justify-between items-center px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 text-cyber-accent font-bold">
                        <span>Qualys</span>
                        <span x-text="open === 'qualys' ? '▾' : '▸'" class="text-xs"></span>
                    </button>
                    <div x-show="open === 'qualys'" x-cloak class="space-y-1 pl-1">
                        <a href="/qualys/dashboard" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/qualys/dashboard' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">📊 Dashboard Vulns</a>
                        <a href="/qualys/search" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/qualys/search' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Recherche</a>
                        <a href="/qualys/tags" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/qualys/tags' in path and '/qualys/tagsv3' not in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Tags</a>
                        <a href="/qualys/tagsv3" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/qualys/tagsv3' in path and '/catalog' not in path and '/gap' not in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-8">↳ Tags V3 (vue)</a>
                        <a href="/qualys/tagsv3/catalog" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/qualys/tagsv3/catalog' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-8">↳ Tags V3 (catalogue)</a>
                        <a href="/qualys/tagsv3/gap" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/qualys/tagsv3/gap' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-8">↳ Tags V3 (gap)</a>
                        <a href="/qualys/duplicates" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/qualys/duplicates' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">🧟 Doublons</a>
                        <a href="/qualys/agents" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'agents' in path and 'deploy' not in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Agents</a>
                        {% if p.qualys in ('edit', 'admin') %}<a href="/qualys/deploy" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'deploy' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Déployer Agent</a>{% endif %}
                    </div>
                </div>
                {% endif %}

                {# ===== ADMIN (groupe repliable) ===== #}
                {% if p.users or p.settings or p.servers or p.contacts %}
                <div>
                    <button @click="toggle('admin')" class="w-full flex justify-between items-center px-3 py-2 rounded-md text-sm hover:bg-cyber-border/30 text-cyber-accent font-bold">
                        <span>Administration</span>
                        <span x-text="open === 'admin' ? '▾' : '▸'" class="text-xs"></span>
                    </button>
                    <div x-show="open === 'admin'" x-cloak class="space-y-1 pl-1">
                        {% if p.servers or p.contacts %}<a href="/contacts" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'contacts' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Contacts</a>{% endif %}
                        {% if p.users %}<a href="/users" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if path == '/users' or path.startswith('/users/') %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Utilisateurs</a>{% endif %}
                        {% if p.settings or p.users %}<a href="/admin/applications" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if '/admin/applications' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Applications</a>{% endif %}
                        {% if p.settings %}<a href="/settings" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'settings' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Settings</a>{% endif %}
                        {% if p.settings or p.referentiel %}<a href="/referentiel" class="block px-3 py-1.5 rounded-md text-xs hover:bg-cyber-border/30 {% if 'referentiel' in path %}bg-cyber-border/30 text-cyber-accent{% else %}text-gray-400{% endif %} pl-6">Référentiel</a>{% endif %}
                    </div>
                </div>
                {% endif %}
            </nav>
        </aside>
        <main class="flex-1 flex flex-col overflow-hidden">
            <!-- Top bar -->
            <header class="flex items-center justify-end px-6 py-2 border-b border-cyber-border bg-cyber-card">
                <div class="flex items-center gap-3">
                    <span class="text-sm text-cyber-accent font-medium">{{ user.display or user.sub }}</span>
                    {% if user.auth == 'ldap' %}<span class="text-xs text-gray-500">(AD)</span>{% endif %}
                    <span class="text-xs text-gray-500">·</span>
                    <span class="text-xs text-gray-400">{{ user.sub }}</span>
                    <span class="badge badge-blue">{{ user.role }}</span>
                    <a href="/logout" class="btn-sm bg-cyber-border text-gray-300 hover:bg-red-900/40 hover:text-cyber-red transition-colors">Deconnexion</a>
                </div>
            </header>
            <div class="flex flex-1 overflow-hidden">
                <div class="flex-1 p-6 overflow-auto" id="main-content">
                    {% block content %}{% endblock %}
                </div>
                <div id="detail-panel" class="w-0 overflow-hidden transition-all duration-300 border-l border-cyber-border bg-cyber-card">
                </div>
            </div>
        </main>
    </div>
    {% else %}
        {% block fullpage %}{% endblock %}
    {% endif %}
    <div id="toast-container"></div>
    <!-- Overlay chargement -->
    <div id="loading-overlay" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(10,14,23,0.85); z-index:9999; justify-content:center; align-items:center;">
        <div style="text-align:center">
            <div style="border:3px solid #1e3a5f; border-top:3px solid #00d4ff; border-radius:50%; width:40px; height:40px; animation:spin 1s linear infinite; margin:0 auto 16px"></div>
            <div id="loading-msg" style="color:#00d4ff; font-size:14px; font-weight:600">Opération en cours...</div>
            <div id="loading-sub" style="color:#94a3b8; font-size:12px; margin-top:6px"></div>
        </div>
    </div>
    <style>@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }</style>
    <script>
    function showLoading(msg, sub) {
        document.getElementById('loading-msg').textContent = msg || 'Opération en cours...';
        document.getElementById('loading-sub').textContent = sub || '';
        document.getElementById('loading-overlay').style.display = 'flex';
    }
    function hideLoading() { document.getElementById('loading-overlay').style.display = 'none'; }
    // Auto-attach: tout bouton avec data-loading affiche l'overlay au clic
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('[data-loading]').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                var parts = (btn.dataset.loading || 'Opération en cours...|').split('|');
                showLoading(parts[0], parts[1] || '');
            });
        });
    });
    </script>
</body>
</html>
