{% extends "base.html" %}

{% block content %}

<!-- Display Hardware & Quiet Hours Settings -->
    <div data-tab="playlist" class="grid grid-cols-1 md:grid-cols-2 gap-6">
      
      <!-- Display Driver Settings -->
      <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl space-y-4">
        <div>
          <h2 class="font-bold text-base text-slate-100">Display Hardware Settings</h2>
          <p class="text-xs text-slate-400">Configure physical SPI screen drivers and resolution targets</p>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div>
            <label class="block text-xs font-semibold text-slate-400 mb-1.5">Driver Backend</label>
            <select id="cfg-driver" onchange="updateHardwareSettings()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-orange-500 focus:outline-none">
              <option value="auto">Auto-Detect Display (Recommended)</option>
              <option value="inky">Pimoroni Inky Driver</option>
              <option value="waveshare">Waveshare SPI Driver</option>
              <option value="virtual">Virtual (Browser Preview)</option>
              <option value="framebuffer">Linux Framebuffer (/dev/fb0)</option>
            </select>
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-400 mb-1.5">Display Panel Model</label>
            <select id="cfg-model" onchange="updateHardwareSettings()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-orange-500 focus:outline-none">
              <option value="impression_7_3">7.3" Inky Impression (800×480)</option>
              <option value="impression_5_7">5.7" Inky Impression (600×448)</option>
              <option value="impression_4_0">4.0" Inky Impression (640×400)</option>
              <option value="epd7in3f">7.3" 7-Color Waveshare (800×480)</option>
              <option value="epd5in65f">5.65" 7-Color Waveshare (600×448)</option>
              <option value="epd7in5_HD">7.5" HD Waveshare (880×528)</option>
              <option value="epd13in3k">13.3" Spectra 6 (1600×1200)</option>
              <option value="epd2in13_V4">2.13" Waveshare Hat (250×122)</option>
            </select>
          </div>
          <div class="sm:col-span-2">
            <label class="block text-xs font-semibold text-slate-400 mb-1.5">Orientation</label>
            <select id="cfg-orient" onchange="updateHardwareSettings()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-orange-500 focus:outline-none">
              <option value="0">Landscape (0°)</option>
              <option value="90">Portrait (90°)</option>
              <option value="180">Landscape Inverted (180°)</option>
              <option value="270">Portrait Inverted (270°)</option>
            </select>
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-400 mb-1.5">Color Saturation (Inky)</label>
            <input type="number" id="cfg-saturation" min="0.1" max="1" step="0.05" value="0.5" onchange="updateHardwareSettings()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-orange-500 focus:outline-none" />
            <p class="text-[10px] text-slate-500 mt-1">0.1–1.0; higher = more intense color on Inky panels</p>

