{% extends "base.html" %} {% block title %}{{ _('Encoding') }} — AniWorld Downloader{% endblock %}
{% block content %}
<div class="settings-container">
  <div class="page-header" style="margin-bottom:28px;">
    <h1 class="page-title">{{ _('Encoding') }}</h1>
    <p class="page-subtitle">{{ _('FFmpeg encoding settings') }}</p>
  </div>

  <!-- Mode Pills -->
  <div class="service-pills">
    <button class="service-pill active" id="pill-copy" onclick="showMode('copy',this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="8 17 12 21 16 17"/><line x1="12" y1="3" x2="12" y2="21"/></svg>
      Copy
    </button>
    <button class="service-pill" id="pill-h264" onclick="showMode('h264',this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
      H.264
    </button>
    <button class="service-pill" id="pill-h265" onclick="showMode('h265',this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
      H.265
    </button>
    <button class="service-pill" id="pill-expert" onclick="showMode('expert',this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
      {{ _('Expert') }}
    </button>
    <button class="service-pill" id="pill-upscaling" onclick="showMode('upscaling',this)">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
      Upscaling
    </button>
  </div>

  <!-- ═══ COPY ═══ -->
  <div class="service-panel active" id="panel-copy">
    <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;"><polyline points="8 17 12 21 16 17"/><line x1="12" y1="3" x2="12" y2="21"/></svg>
        Stream Copy
      </div>
      <div class="settings-hint" style="padding:14px 24px 0;font-size:0.82rem;color:var(--text-muted);">
        <strong>{{ _('Video is always copied') }}</strong> — {{ _('no re-encoding, no quality loss, fastest possible. Audio can optionally be re-encoded, e.g. for better compatibility.') }}
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Audio Codec') }}</div>
          <div class="settings-row-desc">{{ _('Copy recommended — no quality loss, fastest.') }}</div>
        </div>
        <div class="settings-row-right" style="gap:8px;flex-wrap:wrap;">
          <span class="hw-badge selected" id="audio-copy-copy" onclick="selectAudio('copy','copy',this)">Copy</span>
          <span class="hw-badge" id="audio-copy-aac" onclick="selectAudio('copy','aac',this)">AAC</span>
          <span class="hw-badge" id="audio-copy-ac3" onclick="selectAudio('copy','ac3',this)">AC3</span>
        </div>
      </div>
      <div style="padding:16px 24px;">
        <button class="btn btn-primary" onclick="saveSettings('copy')">{{ _('Save &amp; activate') }}</button>
      </div>
    </div>
  </div>

  <!-- ═══ H.264 ═══ -->
  <div class="service-panel" id="panel-h264">
    <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;"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
        {{ _('Hardware Acceleration') }}
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Encoder') }}</div>
          <div class="settings-row-desc">{{ _('Choose the encoder for H.264') }}</div>
        </div>
        <div class="settings-row-right" style="flex-wrap:wrap;gap:8px;">
          <div id="hw-badges-h264" style="display:flex;flex-wrap:wrap;gap:8px;">
            <span class="hw-badge" id="hw-h264-cpu" onclick="selectHw('h264','cpu',this)" title="{{ _('Always available') }}">CPU (libx264)</span>
            <span class="hw-badge" id="hw-h264-nvenc" onclick="selectHw('h264','nvenc',this)" title="NVIDIA GPU">NVENC</span>
            <span class="hw-badge" id="hw-h264-vaapi" onclick="selectHw('h264','vaapi',this)" title="Intel/AMD Linux">VAAPI</span>
            <span class="hw-badge" id="hw-h264-videotoolbox" onclick="selectHw('h264','videotoolbox',this)" title="macOS">VideoToolbox</span>
          </div>
        </div>
      </div>
      <div class="settings-row" style="border-top:none;align-items:center;">
        <div class="settings-row-left">
          <div class="settings-row-desc" style="font-size:0.78rem;">{{ _('Checks which encoders actually work on this system. Green = available, grey = unavailable.') }}</div>
        </div>
        <div class="settings-row-right">
          <button class="btn btn-sm" id="detect-btn-h264" onclick="detectHardware('h264')" style="white-space:nowrap;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px;margin-right:4px;vertical-align:-2px;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            {{ _('Detect encoders') }}
          </button>
        </div>
      </div>
      <!-- Encoder reason list -->
      <div id="hw-reasons-h264" style="display:none;padding:4px 22px 12px;"></div>

      <!-- VAAPI Device (nur bei VAAPI sichtbar) -->
      <div class="settings-row vaapi-device-row" id="vaapi-device-row-h264" style="display:none;">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('VAAPI Device') }}</div>
          <div class="settings-row-desc">{{ _('Path to render device, e.g.') }} <code>/dev/dri/renderD128</code>. {{ _('Leave empty for auto-detection.') }}</div>
        </div>
        <div class="settings-row-right">
          <input type="text" id="vaapi-device-input" class="notif-input" placeholder="/dev/dri/renderD128" style="width:240px;font-family:monospace;font-size:0.83rem;" oninput="syncVaapiDevice(this)">
        </div>
      </div>
    </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;"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33H15a1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15H4.5a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68V4.5a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51v.06a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9v.18a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
        {{ _('Quality &amp; Speed') }}
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Preset') }}</div>
          <div class="settings-row-desc">{{ _('Speed vs. compression. Slower = smaller files at the same quality.') }}</div>
        </div>
        <div class="settings-row-right">
          <select id="h264-preset" class="notif-input" style="width:160px;">
            <option value="ultrafast">ultrafast</option>
            <option value="superfast">superfast</option>
            <option value="veryfast">veryfast</option>
            <option value="faster">faster</option>
            <option value="fast">fast</option>
            <option value="medium" selected>medium</option>
            <option value="slow">slow</option>
            <option value="slower">slower</option>
            <option value="veryslow">veryslow</option>
          </select>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('CRF (Quality)') }}</div>
          <div class="settings-row-desc">{{ _('0 = lossless, 51 = worst quality. Default: 23. Recommended: 18–28.') }}</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="number" id="h264-crf" class="notif-input" value="23" min="0" max="51" step="1" style="width:70px;">
          <span style="color:var(--text-muted);font-size:0.85rem;">(0–51)</span>
        </div>
      </div>
    </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;"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
        Audio
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Audio Codec') }}</div>
          <div class="settings-row-desc">{{ _('Copy recommended — no quality loss, faster.') }}</div>
        </div>
        <div class="settings-row-right" style="gap:8px;flex-wrap:wrap;">
          <span class="hw-badge selected" id="audio-h264-copy" onclick="selectAudio('h264','copy',this)">Copy</span>
          <span class="hw-badge" id="audio-h264-aac" onclick="selectAudio('h264','aac',this)">AAC</span>
          <span class="hw-badge" id="audio-h264-ac3" onclick="selectAudio('h264','ac3',this)">AC3</span>
        </div>
      </div>
      <div style="padding:16px 24px;">
        <button class="btn btn-primary" onclick="saveSettings('h264')">{{ _('Save &amp; activate') }}</button>
      </div>
    </div>
  </div>

  <!-- ═══ H.265 ═══ -->
  <div class="service-panel" id="panel-h265">
    <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;"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
        {{ _('Hardware Acceleration') }}
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Encoder') }}</div>
          <div class="settings-row-desc">{{ _('Choose the encoder for H.265 / HEVC') }}</div>
        </div>
        <div class="settings-row-right" style="flex-wrap:wrap;gap:8px;">
          <div id="hw-badges-h265" style="display:flex;flex-wrap:wrap;gap:8px;">
            <span class="hw-badge" id="hw-h265-cpu" onclick="selectHw('h265','cpu',this)" title="{{ _('Always available') }}">CPU (libx265)</span>
            <span class="hw-badge" id="hw-h265-nvenc" onclick="selectHw('h265','nvenc',this)" title="NVIDIA GPU">NVENC</span>
            <span class="hw-badge" id="hw-h265-vaapi" onclick="selectHw('h265','vaapi',this)" title="Intel/AMD Linux">VAAPI</span>
            <span class="hw-badge" id="hw-h265-videotoolbox" onclick="selectHw('h265','videotoolbox',this)" title="macOS">VideoToolbox</span>
          </div>
        </div>
      </div>
      <div class="settings-row" style="border-top:none;align-items:center;">
        <div class="settings-row-left">
          <div class="settings-row-desc" style="font-size:0.78rem;">{{ _('Checks which encoders are available on this system. Green = found, grey = not present.') }}</div>
        </div>
        <div class="settings-row-right">
          <button class="btn btn-sm" id="detect-btn-h265" onclick="detectHardware('h265')" style="white-space:nowrap;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px;margin-right:4px;vertical-align:-2px;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
            {{ _('Detect encoders') }}
          </button>
        </div>
      </div>
      <!-- Encoder reason list -->
      <div id="hw-reasons-h265" style="display:none;padding:4px 22px 12px;"></div>

      <!-- VAAPI Device (nur bei VAAPI sichtbar) -->
      <div class="settings-row vaapi-device-row" id="vaapi-device-row-h265" style="display:none;">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('VAAPI Device') }}</div>
          <div class="settings-row-desc">{{ _('Path to render device, e.g.') }} <code>/dev/dri/renderD128</code>. {{ _('Leave empty for auto-detection.') }}</div>
        </div>
        <div class="settings-row-right">
          <input type="text" id="vaapi-device-input-h265" class="notif-input" placeholder="/dev/dri/renderD128" style="width:240px;font-family:monospace;font-size:0.83rem;" oninput="syncVaapiDevice(this)">
        </div>
      </div>
    </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;"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33H15a1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15H4.5a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68V4.5a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51v.06a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9v.18a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
        {{ _('Quality &amp; Speed') }}
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Preset') }}</div>
          <div class="settings-row-desc">{{ _('Speed vs. compression. Slower = smaller files at the same quality.') }}</div>
        </div>
        <div class="settings-row-right">
          <select id="h265-preset" class="notif-input" style="width:160px;">
            <option value="ultrafast">ultrafast</option>
            <option value="superfast">superfast</option>
            <option value="veryfast">veryfast</option>
            <option value="faster">faster</option>
            <option value="fast">fast</option>
            <option value="medium" selected>medium</option>
            <option value="slow">slow</option>
            <option value="slower">slower</option>
            <option value="veryslow">veryslow</option>
          </select>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('CRF (Quality)') }}</div>
          <div class="settings-row-desc">{{ _('0 = lossless, 51 = worst quality. Default: 28. Recommended: 24–30.') }}</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="number" id="h265-crf" class="notif-input" value="28" min="0" max="51" step="1" style="width:70px;">
          <span style="color:var(--text-muted);font-size:0.85rem;">(0–51)</span>
        </div>
      </div>
    </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;"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
        Audio
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Audio Codec') }}</div>
          <div class="settings-row-desc">{{ _('Copy recommended — no quality loss, faster.') }}</div>
        </div>
        <div class="settings-row-right" style="gap:8px;flex-wrap:wrap;">
          <span class="hw-badge selected" id="audio-h265-copy" onclick="selectAudio('h265','copy',this)">Copy</span>
          <span class="hw-badge" id="audio-h265-aac" onclick="selectAudio('h265','aac',this)">AAC</span>
          <span class="hw-badge" id="audio-h265-ac3" onclick="selectAudio('h265','ac3',this)">AC3</span>
        </div>
      </div>
      <div style="padding:16px 24px;">
        <button class="btn btn-primary" onclick="saveSettings('h265')">{{ _('Save &amp; activate') }}</button>
      </div>
    </div>
  </div>

  <!-- ═══ EXPERTE ═══ -->
  <div class="service-panel" id="panel-expert">
    <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;"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
        {{ _('Expert Mode') }}
      </div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.8rem;color:var(--text-muted);">
        {{ _('Enter FFmpeg flags directly in standard style. Examples:') }}<br>
        Video: <code>-c:v libx265 -preset slow -crf 18</code><br>
        Audio: <code>-c:a aac -b:a 192k</code><br>
        {{ _('If nothing is entered,') }} <code>copy</code> {{ _('is used as fallback.') }}
      </div>
      <div class="settings-row" style="flex-direction:column;align-items:stretch;gap:14px;padding:16px 24px;">
        <div>
          <label style="font-size:0.82rem;font-weight:600;color:var(--text-muted);display:block;margin-bottom:6px;">{{ _('Video flags') }}</label>
          <input type="text" id="expert-video" class="notif-input" placeholder="-c:v libx265 -preset slow -crf 18" style="width:100%;font-family:monospace;font-size:0.83rem;">
        </div>
        <div>
          <label style="font-size:0.82rem;font-weight:600;color:var(--text-muted);display:block;margin-bottom:6px;">{{ _('Audio flags') }}</label>
          <input type="text" id="expert-audio" class="notif-input" placeholder="-c:a aac -b:a 192k" style="width:100%;font-family:monospace;font-size:0.83rem;">
        </div>
        <div>
          <button class="btn btn-primary" onclick="saveSettings('expert')">{{ _('Save &amp; activate') }}</button>
        </div>
      </div>
    </div>
  </div>


  <!-- ═══ UPSCALING ═══ -->
  <div class="service-panel" id="panel-upscaling">

    <!-- Mode -->
    <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;"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33H15a1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15H4.5a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68V4.5a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51v.06a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9v.18a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>
        {{ _('Upscaling Mode') }}
      </div>
      <div class="settings-hint" style="padding:12px 24px 0;font-size:0.81rem;color:var(--text-muted);">
        {{ _('Anime4K GLSL shaders are applied to every video via mpv encode mode or ffmpeg libplacebo. Upscaling is CPU/GPU-intensive — plan accordingly.') }}
      </div>
      <div class="settings-row" style="flex-wrap:wrap;">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Mode') }}</div>
          <div class="settings-row-desc">{{ _('When should upscaling happen?') }}</div>
        </div>
        <div class="settings-row-right" style="gap:8px;flex-wrap:wrap;">
          <span class="hw-badge" id="upscale-mode-disabled"        onclick="selectUpscaleMode('disabled',this)">{{ _('Disabled') }}</span>
          <span class="hw-badge" id="upscale-mode-during_download" onclick="selectUpscaleMode('during_download',this)">{{ _('During download') }}</span>
          <span class="hw-badge" id="upscale-mode-after_download"  onclick="selectUpscaleMode('after_download',this)">{{ _('After download') }}</span>
        </div>
        <div id="upscale-disabled-hint" style="display:none; width:100%; padding: 8px 2px 2px; font-size:0.78rem; color:var(--text-muted);">
          💡 {{ _('The upscaling checkbox in the download modal is only shown when a mode other than "Disabled" is selected.') }}
        </div>
      </div>

      <!-- Replace / Suffix -->
      <div class="settings-row" id="upscale-replace-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Replace original') }}</div>
          <div class="settings-row-desc">{{ _('Overwrite original or create new file with') }} <code>(upscale)</code> {{ _('suffix.') }}</div>
        </div>
        <div class="settings-row-right" style="gap:8px;">
          <span class="hw-badge" id="upscale-replace-yes" onclick="selectUpscaleReplace(true,this)">{{ _('Replace') }}</span>
          <span class="hw-badge" id="upscale-replace-no"  onclick="selectUpscaleReplace(false,this)">{{ _('Suffix (upscale)') }}</span>
        </div>
      </div>
    </div>

    <!-- Shader -->
    <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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
        Anime4K Shader
      </div>

      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Preset (Mode)') }}</div>
          <div class="settings-row-desc">{{ _('A = fastest / D = best quality. Each mode uses a different shader combination.') }}</div>
        </div>
        <div class="settings-row-right" style="gap:8px;flex-wrap:wrap;">
          <span class="hw-badge" id="upscale-preset-A" onclick="selectUpscalePreset('A',this)" title="{{ _('Fast, good quality') }}">{{ _('Mode A – Fast') }}</span>
          <span class="hw-badge" id="upscale-preset-B" onclick="selectUpscalePreset('B',this)" title="{{ _('Balanced') }}">{{ _('Mode B – Balanced') }}</span>
          <span class="hw-badge" id="upscale-preset-C" onclick="selectUpscalePreset('C',this)" title="{{ _('High quality') }}">{{ _('Mode C – Quality') }}</span>
          <span class="hw-badge" id="upscale-preset-D" onclick="selectUpscalePreset('D',this)" title="{{ _('Best quality, very slow') }}">{{ _('Mode D – Ultra') }}</span>
        </div>
      </div>
      <div class="settings-row" style="align-items:center;">
        <div class="settings-row-left">
          <div class="settings-row-desc" style="font-size:0.78rem;">{{ _('Shaders are included in the package — no download needed.') }}</div>
        </div>
        <div class="settings-row-right" style="gap:8px;">
          <button class="btn btn-sm" id="upscale-check-btn" onclick="checkUpscaleEngines()">{{ _('Check status') }}</button>
        </div>
      </div>
      <div id="upscale-engine-status" style="display:none;padding:6px 24px 12px;font-size:0.8rem;color:var(--text-muted);"></div>
      <!-- mpv auto-download banner -->
      <div id="mpv-dl-banner" style="display:none;margin:0 24px 12px;padding:10px 14px;border-radius:8px;font-size:0.82rem;border:1px solid;"></div>
    </div>

    <!-- Resolution + Output -->
    <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;"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
        {{ _('Output') }}
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Target resolution') }}</div>
          <div class="settings-row-desc">{{ _('What resolution should the video be upscaled to?') }}</div>
        </div>
        <div class="settings-row-right" style="gap:8px;flex-wrap:wrap;">
          <span class="hw-badge" id="upscale-res-1080p" onclick="selectUpscaleRes('1080p',this)">1080p</span>
          <span class="hw-badge" id="upscale-res-1440p" onclick="selectUpscaleRes('1440p',this)">1440p</span>
          <span class="hw-badge" id="upscale-res-4k"    onclick="selectUpscaleRes('4k',this)">4K (2160p)</span>
          <span class="hw-badge" id="upscale-res-source" onclick="selectUpscaleRes('source',this)">{{ _('Original size') }}</span>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Engine') }}</div>
          <div class="settings-row-desc">{{ _('Auto detects what is available automatically. libplacebo requires ffmpeg with libplacebo support.') }}</div>
        </div>
        <div class="settings-row-right" style="gap:8px;">
          <span class="hw-badge" id="upscale-engine-auto"        onclick="selectUpscaleEngine('auto',this)">Auto</span>
          <span class="hw-badge" id="upscale-engine-mpv"         onclick="selectUpscaleEngine('mpv',this)">mpv</span>
          <span class="hw-badge" id="upscale-engine-libplacebo"  onclick="selectUpscaleEngine('libplacebo',this)">libplacebo</span>
        </div>
      </div>
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Codec') }}</div>
          <div class="settings-row-desc">{{ _('H.264 recommended. Copy keeps the original codec (not always possible).') }}</div>
        </div>
        <div class="settings-row-right" style="gap:8px;">
          <span class="hw-badge" id="upscale-vcodec-libx264" onclick="selectUpscaleVcodec('libx264',this)">H.264</span>
          <span class="hw-badge" id="upscale-vcodec-libx265" onclick="selectUpscaleVcodec('libx265',this)">H.265</span>
          <span class="hw-badge" id="upscale-vcodec-copy"    onclick="selectUpscaleVcodec('copy',this)">Copy</span>
        </div>
      </div>
      <div class="settings-row" id="upscale-crf-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('CRF (Quality)') }}</div>
          <div class="settings-row-desc">{{ _('Lower value = better quality, larger file. Recommended: 16–22.') }}</div>
        </div>
        <div class="settings-row-right notif-input-group">
          <input type="number" id="upscale-crf" class="notif-input" value="18" min="0" max="51" style="width:70px;">
          <span style="color:var(--text-muted);font-size:0.85rem;">(0–51)</span>
        </div>
      </div>
      <div class="settings-row" id="upscale-preset-enc-row">
        <div class="settings-row-left">
          <div class="settings-row-label">{{ _('Encoder preset') }}</div>
          <div class="settings-row-desc">{{ _('Speed vs. compression of the output encoder.') }}</div>
        </div>
        <div class="settings-row-right">
          <select id="upscale-enc-preset" class="notif-input" style="width:160px;">
            <option value="ultrafast">ultrafast</option>
            <option value="superfast">superfast</option>
            <option value="veryfast">veryfast</option>
            <option value="faster">faster</option>
            <option value="fast">fast</option>
            <option value="medium" selected>medium</option>
            <option value="slow">slow</option>
            <option value="slower">slower</option>
            <option value="veryslow">veryslow</option>
          </select>
        </div>
      </div>
      <div style="padding:16px 24px;">
        <button class="btn btn-primary" onclick="saveUpscaleSettings()">{{ _('Save &amp; activate') }}</button>
      </div>
    </div>
  </div>

  <!-- Active mode indicator -->
  <div id="active-mode-hint" style="margin-top:12px;padding:10px 18px;border-radius:8px;background:var(--bg-secondary);font-size:0.82rem;color:var(--text-muted);display:none;">
    {{ _('Active encoding mode:') }} <strong id="active-mode-label">–</strong>
    &nbsp;·&nbsp; {{ _('Upscaling:') }} <strong id="active-upscale-label">{{ _('Disabled') }}</strong>
  </div>

