<!-- templates/sidebar.html -->
<aside id="sidebar" class="w-72 flex-shrink-0 bg-white flex flex-col border-r border-slate-200">
    <!-- Header -->
    <div class="sidebar-header h-20 flex items-center justify-between px-6">
         <div class="flex items-center gap-3 text-slate-900 overflow-hidden">
            <span class="material-icons-outlined text-sky-900 text-3xl flex-shrink-0">apps</span>
            <h1 class="sidebar-title text-xl font-bold tracking-tight whitespace-nowrap">MBET</h1>
        </div>
        <button id="sidebar-toggle" class="p-1 text-slate-500 hover:text-slate-800">
            <span class="material-icons-outlined">chevron_left</span>
        </button>
    </div>

    <!-- Navigation -->
    <nav class="flex-1 px-4 py-2 space-y-1">

        <!-- ===== GRUPPE 1: DASHBOARD & PERSONAL ===== -->
        <a href="{{ url_for('dashboard_page') }}" class="sidebar-link flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 rounded-full {% if active_page == 'dashboard' or active_page == 'timelines' %}active{% endif %}" title="Übersicht">
            <span class="material-icons-outlined mr-4 text-slate-500">home</span>
            <span class="sidebar-label">Übersicht</span>
        </a>

        <!-- ANLAGENÜBERSICHT -->
        <a href="{{ url_for('serve_facility_viewer') }}" class="sidebar-link flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 rounded-full {% if active_page == 'facility_viewer' %}active{% endif %}" title="Anlagenübersicht (3D)">
            <span class="material-icons-outlined mr-4 text-slate-500">warehouse</span>
            <span class="sidebar-label">Anlagenübersicht</span>
        </a>

        <div class="sidebar-separator"></div>

        <!-- ===== GRUPPE 2: BETRIEB & RESSOURCEN ===== -->
        <a href="{{ url_for('serve_test_cell_management_page') }}" class="sidebar-link flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 rounded-full {% if active_page == 'test_cells' %}active{% endif %}" title="Testzellen Cockpit">
            <span class="material-icons-outlined mr-4 text-slate-500">other_houses</span>
            <span class="sidebar-label">Testzellen Cockpit</span>
        </a>

        <!-- MAINTENANCE CENTER (SWAT) -->
        {% if 'ADMIN' in session.get('roles', []) or 'PLANNER' in session.get('roles', []) or 'TESTMECHANIC' in session.get('roles', []) or 'TESTCELLINSPECTOR' in session.get('roles', []) or 'TESTENGINEER' in session.get('roles', []) or 'MAINTENANCEMANAGER' in session.get('roles', []) %}
        <a href="{{ url_for('serve_maintenance_page') }}" class="sidebar-link flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 rounded-full {% if active_page == 'maintenance' %}active{% endif %}" title="Maintenance Center">
            <span class="material-icons-outlined mr-4 text-slate-500">engineering</span>
            <span class="sidebar-label">SWAT / Wartung</span>
        </a>
        {% endif %}

        {% if 'ADMIN' in session.get('roles', []) or 'PLANNER' in session.get('roles', []) or 'TESTMECHANIC' in session.get('roles', []) or 'TESTCELLINSPECTOR' in session.get('roles', []) or 'TESTENGINEER' in session.get('roles', []) or 'MAINTENANCEMANAGER' in session.get('roles', []) or 'HARDWAREMANAGER' in session.get('roles', []) %}
        <a href="{{ url_for('serve_test_equipment_page') }}" class="sidebar-link flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 rounded-full {% if active_page == 'test_equipment' %}active{% endif %}" title="Hardware Verwaltung">
            <span class="material-icons-outlined mr-4 text-slate-500">memory</span>
            <span class="sidebar-label">Hardware</span>
        </a>
        {% endif %}

        {% if 'ADMIN' in session.get('roles', []) or 'PLANNER' in session.get('roles', []) or 'TESTMECHANIC' in session.get('roles', []) or 'TESTCELLINSPECTOR' in session.get('roles', []) or 'TESTENGINEER' in session.get('roles', []) or 'HARDWAREMANAGER' in session.get('roles', []) %}
        <a href="{{ url_for('serve_consumable_order_page') }}" class="sidebar-link flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 rounded-full {% if active_page == 'ordersystem' %}active{% endif %}" title="Bestellsystem">
            <span class="material-icons-outlined mr-4 text-slate-500">shopping_cart</span>
            <span class="sidebar-label">Bestellsystem</span>
        </a>
        {% endif %}

        <!-- ===== GRUPPE 3: PERSONAL & LIVE ===== -->
        <div class="sidebar-separator"></div>

        <a href="{{ url_for('serve_my_qualifications_page') }}" class="sidebar-link flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 rounded-full {% if active_page == 'my_qualifications' %}active{% endif %}" title="Meine Qualifikationen">
            <span class="material-icons-outlined mr-4 text-slate-500">person_outline</span>
            <span class="sidebar-label">Meine Qualis</span>
        </a>

        {% if 'ADMIN' in session.get('roles', []) or 'PLANNER' in session.get('roles', []) or 'TESTMECHANIC' in session.get('roles', []) or 'TESTCELLINSPECTOR' in session.get('roles', []) or 'TESTENGINEER' in session.get('roles', []) or 'HARDWAREMANAGER' in session.get('roles', []) %}
        <a href="{{ url_for('serve_employee_presence_page') }}" class="sidebar-link flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 rounded-full {% if active_page == 'presence' %}active{% endif %}" title="Anwesenheit">
            <span class="material-icons-outlined mr-4 text-slate-500">groups</span>
            <span class="sidebar-label">Anwesenheit</span>
        </a>
        {% endif %}

        <a href="{{ url_for('serve_project_monitor') }}" target="_blank" class="sidebar-link flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 rounded-full {% if active_page == 'livestatus' %}active{% endif %}" title="Live Status (Vollbild)">
            <span class="material-icons-outlined mr-4 text-slate-500">broadcast_on_personal</span>
            <span class="sidebar-label">Live Status</span>
        </a>


        <!-- ===== GRUPPE 4: ADMIN & MANAGEMENT ===== -->
        {% if 'ADMIN' in session.get('roles', []) or 'PLANNER' in session.get('roles', []) or 'TESTCELLINSPECTOR' in session.get('roles', [])  or 'TESTENGINEER' in session.get('roles', []) %}
            <div class="sidebar-separator"></div>
            <p class="px-6 py-2 text-xs font-semibold text-slate-400 uppercase tracking-wider sidebar-title">Management</p>
        {% endif %}

        {% if 'ADMIN' in session.get('roles', []) or 'PLANNER' in session.get('roles', []) or 'TESTCELLINSPECTOR' in session.get('roles', []) %}
            <a href="{{ url_for('serve_employee_dashboard') }}" class="sidebar-link flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 rounded-full {% if active_page == 'employee_dashboard' %}active{% endif %}" title="Mitarbeiter Dashboard">
                <span class="material-icons-outlined mr-4 text-slate-500">show_chart</span>
                <span class="sidebar-label">SFM</span>
            </a>
            <a href="{{ url_for('serve_qualifications_table_page') }}" class="sidebar-link flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 rounded-full {% if active_page == 'qualifications_table' %}active{% endif %}" title="Qualifikationsübersicht">
                <span class="material-icons-outlined mr-4 text-slate-500">approval</span>
                <span class="sidebar-label">Quali-Matrix</span>
            </a>
        {% endif %}

        {% if 'ADMIN' in session.get('roles', []) or 'PLANNER' in session.get('roles', []) or 'TESTENGINEER' in session.get('roles', []) %}
            <a href="{{ url_for('serve_process_templates_management_page') }}" class="sidebar-link flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 rounded-full {% if active_page == 'process_templates' %}active{% endif %}" title="Prozess-Templates">
                <span class="material-icons-outlined mr-4 text-slate-500">schema</span>
                <span class="sidebar-label">Engine Types</span>
            </a>
        {% endif %}

        {% if 'ADMIN' in session.get('roles', []) %}
            <a href="{{ url_for('file_manager_page') }}" class="sidebar-link flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 rounded-full {% if active_page == 'file_manager' %}active{% endif %}" title="Dateiverwaltung">
                <span class="material-icons-outlined mr-4 text-slate-500">backup</span>
                <span class="sidebar-label">Dateien</span>
            </a>
            <a href="{{ url_for('user_management_page') }}" class="sidebar-link flex items-center px-4 py-2.5 text-sm font-medium text-slate-600 rounded-full {% if active_page == 'user_management' %}active{% endif %}" title="Benutzerverwaltung">
                <span class="material-icons-outlined mr-4 text-slate-500">settings</span>
                <span class="sidebar-label">Benutzer</span>
            </a>
        {% endif %}

    </nav>
    <div class="p-4 mt-auto border-t border-slate-100">
         <div class="user-profile flex items-center gap-3 p-2 rounded-lg hover:bg-slate-50 transition-colors cursor-default">

            <!-- Avatar (Bleibt gleich: Initialen) -->
            <div class="h-10 w-10 bg-sky-100 text-sky-700 rounded-full flex items-center justify-center font-bold flex-shrink-0 border border-sky-200">
                {{ current_user_initials }}
            </div>

            <!-- Info & Actions -->
            <div class="user-info flex-1 overflow-hidden">
                <div class="flex justify-between items-center">
                    <!-- ÄNDERUNG: Hier nur noch die User-ID anzeigen -->
                    <div class="text-sm font-bold text-slate-800 truncate mr-2 uppercase" title="{{ current_user_display_name }}">
                        {{ session.get('user_id', 'Guest') }}
                    </div>

                    <div class="flex items-center gap-1">
                        <!-- Passwort ändern -->
                        <button onclick="document.getElementById('passwordModal').classList.remove('hidden')" class="p-1 text-slate-400 hover:text-blue-600 rounded hover:bg-white transition-colors" title="Passwort ändern">
                            <span class="material-icons-outlined text-lg">vpn_key</span>
                        </button>
                        <!-- Logout -->
                        <a href="{{ url_for('logout_page') }}" class="p-1 text-slate-400 hover:text-red-600 rounded hover:bg-white transition-colors" title="Abmelden">
                            <span class="material-icons-outlined text-lg">logout</span>
                        </a>
                    </div>
                </div>
                <!-- ÄNDERUNG: Unterzeile zeigt jetzt die erste Rolle statt Name -->
                <div class="text-[10px] text-slate-500 uppercase tracking-wider truncate">
                    {{ session.get('roles', ['User'])[0] }}
                </div>
            </div>

         </div>
    </div>
