{% extends "base.html" %} {% block title %}Einstellungen — AniWorld Downloader{% endblock %}
{% set is_admin = not auth_enabled or (current_user and current_user.role == 'admin') %}
{% block content %}
<div class="settings-container">
  <div class="page-header" style="margin-bottom:20px;">
    <h1 class="page-title">Einstellungen</h1>
    <p class="page-subtitle">Konfiguration &amp; Verwaltung</p>
  </div>

  <!-- .env migration banner — only shown if legacy .env still exists -->
  {% if is_admin %}
  <div id="envFileBanner"
    style="display:none;margin-bottom:20px;padding:14px 18px;background:var(--bg-card);border:1px solid var(--border);border-left:4px solid var(--accent,#6366f1);border-radius:var(--radius-lg);align-items:center;gap:14px;flex-wrap:wrap;">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
      stroke-linejoin="round" style="width:20px;height:20px;flex-shrink:0;color:var(--accent,#6366f1)">
      <circle cx="12" cy="12" r="10" />
      <line x1="12" y1="8" x2="12" y2="12" />
      <line x1="12" y1="16" x2="12.01" y2="16" />
    </svg>
    <div style="flex:1;min-width:200px;">
      <strong style="font-size:0.9rem;">Deine .env wurde importiert</strong>
      <p style="margin:2px 0 0;font-size:0.82rem;color:var(--text-muted);">Alle Einstellungen aus
        <code>~/.aniworld/.env</code> sind jetzt in der Datenbank gespeichert. Die Datei wird nicht mehr benötigt.
      </p>
    </div>
    <button class="btn btn-primary" onclick="deleteEnvFile()" style="flex-shrink:0;">
      .env jetzt löschen
    </button>
    <button onclick="document.getElementById('envFileBanner').style.display='none'"
      style="background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:1.2rem;line-height:1;padding:4px;"
      title="Schließen">✕</button>
  </div>
  {% endif %}

  <!-- Tab Navigation -->
  <div class="settings-tabs" id="settingsTabs">
    <button class="settings-tab" data-tab="general" onclick="switchTab('general')">Allgemein</button>
    <button class="settings-tab active" data-tab="design" onclick="switchTab('design')">Design</button>
    <button class="settings-tab" data-tab="downloads" onclick="switchTab('downloads')">Downloads</button>
    <button class="settings-tab" data-tab="autosync" onclick="switchTab('autosync')">Auto-Sync</button>
    <button class="settings-tab" data-tab="network" onclick="switchTab('network')">Netzwerk</button>
    {% if is_admin %}
    <button class="settings-tab" data-tab="auth" onclick="switchTab('auth')">Authentifizierung</button>
    <button class="settings-tab" data-tab="api" onclick="switchTab('api')">API</button>
    {% endif %}
    <button class="settings-tab" data-tab="updates" onclick="switchTab('updates')">Updates</button>
  </div>

  <!-- ══════════════════════════════════════════════════════
       Tab: Allgemein
  ══════════════════════════════════════════════════════ -->
  <div class="settings-tab-panel" id="tab-general">
    <div class="settings-section">
      <h2>Projekt & Support</h2>
      <div class="settings-hint" style="margin-bottom:14px;">
        MRX-AniWorld-Downloader ist ein Open-Source-Projekt. Bei Fragen, Fehlern oder für neue Feature-Ideen besuche
        bitte unser GitHub Repository.
      </div>
      <div style="display:flex; gap:12px; flex-wrap:wrap; padding: 0 22px 14px;">
        <a href="https://github.com/TheMRX13/MRX-AniWorld-Downloader" target="_blank" rel="noopener noreferrer"
          class="btn btn-primary" style="text-decoration:none;display:inline-flex;align-items:center;gap:8px;">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round" style="width:16px;height:16px">
            <path
              d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22">
            </path>
          </svg>
          GitHub Repository
        </a>
        <a href="https://github.com/TheMRX13/MRX-AniWorld-Downloader/issues" target="_blank" rel="noopener noreferrer"
          class="btn btn-secondary" style="text-decoration:none;display:inline-flex;align-items:center;gap:8px;">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round" style="width:16px;height:16px">
            <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path>
            <line x1="12" y1="9" x2="12" y2="13"></line>
            <line x1="12" y1="17" x2="12.01" y2="17"></line>
          </svg>
          Issue Tracker
        </a>
      </div>
    </div>



    {% if is_admin %}
    <div class="settings-section">
      <h2>Debug-Modus</h2>
      <div class="settings-row">
        <label class="settings-checkbox-row" for="debugMode">
          <input type="checkbox" id="debugMode" onchange="saveDebugMode()" />
          <span>Debug-Logging aktivieren</span>
        </label>
      </div>
      <div class="settings-hint" style="padding:0 22px 14px;">Schreibt ausführliche Logs. Sofort wirksam — kein Neustart
        nötig.</div>
    </div>
    {% endif %}
  </div><!-- /tab-general -->
  <!-- ══════════════════════════════════════════════════════
       Tab: Design
  ══════════════════════════════════════════════════════ -->
  <div class="settings-tab-panel active" id="tab-design">
    <div class="settings-section">
      <h2>Design</h2>
      <h3 class="settings-subtitle">Erscheinungsbild</h3>
      <div class="settings-row">
        <button class="appearance-theme-btn" id="themeBtnDark" onclick="setTheme('dark')">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
          </svg>
          Dark
        </button>
        <button class="appearance-theme-btn" id="themeBtnLight" onclick="setTheme('light')">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
            stroke-linejoin="round">
            <circle cx="12" cy="12" r="5" />
            <line x1="12" y1="1" x2="12" y2="3" />
            <line x1="12" y1="21" x2="12" y2="23" />
            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
            <line x1="1" y1="12" x2="3" y2="12" />
            <line x1="21" y1="12" x2="23" y2="12" />
            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
          </svg>
          Light
        </button>
      </div>

      <h3 class="settings-subtitle">Akzentfarbe</h3>
      <div class="settings-row">
        <div class="accent-presets" id="accentPresetsSettings"></div>
      </div>
      <h3 class="settings-subtitle">Benutzerdefinierte Farbe</h3>
      <div class="settings-row">

        <input type="text" class="settings-input" id="accentHexInput" maxlength="7" placeholder="#7c3aed" />
        <div class="accent-color-swatch">
          <input type="color" id="accentColorPicker" />
        </div>
        <button class="btn btn-secondary" onclick="resetAppearance()">Design zurücksetzen</button>
      </div>
    </div>
    <div class="settings-section">
      <h2>Erweiterte Einstellungen</h2>
      <div class="settings-hint">Diese Einstellungen ändern das Design nur minimal.</div>
      <!-- Eine Glow Markierung aktiver Menüpunkte in der Akzentfarbe -->
      <label class="settings-checkbox-row" for="glowEffect">
        <input type="checkbox" id="glowEffect" onchange="saveGlowEffect()" />
        <span>Glow-Effekt hinzufügen</span>
      </label>
      <div class="settings-hint">Eine Glow Markierung aktiver Menüpunkte in der Akzentfarbe</div>
      <!-- Header-Farbe mit der Akzentfarbe ändern-->
      <label class="settings-checkbox-row" for="headerColor">
        <input type="checkbox" id="headerColor" onchange="saveHeaderColor()" />
        <span>Header-Farbe mit der Akzentfarbe ändern</span>
      </label>
      <div class="settings-hint">Header-Farbe mit der Akzentfarbe ändern</div>
      <label class="settings-checkbox-row" for="headerColorHelp">
        <input type="checkbox" id="headerColorHelp" onchange="saveHeaderColorHelp()" />
        <span>Header-Farbe verblassen für eine leichtere Lesbarkeit</span>
      </label>
      <div class="settings-hint">Header-Farbe umkehren</div>
      <!-- Ein animiertes Laden in der Übersichtsanzeige für die einzelnen Elemente-->
      <label class="settings-checkbox-row" for="skeletonLoader">
        <input type="checkbox" id="skeletonLoader" onchange="saveSkeletonLoader()" />
        <span>Skeleton Loader</span>
      </label>
      <div class="settings-hint">Ein animiertes Laden in der Übersichtsanzeige für die einzelnen Elemente, die noch
        nicht geladen sind</div>
      <!-- Eine Markierung wenn man mit der Maus über einer der Filme hovert in der Akzentfarbe -->
      <label class="settings-checkbox-row" for="chooseBorder">
        <input type="checkbox" id="chooseBorder" onchange="saveBorder()" />
        <span>Farbliche Markierung der Auswahl</span>
      </label>
      <div class="settings-hint">Eine Markierung wenn man mit der Maus über einer der Filme hovert in der Akzentfarbe
      </div>
      <!-- Eine Markierung in der Übersicht was aktuell heruntergeladen wird in der Akzentfarbe-->
      <label class="settings-checkbox-row" for="activeDownloadGlow">
        <input type="checkbox" id="activeDownloadGlow" onchange="saveActiveDownloadGlow()" />
        <span>Farbliche Markierung in der Übersicht was aktuell heruntergeladen wird</span>
      </label>
      <div class="settings-hint">Eine Markierung in der Übersicht was aktuell heruntergeladen wird in der Akzentfarbe
      </div>
      <!-- Eine Markierung in der Übersicht was aktuell heruntergeladen wird in der Akzentfarbe (Button wird etwas heller und um 5% kleiner beim Klick)-->
      <label class="settings-checkbox-row" for="clickEffect">
        <input type="checkbox" id="clickEffect" onchange="saveClickEffect()" />
        <span>"Button Press" Animation wenn man auf einen Button/einen Link klickt</span>
      </label>
      <div class="settings-hint">Button wird etwas heller und um 5% kleiner beim Klick</div>
      <!-- Icons bewegen sich beim Hovern in den Menüs -->
      <label class="settings-checkbox-row" for="iconMove">
        <input type="checkbox" id="iconMove" onchange="saveIconMove()" />
        <span>Icon Animationen</span>
      </label>
      <div class="settings-hint">Icons bewegen sich beim Hovern in den Menüs</div>
    </div>
  </div>



  <!-- ══════════════════════════════════════════════════════
       Tab: Downloads
  ══════════════════════════════════════════════════════ -->
  <div class="settings-tab-panel active" id="tab-downloads">

    {% if is_admin %}
    <div class="settings-section">
      <h2>Download-Einstellungen</h2>

      <h3 class="settings-subtitle">Download-Pfad</h3>
      <div class="settings-row">
        <input type="text" id="downloadPath" placeholder="/path/to/downloads" />
        <button onclick="saveDownloadPath()">Speichern</button>
      </div>
      <div class="settings-hint">Änderungen wirken sich sofort auf neue Downloads aus.</div>

      <h3 class="settings-subtitle" style="margin-top:18px;">Standardsprache</h3>
      <div class="settings-row" style="gap:12px;align-items:flex-end;flex-wrap:wrap;">
        <div class="settings-field">
          <label class="settings-field-label">Sprache für Downloads</label>
          <select id="downloadLanguage" onchange="saveDownloadLanguage()" class="sync-select">
            <option value="German Dub">German Dub</option>
            <option value="English Sub">English Sub</option>
            <option value="German Sub">German Sub</option>
            <option value="English Dub">English Dub</option>
          </select>
        </div>
        <div class="settings-field">
          <label class="settings-field-label">Standard-Anbieter</label>
          <select id="downloadProvider" onchange="saveDownloadProvider()" class="sync-select">
            <option value="VOE">VOE</option>
            <option value="Vidmoly">Vidmoly</option>
            <option value="Vidoza">Vidoza</option>
            <option value="Filemoon">Filemoon</option>
            <option value="Doodstream">Doodstream</option>
            <option value="Vidara">Vidara</option>
          </select>
        </div>
      </div>
      <div class="settings-hint">Wird als Vorgabe beim Hinzufügen eines neuen Downloads verwendet.</div>

      <h3 class="settings-subtitle" style="margin-top:18px;">Datei-Namensvorlage</h3>
      <div class="settings-row">
        <input type="text" id="namingTemplate"
          placeholder="{title} ({year}) [imdbid-{imdbid}]/Season {season}/{title} S{season}E{episode}.mkv"
          style="font-family:monospace;font-size:0.82rem;" />
        <button onclick="saveNamingTemplate()">Speichern</button>
        <button class="btn btn-danger" onclick="resetNamingTemplate()">Zurücksetzen</button>
      </div>
      <div class="settings-hint">
        Platzhalter: <code>{title}</code> <code>{year}</code> <code>{imdbid}</code> <code>{season}</code>
        <code>{episode}</code> <code>{language}</code>
      </div>

      <div style="margin-top:18px;">
        <label class="settings-checkbox-row" for="langSeparation">
          <input type="checkbox" id="langSeparation" onchange="saveLangSeparation()" />
          <span>Sprachen in Ordner trennen</span>
        </label>
        <div class="settings-hint">Downloads werden nach Sprache sortiert (z.B. german-dub/, english-sub/).</div>

        <label class="settings-checkbox-row" for="disableEnglishSub" style="margin-top:10px;">
          <input type="checkbox" id="disableEnglishSub" onchange="saveDisableEnglishSub()" />
          <span>Englische Untertitel-Downloads deaktivieren</span>
        </label>
        <div class="settings-hint">Blendet Englisch Sub aus der Sprachauswahl aus.</div>

        <label class="settings-checkbox-row" for="filmpalastSubfolder" style="margin-top:10px;">
          <input type="checkbox" id="filmpalastSubfolder" onchange="saveFilmpalastSubfolder()" />
          <span>Film-Unterordner aktivieren (Filmpalast)</span>
        </label>
        <div class="settings-hint">Jeder Film erhält einen eigenen Unterordner — empfohlen für Jellyfin.</div>
      </div>
    </div>

    <div class="settings-section">
      <h2>Benutzerdefinierte Pfade</h2>
      <h3 class="settings-subtitle">Pfad hinzufügen</h3>
      <div class="add-user-row" style="margin-bottom:16px">
        <input type="text" id="newPathName" placeholder="Name (z.B. NAS)" />
        <input type="text" id="newPathValue" placeholder="/mnt/nas/anime" />
        <button onclick="addCustomPath()">Hinzufügen</button>
      </div>
      <div class="user-table-wrapper">
        <table class="user-table" id="customPathsTable">
          <thead>
            <tr>
              <th>Name</th>
              <th>Pfad</th>
              <th>Aktionen</th>
            </tr>
          </thead>
          <tbody id="customPathsBody"></tbody>
        </table>
      </div>
    </div>
    {% endif %}

  </div><!-- /tab-downloads -->

  <!-- ══════════════════════════════════════════════════════
       Tab: Auto-Sync
  ══════════════════════════════════════════════════════ -->
  <div class="settings-tab-panel" id="tab-autosync">
    {% if is_admin %}
    <div class="settings-section">
      <h2>Auto-Sync Standards</h2>
      <div class="settings-row" style="flex-wrap:wrap;gap:12px;align-items:flex-start">
        <div class="settings-field">
          <label class="settings-field-label">Zeitplan</label>
          <select id="syncSchedule" onchange="saveSyncSchedule()" class="sync-select">
            <option value="0">Deaktiviert</option>
            <option value="1min">1 min (Debug)</option>
            <option value="30min">30 min</option>
            <option value="1h">1 Stunde</option>
            <option value="2h">2 Stunden</option>
            <option value="4h">4 Stunden</option>
            <option value="8h">8 Stunden</option>
            <option value="12h">12 Stunden</option>
            <option value="16h">16 Stunden</option>
            <option value="24h">24 Stunden</option>
          </select>
        </div>
        <div class="settings-field">
          <label class="settings-field-label">Standardsprache</label>
          <select id="syncLanguage" onchange="saveSyncDefaults()" class="sync-select">
            <option>German Dub</option>
            <option>English Sub</option>
            <option>German Sub</option>
          </select>
        </div>
        <div class="settings-field">
          <label class="settings-field-label">Standardanbieter</label>
          <select id="syncProvider" onchange="saveSyncDefaults()" class="sync-select">
            <option>VOE</option>
            <option>Vidmoly</option>
            <option>Vidoza</option>
          </select>
        </div>
        <div class="settings-field">
          <label class="settings-field-label">Custom Path nicht erreichbar</label>
          <select id="syncPathUnavailableAction" onchange="saveSyncPathAction()" class="sync-select">
            <option value="skip">Sync überspringen</option>
            <option value="hold">Warten (Hold)</option>
          </select>
        </div>
      </div>
      <div class="settings-hint">
        Wie oft Auto-Sync nach neuen Episoden sucht. Sprache und Anbieter sind Standardwerte für neue Sync-Jobs.<br>
        <strong>Custom Path nicht erreichbar:</strong> Legt fest was der Auto-Sync tun soll wenn der zugewiesene Custom Path nicht verfügbar ist. Gilt als Standard für alle neuen Jobs — kann aber pro Job individuell überschrieben werden.
      </div>
    </div>
    <div class="settings-section">
      <h2>Auto-Sync Fehler Handling</h2>
      <div class="settings-row" style="flex-wrap:wrap;gap:12px;align-items:flex-start">
        <div class="settings-field">
          <label class="settings-field-label">Wiederholungen bei Fehlern</label>
          <select id="syncErrorRetries" onchange="saveSyncErrorRetries()" class="sync-select">
            <option value="0">Keine Wiederholungen</option>
            <option value="1">1 Wiederholung</option>
            <option value="2">2 Wiederholungen</option>
            <option value="3">3 Wiederholungen</option>
          </select>
        </div>
        <div class="settings-field">
          <label class="settings-field-label">Zeit zwischen den Versuchen</label>
          <select id="syncErrorRetryTime" onchange="saveSyncErrorRetryTime()" class="sync-select">
            <option value="0min">Keine Wartezeit</option>
            <option value="1min">1 Minute</option>
            <option value="2min">2 Minuten</option>
            <option value="3min">3 Minuten</option>
            <option value="4min">4 Minuten</option>
            <option value="5min">5 Minuten</option>
          </select>
        </div>
      </div>
      <div class="settings-hint">
        Legt fest wie oft und in welchem Abstand ein fehlgeschlagener Auto-Sync wiederholt wird, bevor er als endgültig gescheitert gilt.
      </div>
    </div>
    {% else %}
    <div class="settings-section">
      <div class="settings-hint">Nur Administratoren können Auto-Sync-Einstellungen ändern.</div>
    </div>
    {% endif %}
  </div><!-- /tab-autosync -->

  <!-- ══════════════════════════════════════════════════════
       Tab: Netzwerk
  ══════════════════════════════════════════════════════ -->
  <div class="settings-tab-panel" id="tab-network">
    <div class="settings-section">
      <h2>Netzwerk / DNS</h2>
      {% if is_admin %}
      <div class="settings-row" style="flex-wrap:wrap;gap:12px;align-items:flex-end">
        <div class="settings-field">
          <label class="settings-field-label">DNS-Modus</label>
          <select id="dnsMode" onchange="onDnsModeChange()" class="sync-select">
            <option value="system">System (Standard)</option>
            <option value="cloudflare">Cloudflare (1.1.1.1)</option>
            <option value="google">Google (8.8.8.8)</option>
            <option value="quad9">Quad9 (9.9.9.9)</option>
            <option value="custom">Benutzerdefiniert…</option>
          </select>
        </div>
        <div class="settings-field" id="dnsCustomField" style="display:none;flex:1;min-width:180px">
          <label class="settings-field-label">DNS-Server IP</label>
          <input type="text" id="dnsServer" placeholder="z.B. 1.1.1.1" />
        </div>
        <button onclick="saveDnsSettings()">Speichern</button>
      </div>
      {% endif %}
      <div class="settings-hint">
        Legt fest, über welchen DNS-Server Domains aufgelöst werden. Nützlich wenn dein ISP AniWorld oder S.TO sperrt.
      </div>
      <div style="padding:0 22px 16px;display:flex;gap:8px;align-items:center;">
        <button onclick="toggleDnsTestPanel()" id="dnsTestToggleBtn" style="font-size:0.82rem;padding:5px 12px;">DNS
          Testen</button>
      </div>
      <div id="dnsTestPanel" class="dns-test-panel" style="display:none">
        <div class="dns-test-header">
          <span>DNS-Diagnose</span>
          <button class="dns-test-rerun" onclick="runDnsTest()" id="dnsTestRunBtn">▶ Testen</button>
        </div>
        <div class="dns-test-block">
          <div class="dns-test-block-title">DNS-Status</div>
          <div id="dnsTestStatus" class="dns-test-status-row">
            <span class="dns-test-idle">— Noch nicht getestet</span>
          </div>
        </div>
        <div class="dns-test-block">
          <div class="dns-test-block-title">Erreichbarkeit</div>
          <div class="dns-test-site-row" id="dnsTestRowAniWorld">
            <span class="dns-test-site-name">aniworld.to</span>
            <span class="dns-test-site-result dns-test-idle">—</span>
          </div>
          <div class="dns-test-site-row" id="dnsTestRowSTO">
            <span class="dns-test-site-name">s.to</span>
            <span class="dns-test-site-result dns-test-idle">—</span>
          </div>
          <div class="dns-test-site-row" id="dnsTestRowFilmpalast">
            <span class="dns-test-site-name">filmpalast.to</span>
            <span class="dns-test-site-result dns-test-idle">—</span>
          </div>
        </div>
      </div>
    </div>

    {% if is_admin %}
    <div class="settings-section">
      <h2>Web-Server</h2>
      <h3 class="settings-subtitle">Basis-URL (Reverse Proxy)</h3>
      <div class="settings-row">
        <input type="text" id="webBaseUrl" placeholder="https://aniworld.example.com" />
        <button onclick="saveWebBaseUrl()">Speichern</button>
      </div>
      <div class="settings-hint">
        Öffentliche URL wenn AniWorld hinter einem Reverse Proxy läuft (z.B. Nginx, Traefik).
        Wird für OIDC-Callbacks und absolute Links benötigt. Leer lassen wenn kein Proxy verwendet wird.
        <strong>Änderungen werden nach dem nächsten Neustart wirksam.</strong>
      </div>
    </div>
    {% endif %}
  </div><!-- /tab-network -->

  <!-- ══════════════════════════════════════════════════════
       Tab: Authentifizierung
  ══════════════════════════════════════════════════════ -->
  {% if is_admin %}
  <div class="settings-tab-panel" id="tab-auth">

    <div class="settings-section">
      <h2>Benutzerverwaltung</h2>
      {% if not force_sso %}
      <h3 class="settings-subtitle">Benutzer hinzufügen</h3>
      <div class="add-user-row" style="margin-bottom:16px">
        <input type="text" id="newUsername" placeholder="Benutzername" />
        <input type="password" id="newPassword" placeholder="Passwort" />
        <select id="newRole">
          <option value="user">Benutzer</option>
          <option value="admin">Administrator</option>
        </select>
        <button onclick="addUser()">Hinzufügen</button>
      </div>
      {% endif %}
      <div class="user-table-wrapper">
        <table class="user-table" id="userTable">
          <thead>
            <tr>
              <th>ID</th>
              <th>Benutzername</th>
              <th>Rolle</th>
              <th>Authentifizierung</th>
              <th>Erstellt</th>
              <th>Aktionen</th>
            </tr>
          </thead>
          <tbody id="userTableBody"></tbody>
        </table>
      </div>
    </div>

    <div class="settings-section">
      <h2>Single Sign-On (SSO / OIDC)</h2>
      <div class="settings-hint" style="margin-bottom:16px;">
        Verbinde AniWorld mit einem externen Identity-Provider (Keycloak, Authentik, Google, etc.).
        <strong>Änderungen erfordern einen Neustart des Servers.</strong>
      </div>

      <div style="display:flex;gap:24px;flex-wrap:wrap;margin-bottom:16px;">
        <label class="settings-checkbox-row" for="ssoEnabled">
          <input type="checkbox" id="ssoEnabled" onchange="onSsoToggle()" />
          <span>SSO-Login aktivieren</span>
        </label>
        <label class="settings-checkbox-row" for="forceSso">
          <input type="checkbox" id="forceSso" onchange="onSsoToggle()" />
          <span>Nur SSO (lokale Logins deaktivieren)</span>
        </label>
      </div>

      <div id="ssoFields">
        <div class="settings-row" style="flex-wrap:wrap;gap:12px;align-items:flex-end;">
          <div class="settings-field" style="flex:2;min-width:240px;">
            <label class="settings-field-label">Issuer URL</label>
            <input type="text" id="oidcIssuerUrl" placeholder="https://keycloak.example.com/realms/myrealm" />
          </div>
          <div class="settings-field" style="flex:1;min-width:160px;">
            <label class="settings-field-label">Display-Name</label>
            <input type="text" id="oidcDisplayName" placeholder="SSO" />
          </div>
        </div>
        <div class="settings-row" style="flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:10px;">
          <div class="settings-field" style="flex:1;min-width:180px;">
            <label class="settings-field-label">Client ID</label>
            <input type="text" id="oidcClientId" placeholder="aniworld" />
          </div>
          <div class="settings-field" style="flex:1;min-width:180px;">
            <label class="settings-field-label">Client Secret</label>
            <input type="password" id="oidcClientSecret" placeholder="••••••••" autocomplete="new-password" />
          </div>
        </div>
        <div class="settings-row" style="flex-wrap:wrap;gap:12px;align-items:flex-end;margin-top:10px;">
          <div class="settings-field" style="flex:1;min-width:180px;">
            <label class="settings-field-label">Admin-Benutzername (SSO)</label>
            <input type="text" id="oidcAdminUser" placeholder="admin@example.com" />
          </div>
          <div class="settings-field" style="flex:1;min-width:180px;">
            <label class="settings-field-label">Admin-Subject (sub claim)</label>
            <input type="text" id="oidcAdminSubject" placeholder="UUID aus dem Identity-Provider" />
          </div>
        </div>
        <div class="settings-hint" style="margin-top:6px;">
          Der <em>sub claim</em> ist sicherer als der Benutzername. Zu finden in den Server-Logs nach dem ersten
          SSO-Login.
        </div>
      </div>

      <div class="settings-row">
        <button class="btn btn-primary" onclick="saveSsoSettings()">SSO-Einstellungen speichern</button>
        <span id="ssoSaveHint" style="margin-left:10px;font-size:0.82rem;color:var(--text-muted);display:none;">
          ✓ Gespeichert — Neustart erforderlich
        </span>
      </div>
    </div>

  </div><!-- /tab-auth -->
  {% endif %}

  <!-- ══════════════════════════════════════════════════════
       Tab: API
  ══════════════════════════════════════════════════════ -->
  {% if is_admin %}
  <div class="settings-tab-panel" id="tab-api">
    <div class="settings-section">
      <h2>AniWorld API</h2>
      <div class="settings-hint">
        Externe REST-API für Home Assistant &amp; Co. Auth per <code>X-Api-Key</code> Header oder <code>?apikey=</code>.
      </div>
      <div class="settings-row" style="flex-wrap:wrap;gap:10px;align-items:flex-end">
        <div class="settings-field" style="flex:1;min-width:260px">
          <label class="settings-field-label">API-Key</label>
          <div class="api-key-input-row">
            <input type="password" id="externalApiKeyDisplay" readonly
              style="font-family:monospace;font-size:0.82rem;flex:1;" placeholder="Wird geladen…" />
            <div class="api-key-btn-group">
              <button onclick="toggleApiKeyVisibility()" id="apiKeyToggleBtn">Anzeigen</button>
              <button onclick="copyApiKey()">Kopieren</button>
              <button onclick="regenerateApiKey()">Neu generieren</button>
            </div>
          </div>
        </div>
      </div>
      <div style="padding:0 22px 6px;">
        <div class="settings-subtitle" style="padding-left:0;">Basis-URL</div>
        <code id="apiBaseUrlDisplay" style="font-size:0.85rem;">http://localhost:8080</code>
      </div>
      <div style="padding:4px 22px 16px;">
        <div class="settings-subtitle" style="padding-left:0;margin-bottom:8px;">Endpunkte</div>
        <table class="api-endpoints-table">
          <tbody>
            <tr>
              <td><code>GET</code></td>
              <td><code>/api/v1/status</code></td>
              <td>Status &amp; Queue-Übersicht</td>
            </tr>
            <tr>
              <td><code>GET</code></td>
              <td><code>/api/v1/queue</code></td>
              <td>Download-Queue <span class="api-param">?status=queued|running|completed|failed</span></td>
            </tr>
            <tr>
              <td><code>GET</code></td>
              <td><code>/api/v1/queue/{id}</code></td>
              <td>Einzelnes Queue-Item</td>
            </tr>
            <tr>
              <td><code>GET</code></td>
              <td><code>/api/v1/library</code></td>
              <td>Mediathek — alle Titel</td>
            </tr>
            <tr>
              <td><code>GET</code></td>
              <td><code>/api/v1/library/series</code></td>
              <td>Nur Serien</td>
            </tr>
            <tr>
              <td><code>GET</code></td>
              <td><code>/api/v1/library/movies</code></td>
              <td>Nur Filme</td>
            </tr>
            <tr>
              <td><code>GET</code></td>
              <td><code>/api/v1/stats</code></td>
              <td>Download-Statistiken</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="settings-hint" style="padding-top:0;">
        <strong>Beispiel:</strong> <code id="apiExampleUrl">…</code>
      </div>
    </div>
  </div><!-- /tab-api -->
  {% endif %}

  <!-- ══════════════════════════════════════════════════════
       Tab: Updates
  ══════════════════════════════════════════════════════ -->
  <div class="settings-tab-panel" id="tab-updates">
    <div class="settings-section">
      <h2>Updates</h2>
      <div class="settings-row" style="align-items:center;gap:16px;flex-wrap:wrap">
        <div>
          <span class="settings-field-label">Installiert</span>
          <code id="localVersion">{{ app_version or "unbekannt" }}</code>
        </div>
        <div>
          <span class="settings-field-label">Verfügbar</span>
          <code id="latestVersion">—</code>
        </div>
        <button onclick="checkForUpdates(true)" id="updateCheckBtn">Jetzt prüfen</button>
      </div>
      <div id="updateStatus" class="settings-hint" style="margin-top:8px"></div>
      <div id="updateBanner" style="display:none;margin-top:12px">
        <div class="settings-hint" style="margin-bottom:8px">
          🆕 <strong id="updateBannerText"></strong> —
          <a id="updateReleaseLink" href="#" target="_blank" rel="noopener">Release öffnen</a>
        </div>
        <pre id="updateChangelog"
          style="background:var(--input-bg,#1e1e2e);border:1px solid var(--border,#333);border-radius:6px;padding:12px;font-size:0.78rem;white-space:pre-wrap;word-break:break-word;max-height:260px;overflow-y:auto;margin:0"></pre>
        <div style="margin-top:12px">
          <span class="settings-field-label">Update installieren</span>
          <div style="display:flex;align-items:center;gap:8px;margin-top:6px">
            <code id="updatePipCmd"
              style="flex:1;background:var(--input-bg,#1e1e2e);border:1px solid var(--border,#333);border-radius:6px;padding:8px 12px;font-size:0.82rem;white-space:nowrap;overflow-x:auto;display:block"></code>
            <button onclick="copyUpdateCmd()" style="white-space:nowrap">Kopieren</button>
          </div>
        </div>
      </div>

      <!-- Dev-Channel-Hinweis — nur bei stabilem Release sichtbar -->
      <div id="devChannelHint" style="display:none;margin-top:20px;border-top:1px solid var(--border,#333);padding-top:16px">
        <span class="settings-field-label" style="display:block;margin-bottom:6px">🧪 Entwicklungskanal</span>
        <div class="settings-hint" style="margin-bottom:10px">
          Du verwendest ein stabiles Release. Der Entwicklungskanal enthält die neuesten Commits direkt aus dem
          <code>models</code>-Branch — er kann instabil sein oder unfertige Features enthalten.
        </div>
        <div style="display:flex;align-items:center;gap:8px">
          <code id="devChannelCmd"
            style="flex:1;background:var(--input-bg,#1e1e2e);border:1px solid var(--border,#333);border-radius:6px;padding:8px 12px;font-size:0.82rem;white-space:nowrap;overflow-x:auto;display:block">pip install --upgrade "git+https://github.com/TheMRX13/MRX-AniWorld-Downloader.git@models"</code>
          <button onclick="copyDevChannelCmd()" style="white-space:nowrap">Kopieren</button>
        </div>
      </div>
    </div>
  </div><!-- /tab-updates -->

</div><!-- /settings-container -->
{% endblock %}
{% block scripts %}
<script>var settingsCanEdit = {{ 'true' if is_admin else 'false' }};</script>
<script src="{{ url_for('static', filename='settings.js') }}"></script>
<script src="{{ url_for('static', filename='pwa.js') }}"></script>
{% endblock %}