</div><!-- /.settings-container -->

<div id="toast" class="toast" style="display:none;"></div>

<style>
.hw-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 13px;
  border-radius: 99px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text-muted);
  transition: all 0.15s;
  user-select: none;
}
.hw-badge:hover { border-color: var(--primary); color: var(--primary); }
.hw-badge.selected { background: var(--primary); color: #fff; border-color: var(--primary); }
.hw-badge.available { border-color: var(--success, #22c55e); color: var(--success, #22c55e); }
.hw-badge.available.selected { background: var(--success, #22c55e); color: #fff; border-color: var(--success, #22c55e); }
.hw-badge.unavailable { opacity: 0.4; cursor: not-allowed; }
.hw-badge.unavailable:hover { border-color: var(--border); color: var(--text-muted); }

/* ── Responsive ── */
@media (max-width: 640px) {
  .settings-container {
    padding: 20px 16px;
  }
  .page-header {
    margin-bottom: 20px !important;
  }
  .page-title {
    font-size: 1.4rem;
  }

  /* Service pills: smaller, full row wrapping */
  .service-pill {
    padding: 7px 14px;
    font-size: 0.82rem;
    flex: 1 1 auto;
    justify-content: center;
  }
  .service-pill svg {
    display: none;
  }

  /* settings-row stacks vertically */
  .settings-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px;
    padding: 14px 16px;
  }
  .settings-row-left {
    width: 100%;
  }
  .settings-row-right {
    width: 100%;
    flex-shrink: unset;
    justify-content: flex-start;
    align-self: unset !important;
  }

  /* hw-badge row wraps nicely */
  #hw-badges-h264,
  #hw-badges-h265 {
    flex-wrap: wrap;
    width: 100%;
  }
  .hw-badge {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  /* Detect button full width on mobile */
  #detect-btn-h264,
  #detect-btn-h265 {
    width: 100%;
    justify-content: center;
  }

  /* Preset select full width */
  #h264-preset,
  #h265-preset {
    width: 100% !important;
  }

  /* CRF row: input + label inline, button below */
  .notif-input-group {
    flex-wrap: wrap;
    gap: 8px;
  }
  #h264-crf,
  #h265-crf {
    width: 80px !important;
  }

  /* Audio badges full row */
  #panel-copy .hw-badge,
  #panel-h264 .hw-badge[id^="audio-"],
  #panel-h265 .hw-badge[id^="audio-"] {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }

  /* Speichern button full width */
  .btn.btn-primary {
    width: 100%;
    justify-content: center;
  }

  /* Expert mode inputs full width (already 100%, but fix padding) */
  #expert-video,
  #expert-audio {
    font-size: 0.78rem;
  }

  /* Section header padding */
  .settings-section-header {
    padding: 14px 16px;
  }
  .settings-hint {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Active mode hint */
  #active-mode-hint {
    font-size: 0.78rem;
    padding: 8px 14px;
  }
}

