{% extends "base.html" %} {% block title %}{{ _('Notifications') }} — MediaForge{% endblock %}
{% import "_settings_card_macro.html" as ext %}
{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='settings_rows.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='notifications.css') }}">
<!-- _settings_card_macro.html's card markup (.integ-card/.integ-collapsible-*/
     .integ-subsection-*) is defined in integrations.css -- needed here too
     since this page renders the exact same macro for any thirdparty
     registered with settings_host="notifications". -->
<link rel="stylesheet" href="{{ url_for('static', filename='integrations.css') }}">
{% endblock %}
{% block content %}
{# Notifications — built exactly like the Settings / Integrations / Monitoring
   pages: one page, a floating side menu switching client-side between panels
   (no reload). See _notifications_menu.html for the menu markup and
   switchNotifTab() below for the switching logic (menu rework, July 2026). #}
<div class="settings-container has-floating-menu">
  <div class="page-header" style="margin-bottom:28px;">
    <h1 class="page-title">{{ _('Notifications') }}</h1>
    <p class="page-subtitle">{{ _('Configure services') }}</p>
  </div>

  {% include "_notifications_menu.html" %}

  <!-- ═══ WEB PUSH ═══ -->
  <div class="settings-tab-panel active" id="panel-webpush">
    <div class="page-header" style="margin-bottom:20px;">
      <h1 class="page-title">Web Push</h1>
      <p class="page-subtitle">{{ _('Push notifications straight to your browser, even with the tab closed.') }}</p>
    </div>

    {% 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 — Service') }}
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Enable Web Push globally') }}</div>
          <div class="settings-row-desc">{{ _('Disable to block browser push notifications for all users.') }}</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;">
        {{ _('Receive browser notifications directly in the browser — even when MediaForge is running in a background tab. The browser must be open. Works on desktop and mobile devices supporting Chrome/Firefox.') }}
      </div>
      <div class="settings-hint" style="color:var(--text-muted);font-size:0.8rem;padding:4px 24px 0;">
        ⚠️ {{ _('Web Push only works via HTTPS or localhost.') }}
      </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;">{{ _('Enable Web Push') }}</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">{{ _('Notify on') }}</div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Successful download') }}</div>
          <div class="settings-row-desc">{{ _('When all episodes of a queue entry completed without errors.') }}</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">{{ _('Partially successful') }}</div>
          <div class="settings-row-desc">{{ _('When at least one episode succeeded but errors also occurred.') }}</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 with errors') }}</div>
          <div class="settings-row-desc">{{ _('When individual episodes of a queue entry failed.') }}</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">{{ _('Cancelled download') }}</div>
          <div class="settings-row-desc">{{ _('When a running download is manually cancelled.') }}</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: new episodes') }}</div>
          <div class="settings-row-desc">{{ _('When auto-sync has found new episodes of a subscribed series.') }}</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: errors') }}</div>
          <div class="settings-row-desc">{{ _('When an auto-sync job crashes or fails.') }}</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;">{{ _('↳ Only error notifications when all retries have failed') }}</div>
          <div class="settings-row-desc">{{ _('When enabled, a notification is sent for failed auto-syncs only after all retries are exhausted.') }}</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; resume') }}</div>
          <div class="settings-row-desc">{{ _('When a sync is paused due to an unreachable custom path — or resumes.') }}</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">{{ _('Low disk space') }}</div>
          <div class="settings-row-desc">{{ _('When free disk space drops below the configured threshold.') }}</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>
    {# Extensions attaching to this existing pill (settings_host="notifications",
       settings_tab="webpush") — see register_thirdparty() in registry.py. #}
    {% for card in get_settings_cards('notifications', 'webpush') %}
    {{ ext.render_settings_card(card) }}
    {% endfor %}
  </div>

  <!-- ═══ TELEGRAM ═══ -->
  <div class="settings-tab-panel" id="panel-telegram">
    <div class="page-header" style="margin-bottom:20px;">
      <h1 class="page-title">Telegram</h1>
      <p class="page-subtitle">{{ _('Get notified via a Telegram bot.') }}</p>
    </div>

    {% 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 configuration') }}
      </div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        {{ _('Create a bot via') }} <a href="https://t.me/BotFather" target="_blank" style="color:var(--accent)">@BotFather</a>. {{ _('The bot then sends messages to users who have saved their chat ID.') }}
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Bot token') }}</div>
          <div class="settings-row-desc">{{ _('Obtained from @BotFather after') }} <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="{{ _('Show/hide') }}">
            <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')">{{ _('Save') }}</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Enable Telegram globally') }}</div>
          <div class="settings-row-desc">{{ _('Disable to block Telegram messages for all users.') }}</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">{{ _('My settings') }}</div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        {{ _('Send the bot a message first (e.g.') }} <code>/start</code>{{ _('), then click Detect. Or enter your chat ID manually — find it via') }} <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">{{ _('Service status') }}</div></div>
        <div class="settings-row-right"><span id="telegram-status-badge" class="notif-badge notif-badge-warn">{{ _('Bot not configured') }}</span></div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Enable Telegram') }}</div>
          <div class="settings-row-desc">{{ _('Turn Telegram notifications for your account on or off.') }}</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="{{ _('e.g. 123456789') }}">
          <button class="btn btn-secondary btn-sm" onclick="detectTelegramChatId()" title="{{ _('Auto-detect chat ID') }}">
            <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>
            {{ _('Detect') }}
          </button>
          <button class="btn btn-primary btn-sm" onclick="saveUserField('telegram_chat_id','user_telegram_chat_id')">{{ _('Save') }}</button>
        </div>
      </div>
    </div>

    <div class="settings-section notif-prefs-section" id="telegram-prefs-section">
      <div class="settings-section-header">{{ _('Notify on') }}</div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Successful download') }}</div>
          <div class="settings-row-desc">{{ _('Message when all episodes of a job completed without errors.') }}</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">{{ _('Partially successful') }}</div>
          <div class="settings-row-desc">{{ _('Message when at least one episode succeeded but errors also occurred.') }}</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 with errors') }}</div>
          <div class="settings-row-desc">{{ _('Message when individual episodes failed.') }}</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">{{ _('Cancelled download') }}</div>
          <div class="settings-row-desc">{{ _('Message when a running download was manually cancelled.') }}</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: new episodes') }}</div>
          <div class="settings-row-desc">{{ _('Message when auto-sync finds new episodes of a subscribed series.') }}</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: errors') }}</div>
          <div class="settings-row-desc">{{ _('When an auto-sync job crashes or fails.') }}</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;">{{ _('↳ Only error notifications when all retries have failed') }}</div>
          <div class="settings-row-desc">{{ _('When enabled, a notification is sent for failed auto-syncs only after all retries are exhausted.') }}</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; resume') }}</div>
          <div class="settings-row-desc">{{ _('When a sync is paused due to an unreachable custom path — or resumes.') }}</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">{{ _('Low disk space') }}</div>
          <div class="settings-row-desc">{{ _('When free disk space drops below the configured threshold.') }}</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')">{{ _('Send test') }}</button>
        </div>
      </div>
    </div>
    {% for card in get_settings_cards('notifications', 'telegram') %}
    {{ ext.render_settings_card(card) }}
    {% endfor %}
  </div>

  <!-- ═══ PUSHOVER ═══ -->
  <div class="settings-tab-panel" id="panel-pushover">
    <div class="page-header" style="margin-bottom:20px;">
      <h1 class="page-title">Pushover</h1>
      <p class="page-subtitle">{{ _('Push notifications to your phone via the Pushover app.') }}</p>
    </div>

    {% 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 configuration') }}
      </div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        {{ _('Create an app at') }} <a href="https://pushover.net/apps/build" target="_blank" style="color:var(--accent)">pushover.net/apps/build</a>. {{ _('Each user then enters their own user key.') }}
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('App token') }}</div>
          <div class="settings-row-desc">{{ _('Found on the app page after creation under') }} <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="{{ _('Show/hide') }}">
            <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')">{{ _('Save') }}</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Enable Pushover globally') }}</div>
          <div class="settings-row-desc">{{ _('Disable to block Pushover messages for all users.') }}</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">{{ _('My settings') }}</div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        {{ _('Download the') }} <a href="https://pushover.net" target="_blank" style="color:var(--accent)">{{ _('Pushover app') }}</a> {{ _('to your device. After login, find your user key on the home page.') }}
      </div>
      <div class="settings-row" id="pushover-status-row" style="display:none;">
        <div class="settings-row-left"><div class="settings-row-label">{{ _('Service status') }}</div></div>
        <div class="settings-row-right"><span id="pushover-status-badge" class="notif-badge notif-badge-warn">{{ _('App not configured') }}</span></div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Enable Pushover') }}</div>
          <div class="settings-row-desc">{{ _('Turn Pushover notifications for your account on or off.') }}</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">{{ _('Your personal Pushover key — not the 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="{{ _('Show/hide') }}">
            <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')">{{ _('Save') }}</button>
        </div>
      </div>
    </div>

    <div class="settings-section notif-prefs-section" id="pushover-prefs-section">
      <div class="settings-section-header">{{ _('Notify on') }}</div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Successful download') }}</div>
          <div class="settings-row-desc">{{ _('Message when all episodes completed without errors.') }}</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">{{ _('Partially successful') }}</div>
          <div class="settings-row-desc">{{ _('Message when at least one episode succeeded but errors also occurred.') }}</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 with errors') }}</div>
          <div class="settings-row-desc">{{ _('Message when individual episodes failed.') }}</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">{{ _('Cancelled download') }}</div>
          <div class="settings-row-desc">{{ _('Message when a running download was cancelled.') }}</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: new episodes') }}</div>
          <div class="settings-row-desc">{{ _('Message when auto-sync finds new episodes.') }}</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: errors') }}</div>
          <div class="settings-row-desc">{{ _('When an auto-sync job crashes or fails.') }}</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;">{{ _('↳ Only error notifications when all retries have failed') }}</div>
          <div class="settings-row-desc">{{ _('When enabled, a notification is sent for failed auto-syncs only after all retries are exhausted.') }}</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; resume') }}</div>
          <div class="settings-row-desc">{{ _('When a sync is paused due to an unreachable custom path — or resumes.') }}</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">{{ _('Low disk space') }}</div>
          <div class="settings-row-desc">{{ _('When free disk space drops below the configured threshold.') }}</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')">{{ _('Send test') }}</button>
        </div>
      </div>
    </div>
    {% for card in get_settings_cards('notifications', 'pushover') %}
    {{ ext.render_settings_card(card) }}
    {% endfor %}
  </div>

  <!-- ═══ NTFY ═══ -->
  <div class="settings-tab-panel" id="panel-ntfy">
    <div class="page-header" style="margin-bottom:20px;">
      <h1 class="page-title">NTFY</h1>
      <p class="page-subtitle">{{ _('Self-hosted or ntfy.sh push notifications.') }}</p>
    </div>

    {% 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 configuration') }}
      </div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        {{ _('NTFY sends messages to a topic. Enter the server URL and topic here.') }}
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('NTFY server') }}</div>
          <div class="settings-row-desc">{{ _('Base URL of the ntfy server. Required.') }}</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="text" id="admin_ntfy_server" class="notif-input" placeholder="{{ _('Enter server URL') }}">
          <button class="btn btn-primary btn-sm" onclick="saveAdminField('notif_ntfy_server','admin_ntfy_server')">{{ _('Save') }}</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">{{ _('Topic name. Required. Messages are sent to &lt;server&gt;/&lt;topic&gt;.') }}</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="text" id="admin_ntfy_topic" class="notif-input" placeholder="{{ _('Enter topic') }}">
          <button class="btn btn-primary btn-sm" onclick="saveAdminField('notif_ntfy_topic','admin_ntfy_topic')">{{ _('Save') }}</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: enter a bearer token if your ntfy server requires authentication.') }}</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="{{ _('Show/hide') }}">👁</button>
          <button class="btn btn-primary btn-sm" onclick="saveAdminField('notif_ntfy_auth_token','admin_ntfy_auth_token')">{{ _('Save') }}</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">{{ _('Alternatively enter username/password for basic auth.') }}</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')">{{ _('Save') }}</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Enable NTFY globally') }}</div>
          <div class="settings-row-desc">{{ _('Disable to block NTFY messages for all users.') }}</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">{{ _('My settings') }}</div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        {{ _('Enable NTFY for your account and receive messages to the configured topic.') }}
      </div>
      <div class="settings-row" id="ntfy-status-row" style="display:none;">
        <div class="settings-row-left"><div class="settings-row-label">{{ _('Service status') }}</div></div>
        <div class="settings-row-right"><span id="ntfy-status-badge" class="notif-badge notif-badge-warn">{{ _('NTFY not configured') }}</span></div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Enable NTFY') }}</div>
          <div class="settings-row-desc">{{ _('Turn NTFY notifications for your account on or off.') }}</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">{{ _('Notify on') }}</div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Successful download') }}</div>
          <div class="settings-row-desc">{{ _('Message when all episodes of a job completed without errors.') }}</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">{{ _('Partially successful') }}</div>
          <div class="settings-row-desc">{{ _('Message when at least one episode succeeded but errors also occurred.') }}</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 with errors') }}</div>
          <div class="settings-row-desc">{{ _('Message when individual episodes failed.') }}</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">{{ _('Cancelled download') }}</div>
          <div class="settings-row-desc">{{ _('Message when a running download was cancelled.') }}</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: new episodes') }}</div>
          <div class="settings-row-desc">{{ _('Message when auto-sync finds new episodes of a subscribed series.') }}</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: errors') }}</div>
          <div class="settings-row-desc">{{ _('Message when an auto-sync job crashes or fails.') }}</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;">{{ _('↳ Only error notifications when all retries have failed') }}</div>
          <div class="settings-row-desc">{{ _('When enabled, a notification is sent for failed auto-syncs only after all retries are exhausted.') }}</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; resume') }}</div>
          <div class="settings-row-desc">{{ _('When a sync is paused due to an unreachable custom path — or resumes.') }}</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">{{ _('Low disk space') }}</div>
          <div class="settings-row-desc">{{ _('When free disk space drops below the configured threshold.') }}</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')">{{ _('Send test') }}</button>
        </div>
      </div>
    </div>
    {% for card in get_settings_cards('notifications', 'ntfy') %}
    {{ ext.render_settings_card(card) }}
    {% endfor %}
  </div>

  <!-- ═══ DISCORD ═══ -->
  <div class="settings-tab-panel" id="panel-discord">
    <div class="page-header" style="margin-bottom:20px;">
      <h1 class="page-title">Discord</h1>
      <p class="page-subtitle">{{ _('Send notifications to a Discord channel via webhook.') }}</p>
    </div>

    {% 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 configuration') }}
      </div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        {{ _('Discord sends to a shared channel. Channel → Settings → Integrations → Webhooks → Create new webhook → copy URL.') }}
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Webhook URL') }}</div>
          <div class="settings-row-desc">{{ _('Must start with') }} <code>https://discord.com/api/webhooks/</code>.</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="{{ _('Show/hide') }}">
            <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')">{{ _('Save') }}</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Enable Discord globally') }}</div>
          <div class="settings-row-desc">{{ _('Disable to block Discord messages entirely.') }}</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">{{ _('Notify on (global — applies to all)') }}</div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Successful download') }}</div>
          <div class="settings-row-desc">{{ _('Green embed message when all episodes completed without errors.') }}</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">{{ _('Partially successful') }}</div>
          <div class="settings-row-desc">{{ _('Orange embed message when at least one episode succeeded but errors occurred.') }}</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 with errors') }}</div>
          <div class="settings-row-desc">{{ _('Yellow embed message when individual episodes failed.') }}</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">{{ _('Cancelled download') }}</div>
          <div class="settings-row-desc">{{ _('Grey embed message when a download was cancelled.') }}</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: new episodes') }}</div>
          <div class="settings-row-desc">{{ _('Blue embed message when auto-sync finds new episodes.') }}</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: errors') }}</div>
          <div class="settings-row-desc">{{ _('Red embed message when an auto-sync job crashes.') }}</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;">{{ _('↳ Only error notifications when all retries have failed') }}</div>
          <div class="settings-row-desc">{{ _('When enabled, a notification is sent for failed auto-syncs only after all retries are exhausted.') }}</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; resume') }}</div>
          <div class="settings-row-desc">{{ _('Embed message when a sync is paused or resumed.') }}</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">{{ _('Low disk space') }}</div>
          <div class="settings-row-desc">{{ _('Yellow embed message when free storage drops below the threshold.') }}</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')">{{ _('Send test') }}</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;">{{ _('Configured by an administrator. Once an admin sets up the webhook, MediaForge sends messages to the configured channel.') }}</p>
        <span id="discord-user-status" class="notif-badge notif-badge-warn" style="margin-top:4px;">{{ _('Not configured') }}</span>
      </div>
    </div>
    {% endif %}
    {% for card in get_settings_cards('notifications', 'discord') %}
    {{ ext.render_settings_card(card) }}
    {% endfor %}
  </div>

  <!-- ═══ WHATSAPP ═══ -->
  <div class="settings-tab-panel" id="panel-whatsapp">
    <div class="page-header" style="margin-bottom:20px;">
      <h1 class="page-title">WhatsApp</h1>
      <p class="page-subtitle">{{ _('Send notifications via WhatsApp (using Twilio).') }}</p>
    </div>

    {% 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 configuration') }}
      </div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        {{ _('WhatsApp delivery runs via') }} <a href="https://www.twilio.com/en-us/whatsapp" target="_blank" style="color:var(--accent)">Twilio</a>. {{ _('You need a Twilio account with WhatsApp Sandbox enabled. Users must activate the sandbox once with') }} <code>join &lt;code&gt;</code>.
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Account SID</div>
          <div class="settings-row-desc">{{ _('Found on the Twilio console home page under') }} <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="{{ _('Show/hide') }}">
            <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')">{{ _('Save') }}</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">{{ _('Next to the account SID in the 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="{{ _('Show/hide') }}">
            <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')">{{ _('Save') }}</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Sender number') }}</div>
          <div class="settings-row-desc">{{ _('The Twilio WhatsApp sandbox number, e.g.') }} <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')">{{ _('Save') }}</button>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Enable WhatsApp globally') }}</div>
          <div class="settings-row-desc">{{ _('Disable to block WhatsApp messages for all users.') }}</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">{{ _('My settings') }}</div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        {{ _('Enter your mobile number in international format (e.g.') }} <code>+4917612345678</code>). {{ _('You must first activate the sandbox once by sending') }} <code>join &lt;code&gt;</code> {{ _('to the Twilio number.') }}
      </div>
      <div class="settings-row" id="whatsapp-status-row" style="display:none;">
        <div class="settings-row-left"><div class="settings-row-label">{{ _('Service status') }}</div></div>
        <div class="settings-row-right"><span id="whatsapp-status-badge" class="notif-badge notif-badge-warn">{{ _('Twilio not configured') }}</span></div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Enable WhatsApp') }}</div>
          <div class="settings-row-desc">{{ _('Turn WhatsApp notifications for your account on or off.') }}</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">{{ _('My number') }}</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')">{{ _('Save') }}</button>
        </div>
      </div>
    </div>

    <div class="settings-section notif-prefs-section" id="whatsapp-prefs-section">
      <div class="settings-section-header">{{ _('Notify on') }}</div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Successful download') }}</div>
          <div class="settings-row-desc">{{ _('Message when all episodes completed without errors.') }}</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">{{ _('Partially successful') }}</div>
          <div class="settings-row-desc">{{ _('Message when at least one episode succeeded but errors also occurred.') }}</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 with errors') }}</div>
          <div class="settings-row-desc">{{ _('Message when individual episodes failed.') }}</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">{{ _('Cancelled download') }}</div>
          <div class="settings-row-desc">{{ _('Message when a running download was cancelled.') }}</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: new episodes') }}</div>
          <div class="settings-row-desc">{{ _('Message when auto-sync finds new episodes.') }}</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: errors') }}</div>
          <div class="settings-row-desc">{{ _('When an auto-sync job crashes or fails.') }}</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;">{{ _('↳ Only error notifications when all retries have failed') }}</div>
          <div class="settings-row-desc">{{ _('When enabled, a notification is sent for failed auto-syncs only after all retries are exhausted.') }}</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; resume') }}</div>
          <div class="settings-row-desc">{{ _('When a sync is paused due to an unreachable custom path — or resumes.') }}</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">{{ _('Low disk space') }}</div>
          <div class="settings-row-desc">{{ _('When free disk space drops below the configured threshold.') }}</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')">{{ _('Send test') }}</button>
        </div>
      </div>
    </div>
    {% for card in get_settings_cards('notifications', 'whatsapp') %}
    {{ ext.render_settings_card(card) }}
    {% endfor %}
  </div>

  <!-- ═══ SPEICHER ═══ -->
  <div class="settings-tab-panel" id="panel-storage">
    <div class="page-header" style="margin-bottom:20px;">
      <h1 class="page-title">{{ _('Storage') }}</h1>
      <p class="page-subtitle">{{ _('Get warned when free disk space runs low.') }}</p>
    </div>
    <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>
        {{ _('Disk space warning') }}
      </div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        {{ _('MediaForge checks free disk space before every download. If it drops below the threshold, a notification is sent (max. once per hour). The download continues anyway.') }}
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Minimum disk space') }}</div>
          <div class="settings-row-desc">{{ _('Notification when less than this value (in GB) is free. 0 = disabled.') }}</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')">{{ _('Save') }}</button>
        </div>
      </div>

    </div>
    {% for card in get_settings_cards('notifications', 'storage') %}
    {{ ext.render_settings_card(card) }}
    {% endfor %}
  </div>

  <!-- ══════════════════════════════════════════════════════
       Dynamic panels — brand-new tabs an extension asked for via
       settings_tab=<something not in _KNOWN_TABS> (see the "Modules" group
       in _notifications_menu.html and registry.py's resolve_dynamic_tabs()).
  ══════════════════════════════════════════════════════ -->
  {% for t in get_dynamic_tabs('notifications') %}
  <div class="settings-tab-panel" id="panel-{{ t.id }}">
    <div class="page-header" style="margin-bottom:20px;">
      <h1 class="page-title">{{ t.label }}</h1>
      <p class="page-subtitle">{{ t.description or _('External notification module') }}</p>
    </div>
    {% for card in get_settings_cards('notifications', t.id) %}
    {{ ext.render_settings_card(card) }}
    {% endfor %}
  </div>
  {% endfor %}

</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;
  }
  .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>

