{% extends "base.html" %} {% block title %}Benachrichtigungen — AniWorld Downloader{% endblock %}
{% block content %}
<div class="settings-container">
  <div class="page-header" style="margin-bottom:28px;">
    <h1 class="page-title">Benachrichtigungen</h1>
    <p class="page-subtitle">Dienste konfigurieren</p>
  </div>

  <!-- Service Pills -->
  <div class="service-pills">
    <button class="service-pill active" onclick="showService('webpush',this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
      Web Push
    </button>
    <button class="service-pill" onclick="showService('telegram',this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21.2 4.8L2.8 11.6c-1.1.4-1.1 1.1-.2 1.4l4.6 1.4 1.8 5.5c.2.6.5.8.9.8.4 0 .6-.2.9-.4l2.7-2.6 5.3 3.9c1 .5 1.7.3 1.9-.9l3.4-16c.3-1.4-.5-2-1.9-1.4z"/></svg>
      Telegram
    </button>
    <button class="service-pill" onclick="showService('pushover',this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12" y2="18.01"/></svg>
      Pushover
    </button>
    <button class="service-pill" onclick="showService('ntfy',this)">
      <svg viewBox="0 0 24 24"><g transform="scale(.046875)" fill="currentColor"><path d="M78.1 32.7C40.9 32.7 9 62 9 99.2l.4 311.2-9.4 69 127.1-33.8H443c37.2 0 69.1-29.3 69.1-66.5V99.2c0-37.2-31.9-66.5-69-66.5zm0 46.9H443c13.1 0 22.1 9.5 22.1 19.6V379c0 10-9 19.8-22.1 19.6H120.2l-64.6 19.5.7-3.8-.4-315.1c0-10.1 9.1-19.6 22.2-19.6"/><path d="M116.4 310.9v-34.8l73.1-38.7c2.4-1.2 4.6-2.1 6.8-2.7 2.3-.8 4.5-1.4 6.3-1.8l6-.6V230q-3-.3-6-1.2-2.85-.6-6.3-1.5c-2.2-.8-4.5-1.8-6.8-3l-73.1-38.7v-35.1l113 61.5v37.4z"/><path d="M110.5 139.7v50.4l76.6 40.6.5.2-.5.2-76.6 40.6v50.1l8.2-4.5L235.1 254v-46.4zm11.8 21.7 101.2 55.1V245l-101.2 55.1v-19.4l69.6-36.8.1-.1c1.9-1 3.8-1.7 5.8-2.3h.1l.2-.1c2.1-.7 3.9-1.2 5.5-1.6l11.1-1.1v-15.2l-5.4-.5c-1.7-.2-3.5-.5-5.1-1.1h-.2l-.2-.1c-2-.4-3.9-.9-5.9-1.4-2-.7-4-1.6-5.9-2.6l-.1-.1-69.6-36.7zm152.3 137.4h120.7v32.6H274.6z"/><path d="M268.7 292.1v46h132.4v-46zm11.7 13.4h109v19.2h-109z"/></g></svg>
      NTFY
    </button>
    <button class="service-pill" onclick="showService('discord',this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><path d="M7.5 7.5c1-.5 2.5-.5 4.5-.5s3.5 0 4.5.5M7.5 16.5c1 .5 2.5.5 4.5.5s3.5 0 4.5-.5"/><path d="M5 5.5S3 6 2 9c0 4 1 8 4 9.5 1 .5 2.5.5 3 0l1-2M19 5.5s2 .5 3 3c0 4-1 8-4 9.5-1 .5-2.5.5-3 0l-1-2"/></svg>
      Discord
    </button>
    <button class="service-pill" onclick="showService('whatsapp',this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
      WhatsApp
    </button>
  <button class="service-pill" onclick="showService('storage',this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
      Speicher
    </button>
  </div>

  <!-- ═══ WEB PUSH ═══ -->
  <div class="service-panel active" id="panel-webpush">

    {% if is_admin %}
    <div class="settings-section">
      <div class="settings-section-header">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;margin-right:6px;vertical-align:-2px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        Admin — Dienst
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Web Push global aktivieren</div>
          <div class="settings-row-desc">Deaktivieren um Browser-Push-Benachrichtigungen für alle Nutzer zu sperren.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="admin_webpush_enabled" checked onchange="saveAdminToggle('notif_webpush_enabled',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
    </div>
    {% endif %}

    <div class="settings-section">
      <h2 style="padding:20px 24px 0;margin:0;font-size:1rem;font-weight:600;">Web Push</h2>
      <div class="settings-hint" style="padding:8px 24px 0;">
        Erhalte Browser-Benachrichtigungen direkt im Browser — auch wenn AniWorld im Hintergrundtab läuft. Der Browser muss geöffnet sein. Funktioniert auf Desktop und Mobilgeräten, die Chrome/Firefox unterstützen.
      </div>
      <div class="settings-hint" style="color:var(--text-muted);font-size:0.8rem;padding:4px 24px 0;">
        ⚠️ Web Push funktioniert nur über <strong>HTTPS</strong> oder <strong>localhost</strong>.
      </div>
      <div class="settings-row" style="border-top:1px solid var(--border);margin-top:12px;">
        <div class="settings-row-left"></div>
        <div class="settings-row-right" style="display:flex;gap:8px;flex-wrap:wrap;">
          <button id="pushBtn" class="btn btn-primary" onclick="togglePushSubscription()" style="min-width:160px;">Web Push aktivieren</button>
          <button class="btn btn-secondary" onclick="testNotif('webpush')">Test</button>
        </div>
      </div>
    </div>

    <div class="settings-section push-prefs-disabled" id="pushPrefsSection">
      <div class="settings-section-header">Benachrichtigen bei</div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Erfolgreicher Download</div>
          <div class="settings-row-desc">Wenn alle Episoden eines Queue-Eintrags ohne Fehler abgeschlossen wurden.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_webpush_on_completed" onchange="saveUserPref('webpush_on_completed',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Teilweise erfolgreich</div>
          <div class="settings-row-desc">Wenn mindestens eine Episode erfolgreich war, aber auch Fehler aufgetreten sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_webpush_on_partial" onchange="saveUserPref('webpush_on_partial',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Download mit Fehlern</div>
          <div class="settings-row-desc">Wenn einzelne Episoden eines Queue-Eintrags fehlgeschlagen sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_webpush_on_errors" onchange="saveUserPref('webpush_on_errors',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Abgebrochener Download</div>
          <div class="settings-row-desc">Wenn ein laufender Download manuell abgebrochen wird.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_webpush_on_cancelled" onchange="saveUserPref('webpush_on_cancelled',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Neue Folgen</div>
          <div class="settings-row-desc">Wenn der Auto-Sync neue Episoden einer abonnierten Serie gefunden hat.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_webpush_on_autosync" onchange="saveUserPref('webpush_on_autosync',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>

      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Fehler</div>
          <div class="settings-row-desc">Wenn ein Auto-Sync Job abstürzt oder fehlschlägt.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_webpush_on_sync_error" onchange="saveUserPref('webpush_on_sync_error',this.checked?'1':'0'); updateSyncErrorSubtogglesState();"><span class="toggle-slider"></span></label>
        </div>
      </div>
      {% if is_admin %}
      <div class="settings-row" id="admin_sync_error_only_failed_all_container_webpush" style="padding-left: 44px;">
        <div class="settings-row-left">
          <div class="settings-row-label" style="font-size: 0.9rem;">↳ Nur Fehler-Benachrichtigungen wenn alle Wiederholungen gescheitert sind</div>
          <div class="settings-row-desc">Wenn aktiviert, wird bei fehlgeschlagenen Auto-Syncs erst nach dem Ausschöpfen aller Wiederholungen eine Benachrichtigung gesendet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="admin_sync_error_only_failed_all_webpush" onchange="saveAdminToggle('notif_sync_error_only_failed_all',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
      {% endif %}
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Hold &amp; Wiederaufnahme</div>
          <div class="settings-row-desc">Wenn ein Sync wegen unerreichbarem Custom Path pausiert wird — oder wieder startet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_webpush_on_sync_hold" onchange="saveUserPref('webpush_on_sync_hold',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Speicherplatz niedrig</div>
          <div class="settings-row-desc">Wenn der freie Speicherplatz unter den konfigurierten Schwellenwert fällt.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_webpush_on_disk_space_low" onchange="saveUserPref('webpush_on_disk_space_low',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
    </div>
  </div>

  <!-- ═══ TELEGRAM ═══ -->
  <div class="service-panel" id="panel-telegram">

    {% if is_admin %}
    <div class="settings-section">
      <div class="settings-section-header">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;margin-right:6px;vertical-align:-2px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        Admin — Bot-Konfiguration
      </div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        Erstelle einen Bot via <a href="https://t.me/BotFather" target="_blank" style="color:var(--accent)">@BotFather</a>. Der Bot sendet dann Nachrichten an Nutzer die ihre Chat-ID hinterlegt haben.
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Bot Token</div>
          <div class="settings-row-desc">Erhalten von @BotFather nach <code>/newbot</code>. Format: <code>1234567890:ABC-DEF...</code></div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="password" id="admin_telegram_token" class="notif-input" placeholder="••••••••">
          <button class="btn btn-icon" onclick="toggleVisibility('admin_telegram_token',this)" title="Anzeigen/Verbergen">
            <svg viewBox="0 0 24 24" width="15" height="15" style="width:15px;height:15px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
          </button>
          <button class="btn btn-primary btn-sm" onclick="saveAdminField('notif_telegram_bot_token','admin_telegram_token')">Speichern</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Telegram global aktivieren</div>
          <div class="settings-row-desc">Deaktivieren um Telegram-Nachrichten für alle Nutzer zu sperren.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="admin_telegram_enabled" checked onchange="saveAdminToggle('notif_telegram_enabled',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
    </div>
    {% endif %}

    <div class="settings-section">
      <div class="settings-section-header">Meine Einstellungen</div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        Schreibe dem Bot zuerst eine Nachricht (z.B. <code>/start</code>), dann klicke auf <strong>Erkennen</strong>. Alternativ gib deine Chat-ID manuell ein — zu finden über <a href="https://t.me/userinfobot" target="_blank" style="color:var(--accent)">@userinfobot</a>.
      </div>
      <div class="settings-row" id="telegram-status-row" style="display:none;">
        <div class="settings-row-left"><div class="settings-row-label">Dienst-Status</div></div>
        <div class="settings-row-right"><span id="telegram-status-badge" class="notif-badge notif-badge-warn">Bot nicht konfiguriert</span></div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Telegram aktivieren</div>
          <div class="settings-row-desc">Telegram-Benachrichtigungen für dein Konto ein- oder ausschalten.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_telegram_enabled" checked onchange="saveUserPref('telegram_enabled',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Chat-ID</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="text" id="user_telegram_chat_id" class="notif-input" placeholder="z.B. 123456789">
          <button class="btn btn-secondary btn-sm" onclick="detectTelegramChatId()" title="Chat-ID automatisch erkennen">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
            Erkennen
          </button>
          <button class="btn btn-primary btn-sm" onclick="saveUserField('telegram_chat_id','user_telegram_chat_id')">Speichern</button>
        </div>
      </div>
    </div>

    <div class="settings-section notif-prefs-section" id="telegram-prefs-section">
      <div class="settings-section-header">Benachrichtigen bei</div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Erfolgreicher Download</div>
          <div class="settings-row-desc">Nachricht wenn alle Episoden eines Jobs ohne Fehler fertig sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_telegram_on_completed" onchange="saveUserPref('telegram_on_completed',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Teilweise erfolgreich</div>
          <div class="settings-row-desc">Nachricht wenn mindestens eine Episode erfolgreich war, aber auch Fehler aufgetreten sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_telegram_on_partial" onchange="saveUserPref('telegram_on_partial',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Download mit Fehlern</div>
          <div class="settings-row-desc">Nachricht wenn einzelne Episoden fehlgeschlagen sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_telegram_on_errors" onchange="saveUserPref('telegram_on_errors',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Abgebrochener Download</div>
          <div class="settings-row-desc">Nachricht wenn ein laufender Download manuell abgebrochen wurde.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_telegram_on_cancelled" onchange="saveUserPref('telegram_on_cancelled',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Neue Folgen</div>
          <div class="settings-row-desc">Nachricht wenn der Auto-Sync neue Episoden einer abonnierten Serie findet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_telegram_on_autosync" onchange="saveUserPref('telegram_on_autosync',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>

      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Fehler</div>
          <div class="settings-row-desc">Wenn ein Auto-Sync Job abstürzt oder fehlschlägt.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_telegram_on_sync_error" onchange="saveUserPref('telegram_on_sync_error',this.checked?'1':'0'); updateSyncErrorSubtogglesState();"><span class="toggle-slider"></span></label>
        </div>
      </div>
      {% if is_admin %}
      <div class="settings-row" id="admin_sync_error_only_failed_all_container_telegram" style="padding-left: 44px;">
        <div class="settings-row-left">
          <div class="settings-row-label" style="font-size: 0.9rem;">↳ Nur Fehler-Benachrichtigungen wenn alle Wiederholungen gescheitert sind</div>
          <div class="settings-row-desc">Wenn aktiviert, wird bei fehlgeschlagenen Auto-Syncs erst nach dem Ausschöpfen aller Wiederholungen eine Benachrichtigung gesendet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="admin_sync_error_only_failed_all_telegram" onchange="saveAdminToggle('notif_sync_error_only_failed_all',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
      {% endif %}
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Hold &amp; Wiederaufnahme</div>
          <div class="settings-row-desc">Wenn ein Sync wegen unerreichbarem Custom Path pausiert wird — oder wieder startet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_telegram_on_sync_hold" onchange="saveUserPref('telegram_on_sync_hold',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Speicherplatz niedrig</div>
          <div class="settings-row-desc">Wenn der freie Speicherplatz unter den konfigurierten Schwellenwert fällt.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_telegram_on_disk_space_low" onchange="saveUserPref('telegram_on_disk_space_low',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row" style="border-top:1px solid var(--border);padding-top:4px;">
        <div class="settings-row-left"></div>
        <div class="settings-row-right">
          <button class="btn btn-secondary btn-sm" onclick="testNotif('telegram')">Test senden</button>
        </div>
      </div>
    </div>
  </div>

  <!-- ═══ PUSHOVER ═══ -->
  <div class="service-panel" id="panel-pushover">

    {% if is_admin %}
    <div class="settings-section">
      <div class="settings-section-header">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;margin-right:6px;vertical-align:-2px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        Admin — App-Konfiguration
      </div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        Erstelle eine App auf <a href="https://pushover.net/apps/build" target="_blank" style="color:var(--accent)">pushover.net/apps/build</a>. Jeder Nutzer gibt dann seinen eigenen User-Key ein.
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">App-Token</div>
          <div class="settings-row-desc">Zu finden auf der App-Seite nach dem Erstellen unter <em>API Token/Key</em>.</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="password" id="admin_pushover_token" class="notif-input" placeholder="••••••••">
          <button class="btn btn-icon" onclick="toggleVisibility('admin_pushover_token',this)" title="Anzeigen/Verbergen">
            <svg viewBox="0 0 24 24" width="15" height="15" style="width:15px;height:15px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
          </button>
          <button class="btn btn-primary btn-sm" onclick="saveAdminField('notif_pushover_app_token','admin_pushover_token')">Speichern</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Pushover global aktivieren</div>
          <div class="settings-row-desc">Deaktivieren um Pushover-Nachrichten für alle Nutzer zu sperren.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="admin_pushover_enabled" checked onchange="saveAdminToggle('notif_pushover_enabled',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
    </div>
    {% endif %}

    <div class="settings-section">
      <div class="settings-section-header">Meine Einstellungen</div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        Lade die <a href="https://pushover.net" target="_blank" style="color:var(--accent)">Pushover-App</a> auf dein Gerät. Nach dem Login findest du deinen User-Key auf der Startseite.
      </div>
      <div class="settings-row" id="pushover-status-row" style="display:none;">
        <div class="settings-row-left"><div class="settings-row-label">Dienst-Status</div></div>
        <div class="settings-row-right"><span id="pushover-status-badge" class="notif-badge notif-badge-warn">App nicht konfiguriert</span></div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Pushover aktivieren</div>
          <div class="settings-row-desc">Pushover-Benachrichtigungen für dein Konto ein- oder ausschalten.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_pushover_enabled" checked onchange="saveUserPref('pushover_enabled',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">User-Key</div>
          <div class="settings-row-desc">Dein persönlicher Pushover-Schlüssel — nicht die App-API-Key.</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="password" id="user_pushover_key" class="notif-input" placeholder="••••••••">
          <button class="btn btn-icon" onclick="toggleVisibility('user_pushover_key',this)" title="Anzeigen/Verbergen">
            <svg viewBox="0 0 24 24" width="15" height="15" style="width:15px;height:15px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
          </button>
          <button class="btn btn-primary btn-sm" onclick="saveUserField('pushover_user_key','user_pushover_key')">Speichern</button>
        </div>
      </div>
    </div>

    <div class="settings-section notif-prefs-section" id="pushover-prefs-section">
      <div class="settings-section-header">Benachrichtigen bei</div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Erfolgreicher Download</div>
          <div class="settings-row-desc">Nachricht wenn alle Episoden ohne Fehler fertig sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_pushover_on_completed" onchange="saveUserPref('pushover_on_completed',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Teilweise erfolgreich</div>
          <div class="settings-row-desc">Nachricht wenn mindestens eine Episode erfolgreich war, aber auch Fehler aufgetreten sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_pushover_on_partial" onchange="saveUserPref('pushover_on_partial',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Download mit Fehlern</div>
          <div class="settings-row-desc">Nachricht wenn einzelne Episoden fehlgeschlagen sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_pushover_on_errors" onchange="saveUserPref('pushover_on_errors',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Abgebrochener Download</div>
          <div class="settings-row-desc">Nachricht wenn ein laufender Download abgebrochen wurde.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_pushover_on_cancelled" onchange="saveUserPref('pushover_on_cancelled',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Neue Folgen</div>
          <div class="settings-row-desc">Nachricht wenn der Auto-Sync neue Episoden findet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_pushover_on_autosync" onchange="saveUserPref('pushover_on_autosync',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>

      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Fehler</div>
          <div class="settings-row-desc">Wenn ein Auto-Sync Job abstürzt oder fehlschlägt.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_pushover_on_sync_error" onchange="saveUserPref('pushover_on_sync_error',this.checked?'1':'0'); updateSyncErrorSubtogglesState();"><span class="toggle-slider"></span></label>
        </div>
      </div>
      {% if is_admin %}
      <div class="settings-row" id="admin_sync_error_only_failed_all_container_pushover" style="padding-left: 44px;">
        <div class="settings-row-left">
          <div class="settings-row-label" style="font-size: 0.9rem;">↳ Nur Fehler-Benachrichtigungen wenn alle Wiederholungen gescheitert sind</div>
          <div class="settings-row-desc">Wenn aktiviert, wird bei fehlgeschlagenen Auto-Syncs erst nach dem Ausschöpfen aller Wiederholungen eine Benachrichtigung gesendet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="admin_sync_error_only_failed_all_pushover" onchange="saveAdminToggle('notif_sync_error_only_failed_all',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
      {% endif %}
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Hold &amp; Wiederaufnahme</div>
          <div class="settings-row-desc">Wenn ein Sync wegen unerreichbarem Custom Path pausiert wird — oder wieder startet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_pushover_on_sync_hold" onchange="saveUserPref('pushover_on_sync_hold',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Speicherplatz niedrig</div>
          <div class="settings-row-desc">Wenn der freie Speicherplatz unter den konfigurierten Schwellenwert fällt.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_pushover_on_disk_space_low" onchange="saveUserPref('pushover_on_disk_space_low',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row" style="border-top:1px solid var(--border);padding-top:4px;">
        <div class="settings-row-left"></div>
        <div class="settings-row-right">
          <button class="btn btn-secondary btn-sm" onclick="testNotif('pushover')">Test senden</button>
        </div>
      </div>
    </div>
  </div>

  <!-- ═══ NTFY ═══ -->
  <div class="service-panel" id="panel-ntfy">

    {% if is_admin %}
    <div class="settings-section">
      <div class="settings-section-header">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;margin-right:6px;vertical-align:-2px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        Admin — NTFY-Konfiguration
      </div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        NTFY sendet Nachrichten an ein Topic. Trage hier die Server-URL und das Topic ein.
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">NTFY-Server</div>
          <div class="settings-row-desc">Basis-URL des ntfy-Servers. Pflichtfeld.</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="text" id="admin_ntfy_server" class="notif-input" placeholder="Server-URL eingeben">
          <button class="btn btn-primary btn-sm" onclick="saveAdminField('notif_ntfy_server','admin_ntfy_server')">Speichern</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">NTFY-Topic</div>
          <div class="settings-row-desc">Name des Topics. Pflichtfeld. Nachrichten werden an &lt;server&gt;/&lt;topic&gt; gesendet.</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="text" id="admin_ntfy_topic" class="notif-input" placeholder="Topic eingeben">
          <button class="btn btn-primary btn-sm" onclick="saveAdminField('notif_ntfy_topic','admin_ntfy_topic')">Speichern</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auth Token (Bearer)</div>
          <div class="settings-row-desc">Optional: Trage hier ein Bearer-Token ein, falls dein ntfy-Server Auth verlangt.</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="password" id="admin_ntfy_auth_token" class="notif-input" placeholder="••••••••">
          <button class="btn btn-icon" onclick="toggleVisibility('admin_ntfy_auth_token',this)" title="Anzeigen/Verbergen">👁</button>
          <button class="btn btn-primary btn-sm" onclick="saveAdminField('notif_ntfy_auth_token','admin_ntfy_auth_token')">Speichern</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Basic Auth (optional)</div>
          <div class="settings-row-desc">Alternativ kannst du Nutzername/Passwort für Basic-Auth angeben.</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="text" id="admin_ntfy_user" class="notif-input" placeholder="user">
          <input type="password" id="admin_ntfy_password" class="notif-input" placeholder="••••••••">
          <button class="btn btn-primary btn-sm" onclick="saveAdminField('notif_ntfy_user','admin_ntfy_user'); saveAdminField('notif_ntfy_password','admin_ntfy_password')">Speichern</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">NTFY global aktivieren</div>
          <div class="settings-row-desc">Deaktiviere um NTFY-Nachrichten für alle Nutzer zu sperren.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="admin_ntfy_enabled" checked onchange="saveAdminToggle('notif_ntfy_enabled',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
    </div>
    {% endif %}

    <div class="settings-section">
      <div class="settings-section-header">Meine Einstellungen</div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        Aktiviere NTFY für dein Konto und erhalte Meldungen an das konfigurierte Topic.
      </div>
      <div class="settings-row" id="ntfy-status-row" style="display:none;">
        <div class="settings-row-left"><div class="settings-row-label">Dienst-Status</div></div>
        <div class="settings-row-right"><span id="ntfy-status-badge" class="notif-badge notif-badge-warn">NTFY nicht konfiguriert</span></div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">NTFY aktivieren</div>
          <div class="settings-row-desc">NTFY-Benachrichtigungen für dein Konto ein- oder ausschalten.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_ntfy_enabled" checked onchange="saveUserPref('ntfy_enabled',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
    </div>

    <div class="settings-section notif-prefs-section" id="ntfy-prefs-section">
      <div class="settings-section-header">Benachrichtigen bei</div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Erfolgreicher Download</div>
          <div class="settings-row-desc">Nachricht wenn alle Episoden eines Jobs ohne Fehler fertig sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_ntfy_on_completed" onchange="saveUserPref('ntfy_on_completed',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Teilweise erfolgreich</div>
          <div class="settings-row-desc">Nachricht wenn mindestens eine Episode erfolgreich war, aber auch Fehler aufgetreten sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_ntfy_on_partial" onchange="saveUserPref('ntfy_on_partial',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Download mit Fehlern</div>
          <div class="settings-row-desc">Nachricht wenn einzelne Episoden fehlgeschlagen sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_ntfy_on_errors" onchange="saveUserPref('ntfy_on_errors',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Abgebrochener Download</div>
          <div class="settings-row-desc">Nachricht wenn ein laufender Download abgebrochen wurde.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_ntfy_on_cancelled" onchange="saveUserPref('ntfy_on_cancelled',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Neue Folgen</div>
          <div class="settings-row-desc">Nachricht wenn der Auto-Sync neue Episoden einer abonnierten Serie findet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_ntfy_on_autosync" onchange="saveUserPref('ntfy_on_autosync',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Fehler</div>
          <div class="settings-row-desc">Nachricht wenn ein Auto-Sync Job abstürzt oder fehlschlägt.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_ntfy_on_sync_error" onchange="saveUserPref('ntfy_on_sync_error',this.checked?'1':'0'); updateSyncErrorSubtogglesState();"><span class="toggle-slider"></span></label>
        </div>
      </div>
      {% if is_admin %}
      <div class="settings-row" id="admin_sync_error_only_failed_all_container_ntfy" style="padding-left: 44px;">
        <div class="settings-row-left">
          <div class="settings-row-label" style="font-size: 0.9rem;">↳ Nur Fehler-Benachrichtigungen wenn alle Wiederholungen gescheitert sind</div>
          <div class="settings-row-desc">Wenn aktiviert, wird bei fehlgeschlagenen Auto-Syncs erst nach dem Ausschöpfen aller Wiederholungen eine Benachrichtigung gesendet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="admin_sync_error_only_failed_all_ntfy" onchange="saveAdminToggle('notif_sync_error_only_failed_all',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
      {% endif %}
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Hold &amp; Wiederaufnahme</div>
          <div class="settings-row-desc">Wenn ein Sync wegen unerreichbarem Custom Path pausiert wird — oder wieder startet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_ntfy_on_sync_hold" onchange="saveUserPref('ntfy_on_sync_hold',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Speicherplatz niedrig</div>
          <div class="settings-row-desc">Wenn der freie Speicherplatz unter den konfigurierten Schwellenwert fällt.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_ntfy_on_disk_space_low" onchange="saveUserPref('ntfy_on_disk_space_low',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row" style="border-top:1px solid var(--border);padding-top:4px;">
        <div class="settings-row-left"></div>
        <div class="settings-row-right">
          <button class="btn btn-secondary btn-sm" onclick="testNotif('ntfy')">Test senden</button>
        </div>
      </div>
    </div>
  </div>

  <!-- ═══ DISCORD ═══ -->
  <div class="service-panel" id="panel-discord">

    {% if is_admin %}
    <div class="settings-section">
      <div class="settings-section-header">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;margin-right:6px;vertical-align:-2px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        Admin — Webhook-Konfiguration
      </div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        Discord sendet an einen gemeinsamen Kanal. Kanal → Einstellungen → Integrationen → Webhooks → Neuen Webhook erstellen → URL kopieren.
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Webhook-URL</div>
          <div class="settings-row-desc">Muss mit <code>https://discord.com/api/webhooks/</code> beginnen.</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="password" id="admin_discord_webhook" class="notif-input" placeholder="https://discord.com/api/webhooks/…">
          <button class="btn btn-icon" onclick="toggleVisibility('admin_discord_webhook',this)" title="Anzeigen/Verbergen">
            <svg viewBox="0 0 24 24" width="15" height="15" style="width:15px;height:15px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
          </button>
          <button class="btn btn-primary btn-sm" onclick="saveAdminField('notif_discord_webhook_url','admin_discord_webhook')">Speichern</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Discord global aktivieren</div>
          <div class="settings-row-desc">Deaktivieren um Discord-Nachrichten komplett zu sperren.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="admin_discord_enabled" checked onchange="saveAdminToggle('notif_discord_enabled',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
    </div>

    <div class="settings-section" id="discord-prefs-section">
      <div class="settings-section-header">Benachrichtigen bei (global — gilt für alle)</div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Erfolgreicher Download</div>
          <div class="settings-row-desc">Grüne Embed-Nachricht wenn alle Episoden ohne Fehler fertig sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_discord_on_completed" onchange="saveAdminToggle('notif_discord_on_completed',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Teilweise erfolgreich</div>
          <div class="settings-row-desc">Orange Embed-Nachricht wenn mindestens eine Episode erfolgreich war, aber auch Fehler aufgetreten sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_discord_on_partial" onchange="saveAdminToggle('notif_discord_on_partial',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Download mit Fehlern</div>
          <div class="settings-row-desc">Gelbe Embed-Nachricht wenn einzelne Episoden fehlgeschlagen sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_discord_on_errors" onchange="saveAdminToggle('notif_discord_on_errors',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Abgebrochener Download</div>
          <div class="settings-row-desc">Graue Embed-Nachricht wenn ein Download abgebrochen wurde.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_discord_on_cancelled" onchange="saveAdminToggle('notif_discord_on_cancelled',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Neue Folgen</div>
          <div class="settings-row-desc">Blaue Embed-Nachricht wenn der Auto-Sync neue Episoden findet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_discord_on_autosync" onchange="saveAdminToggle('notif_discord_on_autosync',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Fehler</div>
          <div class="settings-row-desc">Rote Embed-Nachricht wenn ein Auto-Sync Job abstürzt.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_discord_on_sync_error" onchange="saveAdminToggle('notif_discord_on_sync_error',this.checked); updateSyncErrorSubtogglesState();"><span class="toggle-slider"></span></label>
        </div>
      </div>
      {% if is_admin %}
      <div class="settings-row" id="admin_sync_error_only_failed_all_container_discord" style="padding-left: 44px;">
        <div class="settings-row-left">
          <div class="settings-row-label" style="font-size: 0.9rem;">↳ Nur Fehler-Benachrichtigungen wenn alle Wiederholungen gescheitert sind</div>
          <div class="settings-row-desc">Wenn aktiviert, wird bei fehlgeschlagenen Auto-Syncs erst nach dem Ausschöpfen aller Wiederholungen eine Benachrichtigung gesendet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="admin_sync_error_only_failed_all_discord" onchange="saveAdminToggle('notif_sync_error_only_failed_all',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
      {% endif %}
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Hold &amp; Wiederaufnahme</div>
          <div class="settings-row-desc">Embed-Nachricht wenn ein Sync pausiert oder wieder fortgesetzt wird.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_discord_on_sync_hold" onchange="saveAdminToggle('notif_discord_on_sync_hold',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Speicherplatz niedrig</div>
          <div class="settings-row-desc">Gelbe Embed-Nachricht wenn der freie Speicher unter den Schwellenwert fällt.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_discord_on_disk_space_low" onchange="saveAdminToggle('notif_discord_on_disk_space_low',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row" style="border-top:1px solid var(--border);padding-top:4px;">
        <div class="settings-row-left"></div>
        <div class="settings-row-right">
          <button class="btn btn-secondary btn-sm" onclick="testNotif('discord')">Test senden</button>
        </div>
      </div>
    </div>

    {% else %}
    <div class="settings-section">
      <div class="service-wip">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="width:36px;height:36px;stroke:var(--text-muted);opacity:.5;"><circle cx="9" cy="12" r="1"/><circle cx="15" cy="12" r="1"/><path d="M7.5 7.5c1-.5 2.5-.5 4.5-.5s3.5 0 4.5.5M7.5 16.5c1 .5 2.5.5 4.5.5s3.5 0 4.5-.5"/><path d="M5 5.5S3 6 2 9c0 4 1 8 4 9.5 1 .5 2.5.5 3 0l1-2M19 5.5s2 .5 3 3c0 4-1 8-4 9.5-1 .5-2.5.5-3 0l-1-2"/></svg>
        <p><strong>Discord Webhook</strong></p>
        <p style="font-size:0.82rem;">Wird von einem Administrator konfiguriert. Sobald ein Admin den Webhook eingerichtet hat, sendet AniWorld Nachrichten an den konfigurierten Kanal.</p>
        <span id="discord-user-status" class="notif-badge notif-badge-warn" style="margin-top:4px;">Nicht konfiguriert</span>
      </div>
    </div>
    {% endif %}
  </div>

  <!-- ═══ WHATSAPP ═══ -->
  <div class="service-panel" id="panel-whatsapp">

    {% if is_admin %}
    <div class="settings-section">
      <div class="settings-section-header">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;margin-right:6px;vertical-align:-2px;"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
        Admin — Twilio-Konfiguration
      </div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        WhatsApp-Versand läuft über <a href="https://www.twilio.com/en-us/whatsapp" target="_blank" style="color:var(--accent)">Twilio</a>. Du benötigst ein Twilio-Konto mit aktivierter WhatsApp Sandbox. Nutzer müssen die Sandbox einmalig mit <code>join &lt;code&gt;</code> freischalten.
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Account SID</div>
          <div class="settings-row-desc">Auf der Twilio Console-Startseite unter <em>Account Info</em>.</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="password" id="admin_whatsapp_sid" class="notif-input" placeholder="AC••••••••">
          <button class="btn btn-icon" onclick="toggleVisibility('admin_whatsapp_sid',this)" title="Anzeigen/Verbergen">
            <svg viewBox="0 0 24 24" width="15" height="15" style="width:15px;height:15px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
          </button>
          <button class="btn btn-primary btn-sm" onclick="saveAdminField('notif_whatsapp_sid','admin_whatsapp_sid')">Speichern</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auth Token</div>
          <div class="settings-row-desc">Neben dem Account SID in der Twilio Console.</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="password" id="admin_whatsapp_auth" class="notif-input" placeholder="••••••••">
          <button class="btn btn-icon" onclick="toggleVisibility('admin_whatsapp_auth',this)" title="Anzeigen/Verbergen">
            <svg viewBox="0 0 24 24" width="15" height="15" style="width:15px;height:15px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
          </button>
          <button class="btn btn-primary btn-sm" onclick="saveAdminField('notif_whatsapp_auth_token','admin_whatsapp_auth')">Speichern</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Absendernummer</div>
          <div class="settings-row-desc">Die Twilio WhatsApp-Sandbox-Nummer, z.B. <code>+14155238886</code>.</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="text" id="admin_whatsapp_from" class="notif-input" placeholder="+14155238886">
          <button class="btn btn-primary btn-sm" onclick="saveAdminField('notif_whatsapp_from','admin_whatsapp_from')">Speichern</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">WhatsApp global aktivieren</div>
          <div class="settings-row-desc">Deaktivieren um WhatsApp-Nachrichten für alle Nutzer zu sperren.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="admin_whatsapp_enabled" checked onchange="saveAdminToggle('notif_whatsapp_enabled',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
    </div>
    {% endif %}

    <div class="settings-section">
      <div class="settings-section-header">Meine Einstellungen</div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        Gib deine Handynummer im internationalen Format ein (z.B. <code>+4917612345678</code>). Du musst die Sandbox zuvor einmalig mit <code>join &lt;code&gt;</code> an die Twilio-Nummer schreiben.
      </div>
      <div class="settings-row" id="whatsapp-status-row" style="display:none;">
        <div class="settings-row-left"><div class="settings-row-label">Dienst-Status</div></div>
        <div class="settings-row-right"><span id="whatsapp-status-badge" class="notif-badge notif-badge-warn">Twilio nicht konfiguriert</span></div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">WhatsApp aktivieren</div>
          <div class="settings-row-desc">WhatsApp-Benachrichtigungen für dein Konto ein- oder ausschalten.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_whatsapp_enabled" checked onchange="saveUserPref('whatsapp_enabled',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Meine Nummer</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="text" id="user_whatsapp_phone" class="notif-input" placeholder="+49…">
          <button class="btn btn-primary btn-sm" onclick="saveUserField('whatsapp_phone','user_whatsapp_phone')">Speichern</button>
        </div>
      </div>
    </div>

    <div class="settings-section notif-prefs-section" id="whatsapp-prefs-section">
      <div class="settings-section-header">Benachrichtigen bei</div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Erfolgreicher Download</div>
          <div class="settings-row-desc">Nachricht wenn alle Episoden ohne Fehler fertig sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_whatsapp_on_completed" onchange="saveUserPref('whatsapp_on_completed',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Teilweise erfolgreich</div>
          <div class="settings-row-desc">Nachricht wenn mindestens eine Episode erfolgreich war, aber auch Fehler aufgetreten sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_whatsapp_on_partial" onchange="saveUserPref('whatsapp_on_partial',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Download mit Fehlern</div>
          <div class="settings-row-desc">Nachricht wenn einzelne Episoden fehlgeschlagen sind.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_whatsapp_on_errors" onchange="saveUserPref('whatsapp_on_errors',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Abgebrochener Download</div>
          <div class="settings-row-desc">Nachricht wenn ein laufender Download abgebrochen wurde.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_whatsapp_on_cancelled" onchange="saveUserPref('whatsapp_on_cancelled',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Neue Folgen</div>
          <div class="settings-row-desc">Nachricht wenn der Auto-Sync neue Episoden findet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_whatsapp_on_autosync" onchange="saveUserPref('whatsapp_on_autosync',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>

      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Fehler</div>
          <div class="settings-row-desc">Wenn ein Auto-Sync Job abstürzt oder fehlschlägt.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_whatsapp_on_sync_error" onchange="saveUserPref('whatsapp_on_sync_error',this.checked?'1':'0'); updateSyncErrorSubtogglesState();"><span class="toggle-slider"></span></label>
        </div>
      </div>
      {% if is_admin %}
      <div class="settings-row" id="admin_sync_error_only_failed_all_container_whatsapp" style="padding-left: 44px;">
        <div class="settings-row-left">
          <div class="settings-row-label" style="font-size: 0.9rem;">↳ Nur Fehler-Benachrichtigungen wenn alle Wiederholungen gescheitert sind</div>
          <div class="settings-row-desc">Wenn aktiviert, wird bei fehlgeschlagenen Auto-Syncs erst nach dem Ausschöpfen aller Wiederholungen eine Benachrichtigung gesendet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="admin_sync_error_only_failed_all_whatsapp" onchange="saveAdminToggle('notif_sync_error_only_failed_all',this.checked)"><span class="toggle-slider"></span></label>
        </div>
      </div>
      {% endif %}
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Auto-Sync: Hold &amp; Wiederaufnahme</div>
          <div class="settings-row-desc">Wenn ein Sync wegen unerreichbarem Custom Path pausiert wird — oder wieder startet.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_whatsapp_on_sync_hold" onchange="saveUserPref('whatsapp_on_sync_hold',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Speicherplatz niedrig</div>
          <div class="settings-row-desc">Wenn der freie Speicherplatz unter den konfigurierten Schwellenwert fällt.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle"><input type="checkbox" id="pref_whatsapp_on_disk_space_low" onchange="saveUserPref('whatsapp_on_disk_space_low',this.checked?'1':'0')"><span class="toggle-slider"></span></label>
        </div>
      </div>
      <div class="settings-row" style="border-top:1px solid var(--border);padding-top:4px;">
        <div class="settings-row-left"></div>
        <div class="settings-row-right">
          <button class="btn btn-secondary btn-sm" onclick="testNotif('whatsapp')">Test senden</button>
        </div>
      </div>
    </div>
  </div>

  <!-- ═══ SPEICHER ═══ -->
  <div class="service-panel" id="panel-storage">
    <div class="settings-section">
      <div class="settings-section-header">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;margin-right:6px;vertical-align:-2px;"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
        Speicherplatz-Warnung
      </div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        AniWorld prüft vor jedem Download den freien Speicherplatz. Fällt er unter den Schwellenwert, wird eine Benachrichtigung gesendet (max. einmal pro Stunde). Der Download läuft trotzdem weiter.
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Mindest-Speicherplatz</div>
          <div class="settings-row-desc">Benachrichtigung wenn weniger als dieser Wert (in GB) frei ist. 0 = deaktiviert.</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="number" id="storage_min_gb" class="notif-input" placeholder="5" min="0" step="1" style="width:80px;">
          <span style="color:var(--text-muted);font-size:0.85rem;">GB</span>
          <button class="btn btn-primary btn-sm" onclick="saveAdminField('notif_disk_space_min_gb','storage_min_gb')">Speichern</button>
        </div>
      </div>

    </div>
  </div>

</div><!-- /.settings-container -->
{% endblock %}

{% block scripts %}
<style>
/* ── Notification page responsive & extras ─────────────────────────── */
.notif-input-group {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}
.notif-input-group .notif-input { min-width: 140px; }

/* .btn-icon is now in style.css */

/* Force the active-push danger color regardless of design-system overrides */
#pushBtn.push-active {
  background: rgba(239,68,68,0.18) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239,68,68,0.35) !important;
}
#pushBtn.push-active:hover {
  background: #ef4444 !important;
  color: #fff !important;
}

/* Mobile: stack rows vertically */
@media (max-width: 640px) {
  .settings-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
  }
  .settings-row-right {
    width: 100%;
  }
  .notif-input-group {
    width: 100%;
  }
  .notif-input-group .notif-input {
    flex: 1;
    min-width: 0;
  }
  .service-pills {
    gap: 6px;
  }
  .service-pill {
    padding: 7px 13px;
    font-size: 0.82rem;
  }
  .settings-section-header {
    padding: 14px 16px;
  }
  .settings-row {
    padding: 14px 16px;
  }
  .settings-hint {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .settings-section > h2 {
    padding-left: 16px !important;
  }
}
</style>

<script>
/* ── Toast (defined here because app.js is not loaded on this page) ── */
function showToast(msg) {
  const t = document.getElementById("toast");
  if (!t) return;
  t.textContent = msg;
  t.style.display = "";
  t.classList.remove("show");
  void t.offsetWidth;
  t.classList.add("show");
  clearTimeout(t._hideTimer);
  t._hideTimer = setTimeout(() => t.classList.remove("show"), 4000);
}

/* ── Service panel switcher ── */
function showService(id, pill) {
  document.querySelectorAll('.service-pill').forEach(p => p.classList.remove('active'));
  document.querySelectorAll('.service-panel').forEach(p => p.classList.remove('active'));
  pill.classList.add('active');
  document.getElementById('panel-' + id).classList.add('active');
}

/* ── API helpers ── */
async function _post(url, body) {
  const r = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body)
  });
  return r.json();
}

/* ── Show / hide password field ── */
function toggleVisibility(inputId, btn) {
  const el = document.getElementById(inputId);
  if (!el) return;
  const isHidden = el.type === 'password';
  el.type = isHidden ? 'text' : 'password';
  // swap eye icon
  btn.innerHTML = isHidden
    ? '<svg viewBox="0 0 24 24" width="15" height="15" style="width:15px;height:15px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>'
    : '<svg viewBox="0 0 24 24" width="15" height="15" style="width:15px;height:15px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>';
}

/* ── Admin: save a single sensitive field ── */
async function saveAdminField(key, inputId) {
  const val = document.getElementById(inputId)?.value?.trim();
  if (val === undefined) return;
  const res = await _post('/api/notif/admin-settings', { [key]: val });
  if (res.ok) {
    showToast('Gespeichert ✓');
    await loadSettings();
  } else {
    showToast('Fehler: ' + (res.error || '?'));
  }
}

/* ── Admin: save a boolean toggle ── */
async function saveAdminToggle(key, checked) {
  const res = await _post('/api/notif/admin-settings', { [key]: checked ? '1' : '0' });
  if (!res.ok) {
    showToast('Fehler: ' + (res.error || '?'));
  } else {
    if (key === 'notif_sync_error_only_failed_all') {
      const list = [
        'admin_sync_error_only_failed_all_webpush',
        'admin_sync_error_only_failed_all_telegram',
        'admin_sync_error_only_failed_all_pushover',
        'admin_sync_error_only_failed_all_ntfy',
        'admin_sync_error_only_failed_all_discord',
        'admin_sync_error_only_failed_all_whatsapp'
      ];
      for (const id of list) {
        const el = document.getElementById(id);
        if (el) el.checked = checked;
      }
    }
  }
}

/* ── User: save a single field ── */
async function saveUserField(key, inputId) {
  const val = document.getElementById(inputId)?.value?.trim();
  if (val === undefined) return;
  const res = await _post('/api/notif/user-settings', { [key]: val });
  if (res.ok) {
    showToast('Gespeichert ✓');
    await loadSettings();
  } else {
    showToast('Fehler: ' + (res.error || '?'));
  }
}

/* ── User: save a pref toggle (fire-and-forget, no toast needed) ── */
async function saveUserPref(key, val) {
  const res = await _post('/api/notif/user-settings', { [key]: val });
  if (!res.ok) showToast('Fehler: ' + (res.error || '?'));
}

/* ── Telegram Chat-ID auto-detect ── */
async function detectTelegramChatId() {
  showToast('Suche nach letzter Nachricht…');
  try {
    const r = await fetch('/api/notif/telegram/detect-chat-id');
    const data = await r.json();
    if (data.chat_id) {
      document.getElementById('user_telegram_chat_id').value = data.chat_id;
      showToast('Chat-ID erkannt: ' + data.chat_id + ' — bitte speichern!');
    } else {
      showToast(data.error || 'Keine Nachricht gefunden. Schreib dem Bot zuerst eine Nachricht.');
    }
  } catch(e) {
    showToast('Netzwerkfehler beim Erkennen.');
  }
}

/* ── Test notification ── */
async function testNotif(service) {
  showToast('Test wird gesendet…');
  let res;
  try {
    const r = await fetch('/api/notif/test', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ service })
    });
    res = await r.json();
    if (res.ok) {
      showToast('Test-Nachricht gesendet ✓');
    } else {
      showToast('Fehler: ' + (res.error || 'Unbekannter Fehler'));
    }
  } catch(e) {
    showToast('Netzwerkfehler: ' + e.message);
  }
}

/* ── Toggle helpers ── */
function _applyToggle(key, prefs, defaultOn) {
  const el = document.getElementById('pref_' + key);
  if (!el) return;
  const v = prefs[key];
  el.checked = (v === undefined || v === null) ? (defaultOn !== false) : (v !== '0' && v !== 'false' && v !== false);
}

function _applyAdminToggle(elId, admin, adminKey, defaultOn) {
  const el = document.getElementById(elId);
  if (!el) return;
  const v = admin[adminKey];
  el.checked = (v === undefined || v === '' || v === null) ? (defaultOn !== false) : (v !== '0' && v !== false);
}

function _maybeSetInput(id, value) {
  const el = document.getElementById(id);
  if (el && value !== undefined && value !== null && value !== '') el.value = value;
}

function _showStatusBadge(service, configured) {
  const row   = document.getElementById(service + '-status-row');
  const badge = document.getElementById(service + '-status-badge');
  if (!row || !badge) return;
  row.style.display = 'flex';
  badge.textContent = configured ? 'Konfiguriert ✓' : 'Nicht konfiguriert — bitte Admin kontaktieren';
  badge.className   = 'notif-badge ' + (configured ? 'notif-badge-ok' : 'notif-badge-warn');
}

function _setSectionEnabled(id, enabled) {
  const el = document.getElementById(id);
  if (!el) return;
  el.classList.toggle('push-prefs-disabled', !enabled);
}

function updateSyncErrorSubtogglesState() {
  const providers = ['webpush', 'telegram', 'pushover', 'ntfy', 'discord', 'whatsapp'];
  providers.forEach(prov => {
    const parentId = prov === 'discord' ? 'pref_discord_on_sync_error' : 'pref_' + prov + '_on_sync_error';
    const subContainerId = 'admin_sync_error_only_failed_all_container_' + prov;
    const parentEl = document.getElementById(parentId);
    const subContainerEl = document.getElementById(subContainerId);
    if (parentEl && subContainerEl) {
      const isChecked = parentEl.checked;
      subContainerEl.classList.toggle('push-prefs-disabled', !isChecked);
    }
  });
}

/* ── Load all settings ── */
async function loadSettings() {
  let data;
  try {
    data = await fetch('/api/notif/settings').then(r => r.json());
  } catch(e) {
    console.warn('[Notif] loadSettings error:', e);
    return;
  }
  const prefs   = data.user_prefs || {};
  const admin   = data.admin      || {};
  const isAdmin = data.is_admin;

  /* Web Push */
  _applyToggle('webpush_on_completed', prefs);
  _applyToggle('webpush_on_partial',   prefs);
  _applyToggle('webpush_on_errors',    prefs);
  _applyToggle('webpush_on_cancelled', prefs);
  _applyToggle('webpush_on_autosync',       prefs);
  _applyToggle('webpush_on_sync_error',     prefs);
  _applyToggle('webpush_on_sync_hold',      prefs);
  _applyToggle('webpush_on_disk_space_low', prefs);
  if (isAdmin) {
    _applyAdminToggle('admin_webpush_enabled', admin, 'notif_webpush_enabled');
  }

  /* Telegram */
  const tgConfigured = isAdmin
    ? !!(admin.notif_telegram_bot_token && String(admin.notif_telegram_bot_token).length > 4)
    : admin.notif_telegram_bot_token === true;
  _showStatusBadge('telegram', tgConfigured);
  if (isAdmin) {
    _maybeSetInput('admin_telegram_token', admin.notif_telegram_bot_token);
    _applyAdminToggle('admin_telegram_enabled', admin, 'notif_telegram_enabled');
  }
  _applyToggle('telegram_enabled',      prefs);
  _maybeSetInput('user_telegram_chat_id', prefs.telegram_chat_id);
  _applyToggle('telegram_on_completed', prefs);
  _applyToggle('telegram_on_partial',   prefs);
  _applyToggle('telegram_on_errors',    prefs);
  _applyToggle('telegram_on_cancelled', prefs);
  _applyToggle('telegram_on_autosync',       prefs);
  _applyToggle('telegram_on_sync_error',     prefs);
  _applyToggle('telegram_on_sync_hold',      prefs);
  _applyToggle('telegram_on_disk_space_low', prefs);
  _setSectionEnabled('telegram-prefs-section',
    tgConfigured && !!prefs.telegram_chat_id && prefs.telegram_enabled !== '0');

  /* Pushover */
  const poConfigured = isAdmin
    ? !!(admin.notif_pushover_app_token && String(admin.notif_pushover_app_token).length > 4)
    : admin.notif_pushover_app_token === true;
  _showStatusBadge('pushover', poConfigured);
  if (isAdmin) {
    _maybeSetInput('admin_pushover_token', admin.notif_pushover_app_token);
    _applyAdminToggle('admin_pushover_enabled', admin, 'notif_pushover_enabled');
  }
  _applyToggle('pushover_enabled',      prefs);
  _maybeSetInput('user_pushover_key', prefs.pushover_user_key);
  _applyToggle('pushover_on_completed', prefs);
  _applyToggle('pushover_on_partial',   prefs);
  _applyToggle('pushover_on_errors',    prefs);
  _applyToggle('pushover_on_cancelled', prefs);
  _applyToggle('pushover_on_autosync',       prefs);
  _applyToggle('pushover_on_sync_error',     prefs);
  _applyToggle('pushover_on_sync_hold',      prefs);
  _applyToggle('pushover_on_disk_space_low', prefs);
  _setSectionEnabled('pushover-prefs-section',
    poConfigured && !!prefs.pushover_user_key && prefs.pushover_enabled !== '0');

  /* NTFY */
  const ntfyConfigured = isAdmin
    ? !!(admin.notif_ntfy_server && String(admin.notif_ntfy_server).length > 0
      && admin.notif_ntfy_topic && String(admin.notif_ntfy_topic).length > 0)
    : (admin.notif_ntfy_server === true && admin.notif_ntfy_topic === true);
  _showStatusBadge('ntfy', ntfyConfigured);
  if (isAdmin) {
    _maybeSetInput('admin_ntfy_server', admin.notif_ntfy_server);
    _maybeSetInput('admin_ntfy_topic', admin.notif_ntfy_topic);
    _maybeSetInput('admin_ntfy_auth_token', admin.notif_ntfy_auth_token);
    _maybeSetInput('admin_ntfy_user', admin.notif_ntfy_user);
    _maybeSetInput('admin_ntfy_password', admin.notif_ntfy_password);
    _applyAdminToggle('admin_ntfy_enabled', admin, 'notif_ntfy_enabled');
  }
  _applyToggle('ntfy_enabled',      prefs);
  _applyToggle('ntfy_on_completed', prefs);
  _applyToggle('ntfy_on_partial',   prefs);
  _applyToggle('ntfy_on_errors',    prefs);
  _applyToggle('ntfy_on_cancelled', prefs);
  _applyToggle('ntfy_on_autosync',       prefs);
  _applyToggle('ntfy_on_sync_error',     prefs);
  _applyToggle('ntfy_on_sync_hold',      prefs);
  _applyToggle('ntfy_on_disk_space_low', prefs);
  _setSectionEnabled('ntfy-prefs-section',
    ntfyConfigured && prefs.ntfy_enabled !== '0');

  /* Discord */
  if (isAdmin) {
    const dcConfigured = !!(admin.notif_discord_webhook_url &&
      String(admin.notif_discord_webhook_url).length > 10);
    _maybeSetInput('admin_discord_webhook', admin.notif_discord_webhook_url);
    _applyAdminToggle('admin_discord_enabled', admin, 'notif_discord_enabled');
    _applyAdminToggle('pref_discord_on_completed', admin, 'notif_discord_on_completed');
    _applyAdminToggle('pref_discord_on_partial',   admin, 'notif_discord_on_partial');
    _applyAdminToggle('pref_discord_on_errors',    admin, 'notif_discord_on_errors');
    _applyAdminToggle('pref_discord_on_cancelled', admin, 'notif_discord_on_cancelled');
    _applyAdminToggle('pref_discord_on_autosync',        admin, 'notif_discord_on_autosync');
    _applyAdminToggle('pref_discord_on_sync_error',      admin, 'notif_discord_on_sync_error');
    _applyAdminToggle('pref_discord_on_sync_hold',       admin, 'notif_discord_on_sync_hold');
    _applyAdminToggle('pref_discord_on_disk_space_low',  admin, 'notif_discord_on_disk_space_low');
    _setSectionEnabled('discord-prefs-section', dcConfigured);
  } else {
    const badge = document.getElementById('discord-user-status');
    const configured = admin.notif_discord_webhook_url === true;
    if (badge) {
      badge.textContent = configured ? 'Konfiguriert ✓' : 'Nicht konfiguriert';
      badge.className   = 'notif-badge ' + (configured ? 'notif-badge-ok' : 'notif-badge-warn');
    }
  }

  /* WhatsApp */
  const waConfigured = isAdmin
    ? !!(admin.notif_whatsapp_sid && String(admin.notif_whatsapp_sid).length > 4)
    : admin.notif_whatsapp_sid === true;
  _showStatusBadge('whatsapp', waConfigured);
  if (isAdmin) {
    _maybeSetInput('admin_whatsapp_sid',  admin.notif_whatsapp_sid);
    _maybeSetInput('admin_whatsapp_auth', admin.notif_whatsapp_auth_token);
    _maybeSetInput('admin_whatsapp_from', admin.notif_whatsapp_from);
    _applyAdminToggle('admin_whatsapp_enabled', admin, 'notif_whatsapp_enabled');
  }
  _applyToggle('whatsapp_enabled',      prefs);
  _maybeSetInput('user_whatsapp_phone', prefs.whatsapp_phone);
  _applyToggle('whatsapp_on_completed', prefs);
  _applyToggle('whatsapp_on_partial',   prefs);
  _applyToggle('whatsapp_on_errors',    prefs);
  _applyToggle('whatsapp_on_cancelled', prefs);
  _applyToggle('whatsapp_on_autosync',       prefs);
  _applyToggle('whatsapp_on_sync_error',     prefs);
  _applyToggle('whatsapp_on_sync_hold',      prefs);
  _applyToggle('whatsapp_on_disk_space_low', prefs);
  _setSectionEnabled('whatsapp-prefs-section',
    waConfigured && !!prefs.whatsapp_phone && prefs.whatsapp_enabled !== '0');
  /* Storage panel */
  const rawGb = admin['notif_disk_space_min_gb'];
  const gbEl  = document.getElementById('storage_min_gb');
  if (gbEl && rawGb !== undefined && rawGb !== null && rawGb !== '') {
    gbEl.value = rawGb;
  } else if (gbEl && !gbEl.value) {
    gbEl.value = '5';
  }
  if (isAdmin) {
    const list = [
      'admin_sync_error_only_failed_all_webpush',
      'admin_sync_error_only_failed_all_telegram',
      'admin_sync_error_only_failed_all_pushover',
      'admin_sync_error_only_failed_all_ntfy',
      'admin_sync_error_only_failed_all_discord',
      'admin_sync_error_only_failed_all_whatsapp'
    ];
    for (const id of list) {
      _applyAdminToggle(id, admin, 'notif_sync_error_only_failed_all', false);
    }
  }
  updateSyncErrorSubtogglesState();
}

document.addEventListener('DOMContentLoaded', loadSettings);

/* ── Keep pwa.js in sync: update push button state ── */
window._updatePushButtonState = async function() {
  const btn  = document.getElementById('pushBtn');
  const sect = document.getElementById('pushPrefsSection');
  if (!btn || !('serviceWorker' in navigator)) return;
  let sw = null;
  try { sw = await navigator.serviceWorker.ready; } catch(_) {}
  const sub = sw ? await sw.pushManager.getSubscription().catch(()=>null) : null;
  if (sub) {
    btn.textContent = 'Web Push deaktivieren';
    btn.classList.add('push-active');
    if (sect) sect.classList.remove('push-prefs-disabled');
  } else {
    btn.textContent = 'Web Push aktivieren';
    btn.classList.remove('push-active');
    if (sect) sect.classList.add('push-prefs-disabled');
  }
};
</script>
{% endblock %}