</div>
        </div>
      </div>

      <!-- Quiet Hours & System Settings -->
      <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl space-y-4">
        <div>
          <h2 class="font-bold text-base text-slate-100">Quiet Hours & Timezone</h2>
          <p class="text-xs text-slate-400">Suspend physical e-Paper refreshes during sleeping hours</p>
        </div>

        <div class="space-y-4">
          <div class="flex items-center justify-between p-3 rounded-xl bg-slate-950/60 border border-slate-800">
            <div>
              <div class="text-xs font-bold text-slate-200">Enable Night Quiet Mode</div>
              <div class="text-[11px] text-slate-400">Puts display to sleep and prevents night flashing</div>
            </div>
            <input type="checkbox" id="cfg-qh-enabled" onchange="updateQuietHoursSettings()" class="w-4 h-4 accent-orange-600 rounded cursor-pointer" />
          </div>

          <div class="grid grid-cols-2 gap-4">
            <div>
              <label class="block text-xs font-semibold text-slate-400 mb-1.5">Start Time (Sleep)</label>
              <input type="time" id="cfg-qh-start" value="23:00" onchange="updateQuietHoursSettings()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-orange-500 focus:outline-none" />
            </div>
            <div>
              <label class="block text-xs font-semibold text-slate-400 mb-1.5">End Time (Wake)</label>
              <input type="time" id="cfg-qh-end" value="06:00" onchange="updateQuietHoursSettings()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-orange-500 focus:outline-none" />
            </div>
          </div>

          <div>
            <label class="block text-xs font-semibold text-slate-400 mb-1.5">Device Timezone</label>
            <select id="cfg-timezone" onchange="updateDeviceSettings()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-orange-500 focus:outline-none"></select>
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-400 mb-1.5">Device Name</label>
            <input type="text" id="cfg-device-name" value="rndrSBC Node" placeholder="e.g. Kitchen Display" onchange="updateDeviceSettings()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-orange-500 focus:outline-none" />
          </div>
          <div>
            <label class="block text-xs font-semibold text-slate-400 mb-1.5">Display Language</label>
            <select id="cfg-language" onchange="updateDeviceSettings()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-orange-500 focus:outline-none">
              <option value="en">English</option>
              <option value="es">Español</option>
              <option value="fr">Français</option>
              <option value="de">Deutsch</option>
              <option value="it">Italiano</option>
              <option value="pt">Português</option>
              <option value="nl">Nederlands</option>
              <option value="tr">Türkçe</option>
            </select>
          </div>
          <div class="col-span-2">
            <label class="block text-xs font-semibold text-slate-400 mb-1.5">Physical Buttons (GPIO)</label>
            <div class="grid grid-cols-3 gap-2 text-[10px] text-slate-500">
              <div class="bg-slate-900/40 border border-slate-800 rounded-lg px-2 py-1.5">NEXT <span class="text-slate-400">pin 5</span></div>
              <div class="bg-slate-900/40 border border-slate-800 rounded-lg px-2 py-1.5">PREV <span class="text-slate-400">pin 6</span></div>
              <div class="bg-slate-900/40 border border-slate-800 rounded-lg px-2 py-1.5">TOGGLE QUIET <span class="text-slate-400">pin 12</span></div>
            </div>
            <p class="text-[10px] text-slate-500 mt-1.5">Wire buttons to GND; cycle widgets, go back, or pause/restart refreshes. Disabled automatically on simulator/laptop (no GPIO).</p>
          </div>
        </div>
      </div>

      <div class="bg-slate-950/60 border border-slate-800/80 rounded-xl p-5 space-y-3">
        <div class="text-sm font-bold text-slate-200 flex items-center gap-2">🔄 Display Transitions</div>
        <div>
          <label class="block text-xs font-semibold text-slate-400 mb-1.5">Widget Transition Style</label>
          <select id="cfg-transition" onchange="updateDeviceSettings()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-orange-500 focus:outline-none">
            <option value="cut">Cut (Instant)</option>
            <option value="wipe_horizontal">Wipe Horizontal</option>
            <option value="wipe_vertical">Wipe Vertical</option>
            <option value="invert_flash">Invert Flash (Anti-Ghosting)</option>
            <option value="cross_fade">Cross Fade</option>
          </select>
        </div>
        <div>
          <label class="block text-xs font-semibold text-slate-400 mb-1.5">Panel Refresh Mode</label>
          <select id="cfg-refresh-mode" onchange="updateDeviceSettings()" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:border-orange-500 focus:outline-none">
            <option value="auto">Auto — partial when panel supports it (recommended)</option>
            <option value="full">Full refresh only (opt-out, max quality/contrast)</option>
          </select>
          <p class="text-[10px] text-slate-500 mt-1.5">Auto: B/W e-paper, LCD &amp; OLED partial-refresh automatically; 7-color/BWR panels always full-refresh. Full: forces full frame every refresh.</p>
        </div>
      </div>

<!-- Admin Security & Password Settings -->
      <div data-tab="backup" class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl space-y-4">
        <div>
          <h2 class="font-bold text-base text-slate-100">🔒 Admin Security & Password</h2>
          <p class="text-xs text-slate-400">Update your dashboard administrator password</p>
        </div>

        <div class="space-y-3">
          <div>
            <label class="block text-xs font-semibold text-slate-400 mb-1">Current Password</label>
            <input type="password" id="pwd-current" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-100 focus:border-orange-500 focus:outline-none" placeholder="••••••••" />
          </div>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <div>
              <label class="block text-xs font-semibold text-slate-400 mb-1">New Password (min 8 chars)</label>
              <input type="password" id="pwd-new" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-100 focus:border-orange-500 focus:outline-none" placeholder="••••••••" />
            </div>
            <div>
              <label class="block text-xs font-semibold text-slate-400 mb-1">Confirm New Password</label>
              <input type="password" id="pwd-new-confirm" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-100 focus:border-orange-500 focus:outline-none" placeholder="••••••••" />
            </div>
          </div>
          <div id="pwd-feedback" class="hidden text-xs font-medium"></div>
          <button id="btn-save-pwd" onclick="updatePassword()" class="px-4 py-2 rounded-lg bg-orange-600 hover:bg-orange-500 font-semibold text-xs text-white shadow-md shadow-orange-600/30 transition">
            Update Admin Password
          </button>
        </div>
{% endblock %}

{% block init %}
(async () => {
  if (typeof checkAuthStatus !== 'function') { document.getElementById('auth-lock')?.classList.remove('hidden'); return; }
  await checkAuthStatus(); const lock = document.getElementById('auth-lock'); if (isAuthenticated) { lock.classList.add('hidden'); await loadStatus(); try { updateHardwareSettings(); updateQuietHoursSettings(); updateDeviceSettings(); } catch (e) {} } else { lock.classList.remove('hidden'); } if (!setupRequired) buildTimezoneSelect();
})();
{% endblock %}