{% extends "base.html" %}

{% block content %}

<!-- Dev Studio: widget render preview (authenticated) -->
    <div data-tab="widgets" class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl">
      <div class="flex items-center justify-between mb-4">
        <div>
          <h2 class="font-bold text-base text-slate-100">🧪 Dev Studio</h2>
          <p class="text-xs text-slate-400">Preview any discovered widget against your real panel dimensions</p>
        </div>
        <button id="btn-ds-refresh" onclick="devStudioRefresh()" class="px-3.5 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 text-xs font-semibold transition">↻ Refresh</button>
      </div>
      <div class="grid grid-cols-1 lg:grid-cols-12 gap-4">
        <!-- Controls -->
        <div class="lg:col-span-4 space-y-4">
          <div>
            <label class="text-[11px] font-bold text-slate-400 uppercase tracking-wide">Widget</label>
            <select id="ds-widget" onchange="dsRebuildSettings(); dsRender();" class="mt-1 w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-orange-500/40">
              <option value="">Loading catalogue…</option>
            </select>
          </div>
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="text-[11px] font-bold text-slate-400 uppercase tracking-wide">Width px</label>
              <input id="ds-w" type="number" min="16" max="1600" value="800" onchange="dsRender()" class="mt-1 w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-orange-500/40">
            </div>
            <div>
              <label class="text-[11px] font-bold text-slate-400 uppercase tracking-wide">Height px</label>
              <input id="ds-h" type="number" min="16" max="1600" value="480" onchange="dsRender()" class="mt-1 w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-orange-500/40">
            </div>
          </div>
          <div class="grid grid-cols-2 gap-3">
            <div>
              <label class="text-[11px] font-bold text-slate-400 uppercase tracking-wide">Color mode</label>
              <select id="ds-color" onchange="dsRender()" class="mt-1 w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-orange-500/40">
                <option value="7color" selected>7-Color</option>
                <option value="rgb">RGB</option>
                <option value="bwr">BWR</option>
                <option value="bw">B/W</option>
              </select>
            </div>
            <div>
              <label class="text-[11px] font-bold text-slate-400 uppercase tracking-wide">Dither</label>
              <select id="ds-dither" onchange="dsRender()" class="mt-1 w-full bg-slate-800 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-100 focus:outline-none focus:ring-2 focus:ring-orange-500/40">
                <option value="0" selected>Off</option>
                <option value="1">On</option>
              </select>
            </div>
          </div>
          <div id="ds-settings"></div>
          <div class="flex items-center gap-2 pt-1">
            <button onclick="dsRender()" class="px-4 py-2 rounded-lg bg-orange-600 hover:bg-orange-500 text-white text-xs font-bold transition">▶ Render Preview</button>
            <span id="ds-status" class="text-[11px] text-slate-400"></span>
          </div>
        </div>
        <!-- Preview -->
        <div class="lg:col-span-8 bg-slate-950/60 border border-slate-800 rounded-xl flex items-center justify-center min-h-[360px] p-4 overflow-auto">
          <img id="ds-preview" alt="Widget preview" class="max-w-full max-h-[560px] object-contain rounded shadow-2xl ring-1 ring-slate-700/50" style="display:none">
          <div id="ds-preview-empty" class="text-slate-500 text-xs text-center space-y-1">
            <div class="text-3xl">🧪</div>
            <div>Select a widget to render a preview.</div>
          </div>
        </div>
      </div>
    </div>

<!-- Widget Finder: catalogue of all discovered widgets -->
    <div data-tab="widgets" class="bg-slate-900 border border-slate-800 rounded-2xl p-6 shadow-xl">
      <div class="flex items-center justify-between mb-4">
        <div>
          <h2 class="font-bold text-base text-slate-100">🔎 Widget Finder</h2>
          <p class="text-xs text-slate-400">Every widget discovered on this install, with its configuration schema</p>
        </div>
        <div class="flex items-center gap-2">
          <input id="wf-search" type="text" placeholder="Search widgets…" oninput="wfRender()" class="text-xs bg-slate-800 border border-slate-700 rounded-lg px-3 py-1.5 text-slate-100 placeholder-slate-500">
          <button onclick="wfLoad()" class="px-3.5 py-1.5 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 text-xs font-semibold transition">↻ Refresh</button>
        </div>
      </div>
      <div id="wf-grid" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
        <div class="text-xs text-slate-500">Loading widget catalogue…</div>
      </div>
    </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'); try { devStudioInit(); } catch (e) {} } else { lock.classList.remove('hidden'); }
})();
{% endblock %}