<!-- Shared collapsible-card behaviour + generic enable toggle for
     auto-registered extensions (see _settings_card_macro.html /
     web/thirdparties/registry.py). Also used by integrations.html — kept
     in its own file instead of app.js since app.js isn't loaded here. -->
<script src="{{ url_for('static', filename='extension_cards.js') }}"></script>

<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);
}

/* ── Tab switcher — mirrors settings.js's switchTab() / monitoring.html's
   switchMonTab() / integrations.js's switchIntegTab(). Named switchNotifTab
   (not switchTab) since this page defines its own JS inline instead of
   loading settings.js/app.js — kept distinct to avoid any future collision. */
function switchNotifTab(name) {
  document.querySelectorAll('#notificationsMenu .settings-tab').forEach(function (b) {
    b.classList.toggle('active', b.dataset.tab === name);
  });
  document.querySelectorAll('.settings-container .settings-tab-panel').forEach(function (p) {
    p.classList.toggle('active', p.id === 'panel-' + name);
  });
  try { history.replaceState(null, '', '#' + name); localStorage.setItem('notificationsActiveTab', name); } catch (e) {}
}

/* ── Restore the active tab from a #hash deep-link (e.g. a sidebar link or
   the Modulmanager's "Open module" button); otherwise always start on
   Web Push, matching settings.js's restoreTab(). Valid ids are read off the
   DOM instead of hardcoded, so tabs an extension registers dynamically (see
   registry.py's resolve_dynamic_tabs(), which adds extra buttons to
   #notificationsMenu at render time) are restorable via #hash too. ── */
