{% extends "base.html" %}

{% block title %}Einstellungen{% endblock %}

{% block content %}
<div class="relative mb-6" data-page="settings">
  <!-- Header Bereich -->
  <div class="mb-8 p-6 bg-gradient-to-br from-slate-900/80 to-slate-800/60 rounded-lg border border-slate-700/20 shadow-xl">
    <h1 class="text-4xl md:text-5xl font-bold mb-3">
      <span class="gradient-text">Einstellungen</span>
    </h1>
    <p class="text-lg text-gray-300 max-w-3xl">
      Verwalten Sie Ihr Konto und passen Sie Ihre Benutzererfahrung an.
    </p>
  </div>

  <!-- Einstellungen Grid Layout -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Seitennavigation (Desktop) -->
    <div class="lg:col-span-1 order-2 lg:order-1">
      <div class="sticky top-6 bg-gradient-to-br from-slate-900/80 to-slate-800/60 rounded-lg border border-slate-700/20 shadow-xl overflow-hidden p-4">
        <nav>
          <div class="text-xs uppercase text-gray-400 font-semibold tracking-wider mb-3 px-3">Navigation</div>
          <ul class="space-y-1">
            <li>
              <button id="nav-account" class="w-full text-left px-3 py-2 rounded-md flex items-center text-purple-300 bg-purple-900/20 border-l-2 border-purple-500">
                <i class="fa-solid fa-user-circle mr-3"></i>
                <span>Konto</span>
              </button>
            </li>
            <li>
              <button id="nav-appearance" class="w-full text-left px-3 py-2 rounded-md flex items-center text-gray-300 hover:bg-white/5">
                <i class="fa-solid fa-palette mr-3"></i>
                <span>Erscheinungsbild</span>
              </button>
            </li>
            <li>
              <button id="nav-notifications" class="w-full text-left px-3 py-2 rounded-md flex items-center text-gray-300 hover:bg-white/5">
                <i class="fa-solid fa-bell mr-3"></i>
                <span>Benachrichtigungen</span>
              </button>
            </li>
            <li>
              <button id="nav-privacy" class="w-full text-left px-3 py-2 rounded-md flex items-center text-gray-300 hover:bg-white/5">
                <i class="fa-solid fa-shield-alt mr-3"></i>
                <span>Datenschutz</span>
              </button>
            </li>
          </ul>
        </nav>
      </div>
    </div>

    <!-- Hauptinhalt der Einstellungen -->
    <div class="lg:col-span-2 order-1 lg:order-2">
      <!-- Konto-Einstellungen -->
      <div id="section-account" class="bg-gradient-to-br from-slate-900/80 to-slate-800/60 rounded-lg border border-slate-700/20 shadow-xl p-6 mb-6">
        <h2 class="text-2xl font-bold text-white mb-4 flex items-center">
          <i class="fa-solid fa-user-circle text-purple-400 mr-3"></i>
          Konto-Einstellungen
        </h2>
        
        <div class="mb-6 p-4 bg-slate-900/50 rounded-lg">
          <div class="flex items-center">
            <div class="h-16 w-16 rounded-full bg-gradient-to-r from-purple-500 to-blue-500 flex items-center justify-center text-white text-2xl font-bold">
              {{ current_user.username[0] | upper }}
            </div>
            <div class="ml-4">
              <h3 class="text-lg font-medium text-white">{{ current_user.username }}</h3>
              <p class="text-gray-400">{{ current_user.email }}</p>
              <p class="text-xs text-gray-500 mt-1">
                Mitglied seit {{ current_user.id | string }}
              </p>
            </div>
          </div>
        </div>
        
        <form method="POST" class="space-y-6">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
              <label for="username" class="block text-sm font-medium text-gray-400 mb-1">Benutzername</label>
              <input type="text" name="username" id="username" value="{{ current_user.username }}" disabled
                     class="w-full bg-slate-800/80 border border-slate-700 rounded-md py-2 px-3 text-white focus:ring-1 focus:ring-purple-500">
              <p class="mt-1 text-xs text-gray-500">Der Benutzername kann derzeit nicht geändert werden.</p>
            </div>
            
            <div>
              <label for="email" class="block text-sm font-medium text-gray-400 mb-1">E-Mail-Adresse</label>
              <input type="email" name="email" id="email" value="{{ current_user.email }}" disabled
                     class="w-full bg-slate-800/80 border border-slate-700 rounded-md py-2 px-3 text-white focus:ring-1 focus:ring-purple-500">
              <p class="mt-1 text-xs text-gray-500">Die E-Mail-Adresse kann derzeit nicht geändert werden.</p>
            </div>
          </div>
          
          <div class="border-t border-slate-700 pt-6">
            <h3 class="text-lg font-medium text-white mb-4">Passwort ändern</h3>
            
            <div class="space-y-4">
              <div>
                <label for="current_password" class="block text-sm font-medium text-gray-400 mb-1">Aktuelles Passwort</label>
                <input type="password" name="current_password" id="current_password" 
                       class="w-full bg-slate-800/80 border border-slate-700 rounded-md py-2 px-3 text-white focus:ring-1 focus:ring-purple-500">
              </div>
              
              <div>
                <label for="new_password" class="block text-sm font-medium text-gray-400 mb-1">Neues Passwort</label>
                <input type="password" name="new_password" id="new_password"
                       class="w-full bg-slate-800/80 border border-slate-700 rounded-md py-2 px-3 text-white focus:ring-1 focus:ring-purple-500">
                <p class="mt-1 text-xs text-gray-500">Mindestens 6 Zeichen</p>
              </div>
              
              <div>
                <label for="confirm_password" class="block text-sm font-medium text-gray-400 mb-1">Passwort bestätigen</label>
                <input type="password" name="confirm_password" id="confirm_password"
                       class="w-full bg-slate-800/80 border border-slate-700 rounded-md py-2 px-3 text-white focus:ring-1 focus:ring-purple-500">
              </div>
            </div>
          </div>
          
          <div class="flex justify-end">
            <button type="submit" class="py-2 px-4 rounded-md bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-medium transition duration-300 transform hover:-translate-y-0.5">
              Änderungen speichern
            </button>
          </div>
        </form>
      </div>
      
      <!-- Erscheinungsbild -->
      <div id="section-appearance" class="bg-gradient-to-br from-slate-900/80 to-slate-800/60 rounded-lg border border-slate-700/20 shadow-xl p-6 mb-6 hidden">
        <h2 class="text-2xl font-bold text-white mb-4 flex items-center">
          <i class="fa-solid fa-palette text-purple-400 mr-3"></i>
          Erscheinungsbild
        </h2>
        
        <div class="space-y-4">
          <div class="p-4 bg-slate-900/50 rounded-lg">
            <div class="flex justify-between items-center">
              <div>
                <h3 class="text-lg font-medium text-white">Dunkles Design</h3>
                <p class="text-gray-400">Wechsle zwischen hellem und dunklem Modus</p>
              </div>
              <div>
                <button id="toggle-dark-mode" class="w-14 h-7 flex items-center bg-purple-900/30 rounded-full px-1 transition-all" onclick="toggleDarkMode()">
                  <div id="dark-mode-indicator" class="bg-purple-500 w-5 h-5 rounded-full shadow-md transform transition-transform duration-300 translate-x-7"></div>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Benachrichtigungen -->
      <div id="section-notifications" class="bg-gradient-to-br from-slate-900/80 to-slate-800/60 rounded-lg border border-slate-700/20 shadow-xl p-6 mb-6 hidden">
        <h2 class="text-2xl font-bold text-white mb-4 flex items-center">
          <i class="fa-solid fa-bell text-purple-400 mr-3"></i>
          Benachrichtigungen
        </h2>
        
        <div class="p-4 bg-slate-900/50 rounded-lg">
          <div class="flex justify-between items-center">
            <div>
              <h3 class="text-lg font-medium text-white">E-Mail-Benachrichtigungen</h3>
              <p class="text-gray-400">Diese Funktion wird in einer zukünftigen Version verfügbar sein.</p>
            </div>
            <div>
              <span class="px-2 py-1 text-xs rounded-full bg-slate-700 text-gray-300">
                Demnächst
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Datenschutz -->
      <div id="section-privacy" class="bg-gradient-to-br from-slate-900/80 to-slate-800/60 rounded-lg border border-slate-700/20 shadow-xl p-6 mb-6 hidden">
        <h2 class="text-2xl font-bold text-white mb-4 flex items-center">
          <i class="fa-solid fa-shield-alt text-purple-400 mr-3"></i>
          Datenschutz und Sicherheit
        </h2>
        
        <div class="p-4 bg-slate-900/50 rounded-lg">
          <h3 class="text-lg font-medium text-white mb-2">Datenverarbeitung</h3>
          <p class="text-gray-400 mb-3">
            Wir verarbeiten Ihre Daten gemäß unserer Datenschutzrichtlinie.
          </p>
          <a href="{{ url_for('datenschutz') }}" class="text-purple-400 hover:text-purple-300 inline-flex items-center">
            <span>Datenschutzerklärung lesen</span>
            <i class="fa-solid fa-arrow-right ml-1 text-sm"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Navigation-Buttons
    const navButtons = {
      'nav-account': 'section-account',
      'nav-appearance': 'section-appearance',
      'nav-notifications': 'section-notifications',
      'nav-privacy': 'section-privacy'
    };
    
    // Alle Abschnitte ausblenden außer dem ersten
    Object.values(navButtons).forEach(sectionId => {
      if (sectionId !== 'section-account') {
        document.getElementById(sectionId).classList.add('hidden');
      }
    });
    
    // Klick-Handler für Navigation
    for (const [navId, sectionId] of Object.entries(navButtons)) {
      document.getElementById(navId).addEventListener('click', function() {
        // Alle Abschnitte ausblenden
        Object.values(navButtons).forEach(id => {
          document.getElementById(id).classList.add('hidden');
        });
        
        // Ausgewählten Abschnitt anzeigen
        document.getElementById(sectionId).classList.remove('hidden');
        
        // Aktiven Navigations-Button hervorheben, andere zurücksetzen
        for (const btnId of Object.keys(navButtons)) {
          const btn = document.getElementById(btnId);
          if (btnId === navId) {
            btn.classList.add('text-purple-300', 'bg-purple-900/20', 'border-l-2', 'border-purple-500');
            btn.classList.remove('text-gray-300', 'hover:bg-white/5');
          } else {
            btn.classList.remove('text-purple-300', 'bg-purple-900/20', 'border-l-2', 'border-purple-500');
            btn.classList.add('text-gray-300', 'hover:bg-white/5');
          }
        }
      });
    }
    
    // Dark Mode Toggle aktualisieren
    function updateDarkModeToggle() {
      const isDarkMode = document.documentElement.classList.contains('dark');
      const indicator = document.getElementById('dark-mode-indicator');
      
      if (indicator) {
        if (isDarkMode) {
          indicator.classList.add('translate-x-7');
          indicator.classList.remove('translate-x-0');
        } else {
          indicator.classList.add('translate-x-0');
          indicator.classList.remove('translate-x-7');
        }
      }
    }
    
    updateDarkModeToggle();
    
    // Globale Funktion für Toggle-Button
    window.toggleDarkMode = function() {
      if (typeof MindMap !== 'undefined' && typeof MindMap.toggleDarkMode === 'function') {
        MindMap.toggleDarkMode();
      } else {
        document.documentElement.classList.toggle('dark');
      }
      updateDarkModeToggle();
    }
  });
</script>
{% endblock %}