<!--
  PocketPaw Dashboard - Base Template

  Changes (2026-02-05):
  - MAJOR REFACTOR: Componentized JS using mixin pattern
  - Added feature module scripts: chat, file-browser, reminders, intentions,
    skills, transparency, remote-access, mission-control
  - Scripts load order: websocket.js -> tools.js -> features/*.js -> app.js
  - Added "Crew" tab (multi-agent control room) with live indicator badge
  - Added missions.html component include

  Changes (2026-02-03):
  - Created as part of frontend modularization
  - Split from monolithic index.html (~1124 lines) into composable templates
  - Added mobile sidebar overlay with backdrop
  - Includes: sidebar, chat, activity, terminal, and modals components
-->
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PocketPaw</title>
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><circle cx='16' cy='16' r='15' fill='%230A84FF'/><g transform='translate(4,4)' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='4' r='2'/><circle cx='3' cy='7' r='2'/><circle cx='19' cy='7' r='2'/><circle cx='7' cy='19' r='2'/><circle cx='15' cy='19' r='2'/><path d='M8 14v.5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2V14a4 4 0 0 0-6 0z'/></g></svg>"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/static/css/styles.css" />

    <!-- UnoCSS Runtime (utilities alongside custom CSS) -->
    <script>
      window.__unocss = {
        theme: {
          colors: {
            accent: '#0A84FF',
            success: '#30D158',
            danger: '#FF453A',
            warning: '#FF9F0A',
          }
        },
        shortcuts: {
          'glass': 'bg-white/10 backdrop-blur-xl border border-white/12 rounded-2xl',
          'glass-dark': 'bg-black/30 backdrop-blur-xl border border-white/12 rounded-2xl',
          'nav-item': 'group flex items-center gap-3.5 px-3.5 py-2.5 rounded-xl transition-all text-sm font-medium w-full text-left bg-transparent text-[var(--text-secondary)] hover:text-white hover:bg-white/10 cursor-pointer border-none',
        }
      }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>

    <!-- Lucide Icons -->
    <script src="https://unpkg.com/lucide@latest"></script>

    <script
      defer
      src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.3/dist/cdn.min.js"
    ></script>
  </head>
  <body x-data="{ ...app(), sidebarOpen: false }" x-init="init()" class="flex h-screen overflow-hidden bg-[var(--bg-color)] text-[var(--text-primary)]">
    
    <!-- Mobile Sidebar Overlay -->
    <div 
        x-show="sidebarOpen" 
        x-transition.opacity 
        class="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm md:hidden"
        @click="sidebarOpen = false"
    ></div>

    {% include "components/sidebar.html" %}

    <!-- Main Content -->
    <main class="flex-1 flex flex-col relative bg-[radial-gradient(circle_at_50%_30%,#1c1c1e_0%,#000000_100%)] overflow-hidden w-full">
      <!-- Top Bar -->
      <header class="absolute top-0 left-0 right-0 z-10 flex justify-between items-center px-4 md:px-8 py-4 bg-gradient-to-b from-black/40 to-transparent pointer-events-none">
        
        <!-- Left: Mobile Toggle & View Switcher -->
        <div class="flex items-center gap-3 pointer-events-auto">
            <button 
                class="md:hidden p-2 -ml-2 rounded-lg text-white/70 hover:bg-white/10 hover:text-white transition-colors"
                @click="sidebarOpen = true"
            >
                <i data-lucide="menu" class="w-6 h-6"></i>
            </button>

            <div class="flex bg-black/20 rounded-[9px] p-0.5 pointer-events-auto backdrop-blur-md border border-white/5">
            <button
                class="px-4 md:px-6 py-1.5 rounded-[7px] text-[13px] font-medium transition-all"
                :class="view === 'chat' ? 'bg-[#636366]/80 text-white shadow-sm' : 'text-[var(--text-secondary)] hover:text-white'"
                @click="view = 'chat'"
            >
                Chat
            </button>
            <button
                class="px-4 md:px-6 py-1.5 rounded-[7px] text-[13px] font-medium transition-all"
                :class="view === 'activity' ? 'bg-[#636366]/80 text-white shadow-sm' : 'text-[var(--text-secondary)] hover:text-white'"
                @click="view = 'activity'"
            >
                Activity
            </button>
            <button
                class="px-4 md:px-6 py-1.5 rounded-[7px] text-[13px] font-medium transition-all hidden sm:block"
                :class="view === 'terminal' ? 'bg-[#636366]/80 text-white shadow-sm' : 'text-[var(--text-secondary)] hover:text-white'"
                @click="view = 'terminal'"
            >
                Terminal
            </button>
            <button
                class="px-4 md:px-6 py-1.5 rounded-[7px] text-[13px] font-medium transition-all flex items-center gap-1.5"
                :class="view === 'missions' ? 'bg-[#636366]/80 text-white shadow-sm' : 'text-[var(--text-secondary)] hover:text-white'"
                @click="view = 'missions'; loadMCData()"
            >
                <span class="relative flex h-2 w-2" x-show="missionControl.stats.active_tasks > 0">
                    <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-accent opacity-75"></span>
                    <span class="relative inline-flex rounded-full h-2 w-2 bg-accent"></span>
                </span>
                Crew
            </button>
            </div>
        </div>

        <!-- Center: Remote Button (Hidden on Mobile) -->
        <div class="flex-1 flex justify-center pointer-events-auto hidden md:flex">
            <button 
                class="flex items-center gap-2 bg-white/5 hover:bg-white/10 border border-white/10 px-4 py-1.5 rounded-full transition-all hover:scale-105 active:scale-95" 
                @click="openRemote()"
            >
                <i data-lucide="smartphone" class="w-4 h-4 text-accent"></i>
                <span class="text-sm font-medium text-white/90">Take Your Paw With You</span>
            </button>
        </div>

        <!-- Right: Agent Toggle -->
        <div class="flex items-center gap-3 pointer-events-auto">
          <span class="text-[13px] font-medium text-[var(--text-secondary)] hidden sm:inline">Agent Mode</span>
          <label class="relative w-[51px] h-[31px]">
            <input
              type="checkbox"
              x-model="agentActive"
              @change="toggleAgent()"
              class="opacity-0 w-0 h-0 peer"
            />
            <span class="absolute inset-0 bg-[#787880]/30 rounded-full transition-colors duration-300 peer-checked:bg-[var(--success-color)]"></span>
            <span class="absolute left-0.5 bottom-0.5 w-[27px] h-[27px] bg-white rounded-full shadow-[0_3px_8px_rgba(0,0,0,0.15)] transition-transform duration-300 peer-checked:translate-x-[20px]"></span>
          </label>
          <!-- Agent Mode Badge -->
          <span
            x-show="agentActive"
            class="hidden sm:inline-flex items-center gap-1.5 px-2.5 py-1 bg-white/10 border border-[var(--glass-border)] rounded-xl text-[11px] font-medium text-[var(--text-secondary)] animate-[badgeFadeIn_0.3s_ease-out]"
            x-text="getAgentModeLabel()"
          ></span>
        </div>
      </header>

      {% include "components/chat.html" %}
      {% include "components/activity.html" %}
      {% include "components/terminal.html" %}
      {% include "components/missions.html" %}
    </main>

    {% include "components/modals.html" %}

    <!-- Toast Container -->
    <div class="toast-container" x-ref="toasts"></div>

    <!-- Scripts -->
    <script src="/static/js/websocket.js"></script>
    <script src="/static/js/tools.js"></script>
    <!-- Feature modules (loaded before app.js) -->
    <script src="/static/js/features/chat.js"></script>
    <script src="/static/js/features/file-browser.js"></script>
    <script src="/static/js/features/reminders.js"></script>
    <script src="/static/js/features/intentions.js"></script>
    <script src="/static/js/features/skills.js"></script>
    <script src="/static/js/features/transparency.js"></script>
    <script src="/static/js/features/remote-access.js"></script>
    <script src="/static/js/features/mission-control.js"></script>
    <!-- Main app (assembles features) -->
    <script src="/static/js/app.js"></script>

    <!-- Initialize Lucide icons -->
    <script>
      // Initial render
      document.addEventListener('DOMContentLoaded', () => {
        lucide.createIcons();
      });

      // Debounced refresh for dynamic content
      let iconTimeout;
      window.refreshIcons = () => {
        clearTimeout(iconTimeout);
        iconTimeout = setTimeout(() => lucide.createIcons(), 50);
      };
    </script>
  </body>
</html>