</aside>

<!-- PASSWORT ÄNDERN MODAL -->
<div id="passwordModal" class="fixed inset-0 z-[9999] flex items-center justify-center bg-gray-900 bg-opacity-70 hidden backdrop-blur-sm">
    <div class="bg-white rounded-lg shadow-xl w-full max-w-sm overflow-hidden transform transition-all">
        <div class="px-5 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
            <h3 class="font-bold text-slate-800 flex items-center gap-2">
                <span class="material-icons-outlined text-slate-500">lock_reset</span> Passwort ändern
            </h3>
            <button onclick="document.getElementById('passwordModal').classList.add('hidden')" class="text-slate-400 hover:text-slate-600">
                <span class="material-icons-outlined">close</span>
            </button>
        </div>
        <div class="p-5 space-y-4">
            <div>
                <label class="block text-xs font-bold text-slate-500 uppercase mb-1">Aktuelles Passwort</label>
                <input type="password" id="pwCurrent" class="w-full border-slate-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500">
            </div>
            <div>
                <label class="block text-xs font-bold text-slate-500 uppercase mb-1">Neues Passwort</label>
                <input type="password" id="pwNew" class="w-full border-slate-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500">
            </div>
            <div>
                <label class="block text-xs font-bold text-slate-500 uppercase mb-1">Wiederholen</label>
                <input type="password" id="pwConfirm" class="w-full border-slate-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500">
            </div>
        </div>
        <div class="px-5 py-4 bg-slate-50 border-t border-slate-100 flex justify-end gap-2">
            <button onclick="document.getElementById('passwordModal').classList.add('hidden')" class="px-4 py-2 text-sm text-slate-600 hover:bg-white rounded border border-transparent hover:border-slate-200">Abbrechen</button>
            <button onclick="submitPasswordChange()" class="px-4 py-2 text-sm bg-blue-600 text-white rounded hover:bg-blue-700 shadow-sm font-medium">Speichern</button>
        </div>
    </div>