(function restoreNotifTab() {
  var hash = '';
  try { hash = (window.location.hash || '').replace('#', '').trim(); } catch (e) {}
  var valid = Array.prototype.map.call(
    document.querySelectorAll('#notificationsMenu .settings-tab'),
    function (b) { return b.dataset.tab; }
  );
  var tab = (hash && valid.indexOf(hash) !== -1) ? hash : 'webpush';
  switchNotifTab(tab);
})();

/* ── Deep link from the Modulmanager ("Open module" button) ──
   Mirrors integrations.js's openDeepLinkedThirdpartyCard(): extensions.html
   links here as .../notifications?open=<item_id>#<tab_id> for any
   thirdparty registered with settings_host="notifications". The #tab half is
   already handled by restoreNotifTab() above; this part additionally
   force-expands that one item's settings card and scrolls it into view. */
(function openDeepLinkedNotificationCard() {
  var openId = "";
  try { openId = new URLSearchParams(window.location.search).get("open") || ""; } catch (e) {}
  if (!openId) return;
  document.addEventListener("DOMContentLoaded", function () {
    setTimeout(function () {
      var card = document.getElementById("integCard-" + openId);
      if (!card) return;
      card.classList.remove("collapsed");
      try { localStorage.setItem("integCollapsed_" + openId, "0"); } catch (e) {}
      card.scrollIntoView({ behavior: "smooth", block: "center" });
      card.classList.add("integ-card-highlight");
      setTimeout(function () { card.classList.remove("integ-card-highlight"); }, 2200);
    }, 60);
  });
})();