@media (max-width: 400px) {
  .service-pills {
    gap: 6px;
  }
  .service-pill {
    padding: 6px 10px;
    font-size: 0.78rem;
  }
}
</style>

<script>

/* ── Sync VAAPI device inputs ── */
function syncVaapiDevice(src) {
  const val = src.value;
  const other = src.id === 'vaapi-device-input'
    ? document.getElementById('vaapi-device-input-h265')
    : document.getElementById('vaapi-device-input');
  if (other) other.value = val;
}

/* ── Toast ── */
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);
}

/* ── State ── */
const _hwSel = { h264: "cpu", h265: "cpu" };
const _audioSel = { h264: "copy", h265: "copy" };
const _hwDetected = { h264: null, h265: null };

/* ── Panel switcher ── */
function showMode(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');
}

/* ── Hardware badge selection ── */
function selectHw(mode, hw, el) {
  if (el.classList.contains('unavailable')) return;
  document.querySelectorAll('#hw-badges-' + mode + ' .hw-badge').forEach(b => b.classList.remove('selected'));
  el.classList.add('selected');
  _hwSel[mode] = hw;
  // Show/hide VAAPI device input
  const vaapiRow = document.getElementById('vaapi-device-row-' + mode);
  if (vaapiRow) vaapiRow.style.display = hw === 'vaapi' ? '' : 'none';
}