</div>

<script>
  // Sidebar State Logic
  (function() {
    try {
      if (localStorage.getItem('sidebarCollapsed') === 'true') {
        document.getElementById('sidebar').classList.add('is-collapsed');
      }
    } catch (e) {}
  })();

  // Password Change Logic
  async function submitPasswordChange() {
    const currentPassword = document.getElementById('pwCurrent').value;
    const newPassword = document.getElementById('pwNew').value;
    const confirmPassword = document.getElementById('pwConfirm').value;

    if (!currentPassword || !newPassword || !confirmPassword) {
        alert("Bitte alle Felder ausfüllen.");
        return;
    }
    if (newPassword !== confirmPassword) {
        alert("Die neuen Passwörter stimmen nicht überein.");
        return;
    }

    try {
        const response = await fetch('/api/change_password', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ currentPassword, newPassword, confirmPassword })
        });

        const result = await response.json();

        if (response.ok) {
            alert(result.message);
            document.getElementById('passwordModal').classList.add('hidden');
            // Felder leeren
            document.getElementById('pwCurrent').value = '';
            document.getElementById('pwNew').value = '';
            document.getElementById('pwConfirm').value = '';
        } else {
            alert("Fehler: " + result.error);
        }
    } catch (e) {
        console.error(e);
        alert("Netzwerkfehler.");
    }
  }
</script>