/* ── 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({{ _('Saved ✓') | tojson }});
    await loadSettings();
  } else {
    showToast({{ _('Error:') | tojson }} + ' ' + (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({{ _('Error:') | tojson }} + ' ' + (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({{ _('Saved ✓') | tojson }});
    await loadSettings();
  } else {
    showToast({{ _('Error:') | tojson }} + ' ' + (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({{ _('Error:') | tojson }} + ' ' + (res.error || '?'));
}

/* ── Telegram Chat-ID auto-detect ── */
async function detectTelegramChatId() {
  showToast({{ _('Searching for last message…') | tojson }});
  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 detected:') | tojson }} + ' ' + data.chat_id + ' — ' + {{ _('please save!') | tojson }});
    } else {
      showToast(data.error || {{ _('No message found. Send the bot a message first.') | tojson }});
    }
  } catch(e) {
    showToast({{ _('Network error while detecting.') | tojson }});
  }
}

/* ── Test notification ── */
async function testNotif(service) {
  showToast({{ _('Sending test…') | tojson }});
  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 message sent ✓') | tojson }});
    } else {
      showToast({{ _('Error:') | tojson }} + ' ' + (res.error || {{ _('Unknown error') | tojson }}));
    }
  } catch(e) {
    showToast({{ _('Network error:') | tojson }} + ' ' + 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 ? {{ _('Configured ✓') | tojson }} : {{ _('Not configured — please contact admin') | tojson }};
  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 ? {{ _('Configured ✓') | tojson }} : {{ _('Not configured') | tojson }};
      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 = {{ _('Disable Web Push') | tojson }};
    btn.classList.add('push-active');
    if (sect) sect.classList.remove('push-prefs-disabled');
  } else {
    btn.textContent = {{ _('Enable Web Push') | tojson }};
    btn.classList.remove('push-active');
    if (sect) sect.classList.add('push-prefs-disabled');
  }
};
</script>
{% endblock %}