/* ── Audio badge selection ── */
function selectAudio(mode, codec, el) {
  document.querySelectorAll('#panel-' + mode + ' .hw-badge[id^="audio-"]').forEach(b => b.classList.remove('selected'));
  el.classList.add('selected');
  _audioSel[mode] = codec;
}

/* ── Hardware detection ── */
async function detectHardware(mode) {
  const btn = document.getElementById('detect-btn-' + mode);
  btn.disabled = true;
  btn.textContent = {{ _('Detecting…') | tojson }};
  try {
    const r = await fetch('/api/encoding/detect-hw', { method: 'POST' });
    const data = await r.json();
    if (!data.ok) { showToast({{ _('Error:') | tojson }} + ' ' + (data.error || {{ _('unknown') | tojson }})); return; }
    _hwDetected[mode] = data.encoders;
    applyHwBadges(mode, data.encoders);
    showToast({{ _('Encoder detection complete') | tojson }});
  } catch(e) {
    showToast({{ _('Network error during detection') | tojson }});
  } finally {
    btn.disabled = false;
    btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px;margin-right:4px;vertical-align:-2px;"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>' + {{ _('Detect') | tojson }};
  }
}

function applyHwBadges(mode, encoders) {
  const encMap = {
    h264: { cpu: 'libx264', nvenc: 'h264_nvenc', vaapi: 'h264_vaapi', videotoolbox: 'h264_videotoolbox' },
    h265: { cpu: 'libx265', nvenc: 'hevc_nvenc', vaapi: 'hevc_vaapi', videotoolbox: 'hevc_videotoolbox' },
  };
  const reasonLines = [];
  ['cpu','nvenc','vaapi','videotoolbox'].forEach(hw => {
    const el = document.getElementById('hw-' + mode + '-' + hw);
    if (!el) return;
    const key = encMap[mode][hw];
    // Support both old boolean format and new {available, reason} format
    const entry  = encoders[key];
    const avail  = (entry === true) || (entry && entry.available === true);
    const reason = (entry && entry.reason) ? entry.reason : null;
    el.classList.remove('available','unavailable');
    if (avail) {
      el.classList.add('available');
      el.title = key + ' ✓ ' + {{ _('available') | tojson }};
    } else {
      if (hw !== 'cpu') {
        el.classList.add('unavailable');
        el.title = reason ? key + ': ' + reason : key + ' ✗ ' + {{ _('not available') | tojson }};
        if (reason) {
          reasonLines.push({ label: key, reason });
        }
      }
    }
  });

  // Render reason list
  const reasonBox = document.getElementById('hw-reasons-' + mode);
  if (reasonBox) {
    if (reasonLines.length > 0) {
      reasonBox.style.display = '';
      reasonBox.innerHTML = reasonLines.map(function(r) {
        return '<div style="display:flex;gap:8px;align-items:flex-start;margin-bottom:6px;">' +
          '<span style="color:var(--error,#ef4444);flex-shrink:0;font-size:0.8rem;margin-top:1px;">✗</span>' +
          '<div><code style="font-size:0.78rem;color:var(--text-muted);">' + r.label + '</code>' +
          '<span style="font-size:0.8rem;color:var(--text-muted);margin-left:6px;">' + r.reason + '</span></div>' +
          '</div>';
      }).join('');
    } else {
      reasonBox.style.display = 'none';
      reasonBox.innerHTML = '';
    }
  }
}

