<!--
  PocketPaw Dashboard - Sidebar Component

  Changes (2026-02-05):
  - Removed Mission Control button (moved to top tab bar as full view)

  Changes (2026-02-03):
  - Extracted from monolithic index.html
  - Added mobile slide-over drawer pattern with -translate-x-full/translate-x-0
  - Added close button for mobile view
  - Sidebar closes on nav item click (sidebarOpen = false)
-->
<!-- Sidebar (Desktop: Static, Mobile: Slide-over) -->
<aside 
    class="fixed inset-y-0 left-0 z-50 w-72 flex flex-col gap-8 px-5 py-6 bg-[var(--glass-bg)] backdrop-blur-xl border-r border-[var(--glass-border)] transition-transform duration-300 md:relative md:translate-x-0"
    :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'"
>
  <div class="logo flex items-center gap-3 pl-2">
    <i data-lucide="paw-print" class="w-6 h-6 text-accent"></i>
    <span class="text-xl font-semibold tracking-tight">PocketPaw</span>
    <button class="ml-auto md:hidden" @click="sidebarOpen = false">
        <i data-lucide="x" class="w-5 h-5 text-white/50"></i>
    </button>
  </div>

  <!-- Tools Section -->
  <nav class="flex flex-col gap-1.5">
    <h3 class="nav-title text-[11px] uppercase tracking-wider text-[var(--text-secondary)] font-semibold mb-2.5 pl-3">Tools</h3>
    <button class="nav-item" @click="runTool('fetch'); sidebarOpen = false">
      <i data-lucide="folder" class="w-5 h-5"></i>
      <span>Files</span>
    </button>
    <button class="nav-item" @click="runTool('screenshot'); sidebarOpen = false">
      <i data-lucide="camera" class="w-5 h-5"></i>
      <span>Screenshot</span>
    </button>
    <button class="nav-item" @click="openReminders(); sidebarOpen = false">
      <i data-lucide="bell" class="w-5 h-5"></i>
      <span>Reminders</span>
      <span
        x-show="reminders.length > 0"
        class="ml-auto bg-accent/20 text-accent text-xs px-2 py-0.5 rounded-full"
        x-text="reminders.length"
      ></span>
    </button>
    <button class="nav-item" @click="openIntentions(); sidebarOpen = false">
      <i data-lucide="target" class="w-5 h-5"></i>
      <span>Intentions</span>
      <span
        x-show="intentions.filter(i => i.enabled).length > 0"
        class="ml-auto bg-success/20 text-success text-xs px-2 py-0.5 rounded-full"
        x-text="intentions.filter(i => i.enabled).length"
      ></span>
    </button>
    <button class="nav-item" @click="openSkills(); sidebarOpen = false">
      <i data-lucide="wand-2" class="w-5 h-5"></i>
      <span>Skills</span>
      <span
        x-show="skills.length > 0"
        class="ml-auto bg-warning/20 text-warning text-xs px-2 py-0.5 rounded-full"
        x-text="skills.length"
      ></span>
    </button>
    <button class="nav-item !text-[var(--danger-color)] hover:!bg-[var(--danger-color)]/10" @click="runTool('panic'); sidebarOpen = false">
      <i data-lucide="octagon-x" class="w-5 h-5"></i>
      <span>Panic</span>
    </button>
  </nav>

  <!-- Transparency Section -->
  <nav class="flex flex-col gap-1.5">
    <h3 class="nav-title text-[11px] uppercase tracking-wider text-[var(--text-secondary)] font-semibold mb-2.5 pl-3">Brain</h3>
    <button class="nav-item" @click="openIdentity(); sidebarOpen = false">
      <i data-lucide="fingerprint" class="w-5 h-5"></i>
      <span>Identity</span>
    </button>
    <button class="nav-item" @click="openMemory(); sidebarOpen = false">
      <i data-lucide="brain-circuit" class="w-5 h-5"></i>
      <span>Memory</span>
    </button>
    <button class="nav-item" @click="openAudit(); sidebarOpen = false">
      <i data-lucide="shield-check" class="w-5 h-5"></i>
      <span>Audit Log</span>
    </button>
  </nav>

  <!-- Config Section -->
  <nav class="flex flex-col gap-1.5">
    <h3 class="nav-title text-[11px] uppercase tracking-wider text-[var(--text-secondary)] font-semibold mb-2.5 pl-3">Config</h3>
    <button class="nav-item" @click="showSettings = true; sidebarOpen = false">
      <i data-lucide="settings" class="w-5 h-5"></i>
      <span>Settings</span>
    </button>
  </nav>

  <!-- System Status Widget -->
  <div class="mt-auto p-4 bg-black/30 backdrop-blur-xl border border-white/10 rounded-2xl">
    <div class="grid grid-cols-2 gap-4">
      <div class="flex items-center gap-2">
        <i data-lucide="cpu" class="w-4 h-4 text-white/40"></i>
        <div class="flex flex-col">
          <span class="text-xs text-white/50">CPU</span>
          <span class="text-sm font-mono" x-text="typeof status.cpu === 'number' ? status.cpu + '%' : status.cpu"></span>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <i data-lucide="memory-stick" class="w-4 h-4 text-white/40"></i>
        <div class="flex flex-col">
          <span class="text-xs text-white/50">RAM</span>
          <span class="text-sm font-mono" x-text="typeof status.ram === 'number' ? status.ram + '%' : status.ram"></span>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <i data-lucide="hard-drive" class="w-4 h-4 text-white/40"></i>
        <div class="flex flex-col">
          <span class="text-xs text-white/50">Disk</span>
          <span class="text-sm font-mono" x-text="typeof status.disk === 'number' ? status.disk + '%' : status.disk"></span>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <i data-lucide="battery-medium" class="w-4 h-4 text-white/40"></i>
        <div class="flex flex-col">
          <span class="text-xs text-white/50">Bat</span>
          <span class="text-sm font-mono" x-text="typeof status.battery === 'number' ? status.battery + '%' : status.battery"></span>
        </div>
      </div>
    </div>
  </div>
</aside>
