{% extends "base.html" %}

{% block content %}

<!-- Top Row: Screen Mirror + Quick Stats -->
    <div data-tab="playlist" class="grid grid-cols-1 lg:grid-cols-12 gap-6">
      
      <!-- Live Display Mirror -->
      <div class="lg:col-span-7 bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-xl flex flex-col justify-between">
        <div>
          <div class="flex items-center justify-between mb-3">
            <h2 class="font-bold text-sm text-slate-200 flex items-center gap-2">
              <span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
              Live E-Paper Screen Mirror
            </h2>
            <span class="text-xs text-slate-500 font-mono" id="mirror-timestamp">Refreshed just now</span>
          </div>
          
          <div class="relative rounded-xl overflow-hidden border border-slate-800 bg-slate-950 checkerboard flex items-center justify-center p-2 min-h-[260px]">
            <img id="live-screen-img" src="/api/screen.png" alt="Current Screen Output" class="max-w-full h-auto rounded shadow-2xl border border-slate-800 object-contain" />
          </div>
        </div>

        <div class="mt-4 pt-3 border-t border-slate-800/80 flex items-center justify-between text-xs text-slate-400">
          <span id="active-widget-label">Rendering: Weather Dashboard</span>
          <div class="flex items-center space-x-2">
            <span class="px-2 py-0.5 rounded bg-slate-800 text-slate-300 font-mono text-[11px]" id="screen-dim-label">800×480 px</span>
          </div>
        </div>
      </div>

      <!-- Playlists Management -->
      <div data-tab="playlist" class="lg:col-span-5 bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-xl flex flex-col justify-between">
        <div class="space-y-4">
          <div class="flex items-center justify-between">
            <h2 class="font-bold text-sm text-slate-200">Playlists & Rotation Schedules</h2>
            <button onclick="promptCreatePlaylist()" class="text-xs text-orange-400 hover:text-orange-300 font-semibold flex items-center gap-1">
              + New Playlist
            </button>
          </div>

          <!-- Playlist Tabs -->
          <div id="playlist-tabs" class="flex flex-wrap gap-2 pt-1">
            <!-- Dynamically populated playlist tabs -->
          </div>

          <!-- Active Playlist Actions -->
          <div class="bg-slate-950/60 border border-slate-800/80 rounded-xl p-3.5 space-y-2.5">
            <div class="flex items-center justify-between">
              <div class="text-xs text-slate-300 font-semibold flex items-center gap-1.5">
                <span id="current-tab-name">Main Rotation</span>
                <span id="active-badge" class="hidden text-[10px] font-bold px-1.5 py-0.2 rounded bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">ACTIVE</span>
              </div>
              <div class="flex items-center space-x-2">
                <button id="btn-set-active" onclick="setActivePlaylist()" class="text-[11px] px-2.5 py-1 rounded bg-slate-800 hover:bg-slate-700 text-slate-200 font-semibold border border-slate-700">
                  Set as Active
                </button>
                <button onclick="deleteCurrentPlaylist()" id="btn-del-playlist" class="text-[11px] px-2 py-1 rounded hover:bg-rose-950/50 text-slate-500 hover:text-rose-400">
                  Delete
                </button>
              </div>
            </div>
            <p class="text-[11px] text-slate-400">Widgets in this playlist rotate sequentially based on duration intervals.</p>
          </div>
        </div>

        <div class="mt-4 pt-3 border-t border-slate-800 text-xs text-slate-400 flex justify-between">
          <span>Target Interval: <strong id="total-playlist-duration" class="text-slate-200">45 mins</strong></span>
          <span class="text-emerald-400 font-medium">Auto-rotates</span>
        </div>
      </div>

    </div>
{% endblock %}

{% block init %}
(async () => {
  await checkAuthStatus(); await loadStatus(); if (isAuthenticated) { try { renderPlaylistTabs(); } catch (e) {} }
})();
{% endblock %}