/* ── Save settings ── */
async function saveSettings(mode) {
  const payload = { mode };
  if (mode === 'copy') {
    payload.audio = _audioSel['copy'];
  } else if (mode === 'h264' || mode === 'h265') {
    payload.hw = _hwSel[mode];
    payload.preset = document.getElementById(mode + '-preset').value;
    payload.crf = parseInt(document.getElementById(mode + '-crf').value, 10);
    payload.audio = _audioSel[mode];
    const _vaapiEl = document.getElementById('vaapi-device-input') || document.getElementById('vaapi-device-input-h265');
    payload.vaapi_device = _vaapiEl ? _vaapiEl.value : '';
  } else if (mode === 'expert') {
    payload.expert_video = document.getElementById('expert-video').value.trim();
    payload.expert_audio = document.getElementById('expert-audio').value.trim();
  }
  try {
    const r = await fetch('/api/encoding/settings', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    const data = await r.json();
    if (data.ok) {
      showToast({{ _('✓ Settings saved') | tojson }});
      updateActiveModeHint(mode);
    } else {
      showToast({{ _('Error:') | tojson }} + ' ' + (data.error || {{ _('unknown') | tojson }}));
    }
  } catch(e) {
    showToast({{ _('Network error while saving') | tojson }});
  }
}

function updateActiveModeHint(mode) {
  const labels = { copy: {{ _('Copy (no re-encoding)') | tojson }}, h264: 'H.264', h265: 'H.265 (HEVC)', expert: {{ _('Expert') | tojson }} };
  const hint = document.getElementById('active-mode-hint');
  document.getElementById('active-mode-label').textContent = labels[mode] || mode;
  hint.style.display = 'block';
}

/* ── Load settings on page load ── */
async function loadSettings() {
  try {
    const r = await fetch('/api/encoding/settings');
    const data = await r.json();
    if (!data.ok) return;
    const s = data.settings;

    // Switch to active mode pill
    const modeMap = { copy: 'pill-copy', h264: 'pill-h264', h265: 'pill-h265', expert: 'pill-expert' };
    const activePill = document.getElementById(modeMap[s.mode] || 'pill-copy');
    if (activePill) {
      showMode(s.mode || 'copy', activePill);
    }
    updateActiveModeHint(s.mode || 'copy');

    // Copy audio
    if (s.audio_copy) {
      _audioSel.copy = s.audio_copy;
      document.querySelectorAll('#panel-copy .hw-badge[id^="audio-"]').forEach(b => b.classList.remove('selected'));
      const elCopyAudio = document.getElementById('audio-copy-' + s.audio_copy);
      if (elCopyAudio) elCopyAudio.classList.add('selected');
    }

    // H.264
    if (s.preset_h264) document.getElementById('h264-preset').value = s.preset_h264;
    if (s.crf_h264 != null) document.getElementById('h264-crf').value = s.crf_h264;
    if (s.hw_h264) {
      _hwSel.h264 = s.hw_h264;
      const el = document.getElementById('hw-h264-' + s.hw_h264);
      if (el) {
        document.querySelectorAll('#hw-badges-h264 .hw-badge').forEach(b => b.classList.remove('selected'));
        el.classList.add('selected');
      }
    }
    if (s.audio_h264) {
      _audioSel.h264 = s.audio_h264;
      document.querySelectorAll('#panel-h264 .hw-badge[id^="audio-"]').forEach(b => b.classList.remove('selected'));
      const el = document.getElementById('audio-h264-' + s.audio_h264);
      if (el) el.classList.add('selected');
    }

    // H.265
    if (s.preset_h265) document.getElementById('h265-preset').value = s.preset_h265;
    if (s.crf_h265 != null) document.getElementById('h265-crf').value = s.crf_h265;
    if (s.hw_h265) {
      _hwSel.h265 = s.hw_h265;
      const el = document.getElementById('hw-h265-' + s.hw_h265);
      if (el) {
        document.querySelectorAll('#hw-badges-h265 .hw-badge').forEach(b => b.classList.remove('selected'));
        el.classList.add('selected');
      }
    }
    if (s.audio_h265) {
      _audioSel.h265 = s.audio_h265;
      document.querySelectorAll('#panel-h265 .hw-badge[id^="audio-"]').forEach(b => b.classList.remove('selected'));
      const el = document.getElementById('audio-h265-' + s.audio_h265);
      if (el) el.classList.add('selected');
    }

    // VAAPI device
    if (s.vaapi_device != null) {
      const inp = document.getElementById('vaapi-device-input');
      const inp65 = document.getElementById('vaapi-device-input-h265');
      if (inp) inp.value = s.vaapi_device;
      if (inp65) inp65.value = s.vaapi_device;
      // Show row if VAAPI is active
      ['h264','h265'].forEach(m => {
        const row = document.getElementById('vaapi-device-row-' + m);
        if (row) row.style.display = (s['hw_' + m] === 'vaapi') ? '' : 'none';
      });
    }

    // Expert
    if (s.expert_video != null) document.getElementById('expert-video').value = s.expert_video;
    if (s.expert_audio != null) document.getElementById('expert-audio').value = s.expert_audio;

  } catch(e) { /* ignore */ }
}

document.addEventListener('DOMContentLoaded', async function() {
  await loadSettings();
  await loadUpscaleSettings();
  // Check mpv auto-download status and start polling if in progress
  try {
    const ms = await fetch("/api/upscale/mpv-status");
    const md = await ms.json();
    if (md.ok) {
      _renderMpvBanner(md.download);
      if (!md.present && md.download && md.download.state === "downloading") _startMpvPoll();
    }
  } catch(e) {}
});

/* ─────────────────────────────────────────────
   UPSCALING SETTINGS
   ───────────────────────────────────────────── */
const _upscaleSel = {
  mode:    "disabled",
  preset:  "B",
  quality: "high",
  res:     "1080p",
  engine:  "auto",
  vcodec:  "libx264",
  replace: true,
};

function _upscalePick(group, val) {
  document.querySelectorAll(`[id^="upscale-${group}-"]`).forEach(el => el.classList.remove("selected"));
  const el = document.getElementById(`upscale-${group}-${val}`);
  if (el) el.classList.add("selected");
}
function selectUpscaleMode(v,el)    {
  _upscaleSel.mode = v; _upscalePick("mode", v);
  const hint = document.getElementById("upscale-disabled-hint");
  if (hint) hint.style.display = v === "disabled" ? "" : "none";
}
function selectUpscalePreset(v,el)  { _upscaleSel.preset  = v; _upscalePick("preset", v);  }
function selectUpscaleQuality(v,el) { _upscaleSel.quality = v; _upscalePick("quality", v); }
function selectUpscaleRes(v,el)     { _upscaleSel.res     = v; _upscalePick("res", v);     }
function selectUpscaleEngine(v,el)  { _upscaleSel.engine  = v; _upscalePick("engine", v);  }
function selectUpscaleVcodec(v,el)  { _upscaleSel.vcodec  = v; _upscalePick("vcodec", v);
  const crfRow = document.getElementById("upscale-crf-row");
  const preRow = document.getElementById("upscale-preset-enc-row");
  const hide   = v === "copy";
  if (crfRow) crfRow.style.display = hide ? "none" : "";
  if (preRow) preRow.style.display = hide ? "none" : "";
}
function selectUpscaleReplace(v,el) {
  _upscaleSel.replace = v;
  document.querySelectorAll('[id^="upscale-replace-"]').forEach(b => b.classList.remove("selected"));
  const id = v ? "upscale-replace-yes" : "upscale-replace-no";
  const target = document.getElementById(id);
  if (target) target.classList.add("selected");
}

async function saveUpscaleSettings() {
  const payload = {
    mode:             _upscaleSel.mode,
    engine:           _upscaleSel.engine,
    shader_preset:    _upscaleSel.preset,
    shader_quality:   _upscaleSel.quality,
    resolution:       _upscaleSel.res,
    replace_original: _upscaleSel.replace,
    out_vcodec:       _upscaleSel.vcodec,
    out_crf:          parseInt(document.getElementById("upscale-crf").value, 10),
    out_preset:       document.getElementById("upscale-enc-preset").value,
  };
  try {
    const r = await fetch("/api/upscale/settings", {
      method: "POST", headers: {"Content-Type":"application/json"}, body: JSON.stringify(payload)
    });
    const d = await r.json();
    if (d.ok) {
      showToast({{ _("✓ Upscaling settings saved") | tojson }});
      updateUpscaleHint(_upscaleSel.mode);
      // Also refresh encoding hint label
      const hint = document.getElementById('active-mode-hint');
      if (hint) hint.style.display = 'block';
    } else {
      showToast({{ _("Error:") | tojson }} + " " + (d.error || {{ _("unknown") | tojson }}));
    }
  } catch(e) { showToast({{ _("Network error") | tojson }}); }
}

function _renderMpvBanner(dl) {
  const b = document.getElementById("mpv-dl-banner");
  if (!b) return;
  const state = dl ? dl.state : "idle";
  if (state === "idle" || state === "done") { b.style.display = "none"; return; }
  b.style.display = "";
  if (state === "downloading") {
    b.style.background = "rgba(139,92,246,0.08)";
    b.style.borderColor = "rgba(139,92,246,0.3)";
    b.style.color = "var(--text-primary)";
    b.innerHTML = `⬇ <strong>{{ _("mpv.exe is being downloaded…") }}</strong> ${dl.pct}%
      <div style="margin-top:6px;height:4px;border-radius:3px;background:var(--bg-elevated);overflow:hidden;">
        <div style="height:100%;width:${dl.pct}%;background:linear-gradient(90deg,#8b5cf6,#ec4899);transition:width 0.4s;"></div>
      </div>`;
  } else if (state === "error") {
    b.style.background = "rgba(239,68,68,0.08)";
    b.style.borderColor = "rgba(239,68,68,0.3)";
    b.style.color = "var(--error)";
    b.innerHTML = `✗ <strong>{{ _("mpv download failed:") }}</strong> ${dl.error || {{ _("unknown") | tojson }}}`;
  }
}

// Poll mpv download status every 2s when panel is visible
let _mpvPollTimer = null;
function _startMpvPoll() {
  if (_mpvPollTimer) return;
  _mpvPollTimer = setInterval(async () => {
    try {
      const r = await fetch("/api/upscale/mpv-status");
      const d = await r.json();
      if (!d.ok) return;
      _renderMpvBanner(d.download);
      if (d.present || d.download.state === "done" || d.download.state === "error") {
        clearInterval(_mpvPollTimer); _mpvPollTimer = null;
      }
    } catch(e) {}
  }, 2000);
}

async function checkUpscaleEngines() {
  const btn = document.getElementById("upscale-check-btn");
  if (btn) { btn.disabled = true; btn.textContent = {{ _("Checking…") | tojson }}; }
  // Also fetch mpv download status
  try {
    const ms = await fetch("/api/upscale/mpv-status");
    const md = await ms.json();
    if (md.ok) _renderMpvBanner(md.download);
  } catch(e) {}
  try {
    const r = await fetch("/api/upscale/check-engines", {method:"POST"});
    const d = await r.json();
    const box = document.getElementById("upscale-engine-status");
    if (box) {
      box.style.display = "";
      if (d.ok) {
        const mpv = d.engines.mpv ? {{ _("✓ available") | tojson }} : {{ _("✗ not found (being downloaded…)") | tojson }};
        const lp  = d.engines.libplacebo ? {{ _("✓ available") | tojson }} : {{ _("✗ not found") | tojson }};
        const sh  = d.shaders_available ? {{ _("✓ Shaders found (bundled)") | tojson }} : {{ _("✗ Shaders missing") | tojson }};
        box.innerHTML = `<strong>mpv:</strong> ${mpv} &nbsp;·&nbsp; <strong>libplacebo:</strong> ${lp} &nbsp;·&nbsp; <strong>Shader:</strong> ${sh}`;
      } else {
        box.textContent = {{ _("Error:") | tojson }} + " " + (d.error || {{ _("unknown") | tojson }});
      }
    }
  } catch(e) { showToast({{ _("Network error") | tojson }}); }
  finally {
    if (btn) { btn.disabled = false; btn.textContent = {{ _("Check status") | tojson }}; }
  }
}


async function loadUpscaleSettings() {
  try {
    const r = await fetch("/api/upscale/settings");
    const d = await r.json();
    if (!d.ok) return;
    const s = d.settings;
    _upscaleSel.mode    = s.mode    || "disabled";
    _upscaleSel.preset  = s.shader_preset || "B";
    _upscaleSel.quality = s.shader_quality || "high";
    _upscaleSel.res     = s.resolution || "1080p";
    _upscaleSel.engine  = s.engine || "auto";
    _upscaleSel.vcodec  = s.out_vcodec || "libx264";
    _upscaleSel.replace = s.replace_original !== "0";

    _upscalePick("mode",    _upscaleSel.mode);
    const _hint = document.getElementById("upscale-disabled-hint");
    if (_hint) _hint.style.display = _upscaleSel.mode === "disabled" ? "" : "none";
    _upscalePick("preset",  _upscaleSel.preset);
    _upscalePick("quality", _upscaleSel.quality);
    _upscalePick("res",     _upscaleSel.res);
    _upscalePick("engine",  _upscaleSel.engine);
    _upscalePick("vcodec",  _upscaleSel.vcodec);
    selectUpscaleReplace(_upscaleSel.replace, null);

    const crfEl = document.getElementById("upscale-crf");
    const preEl = document.getElementById("upscale-enc-preset");
    if (crfEl) crfEl.value = s.out_crf || "18";
    if (preEl) preEl.value = s.out_preset || "medium";

    // CRF/preset row visibility
    const hide = _upscaleSel.vcodec === "copy";
    const crfRow = document.getElementById("upscale-crf-row");
    const preRow = document.getElementById("upscale-preset-enc-row");
    if (crfRow) crfRow.style.display = hide ? "none" : "";
    if (preRow) preRow.style.display = hide ? "none" : "";

    updateUpscaleHint(s.mode);
  } catch(e) { /* ignore */ }
}

function updateUpscaleHint(mode) {
  const labels = {
    disabled:        {{ _("Disabled") | tojson }},
    during_download: {{ _("During download") | tojson }},
    after_download:  {{ _("After download") | tojson }},
  };
  const el = document.getElementById("active-upscale-label");
  if (el) el.textContent = labels[mode] || mode || "Deaktiviert";
  // Show hint if at least one thing is set
  const hint = document.getElementById("active-mode-hint");
  if (hint && mode && mode !== "disabled") hint.style.display = "block";
}


</script>
{% endblock %}