<!DOCTYPE html>
<html lang="en" class="dark" data-theme-mode="{{ dashboard_theme_mode }}">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{% block title %}{{ dashboard_title }}{% endblock %}</title>

  {% if dashboard_favicon_url %}
  <link rel="icon" href="{{ dashboard_favicon_url }}" />
  {% else %}
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>" />
  {% endif %}

  <!-- Inter font -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400;500;600;700;900&display=swap" rel="stylesheet" />

  <!-- Material Symbols Outlined -->
  <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />

  <!-- Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            primary: {
              DEFAULT: '#0d7ff2',
              dark: '#0d7ff2',
            },
            background: {
              dark: '#101922',
              surface: '#161b26',
            },
            border: {
              dark: '#2d333b',
            }
          },
        },
      },
    }
  </script>

  <!-- Design tokens + component styles -->
  <link rel="stylesheet" href="/dashboard/static/dashboard/tokens.css" />
  <link rel="stylesheet" href="/dashboard/static/dashboard/app.css" />

  <!-- HTMX -->
  <meta name="htmx-config" content='{"allowScriptTags":true}' />
  <script src="https://unpkg.com/htmx.org@2.0.4/dist/htmx.min.js" defer></script>

  <!-- CSS injection for custom config -->
  <style>
    :root {
      --color-primary: {{ dashboard_colors.primary }};
      --color-accent: {{ dashboard_colors.accent }};
    }
    .layout {
       display: flex;
       height: 100vh;
       overflow: hidden;
       background-color: var(--color-bg);
    }
    .material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }
  </style>

  {% block extra_head %}{% endblock %}
</head>
<body class="bg-background-dark text-slate-200 antialiased">
<div class="layout">

  <!-- Sidebar Navigation (Premium Style) -->
  <aside class="w-64 flex-shrink-0 flex flex-col border-r border-border-dark/30 bg-background-dark/50 backdrop-blur-xl sidebar z-30">
    <div class="p-6 flex items-center gap-3 sidebar-branding">
      {% if dashboard_icon_url %}
      <img src="{{ dashboard_icon_url }}" alt="{{ dashboard_title }}" class="w-10 h-10 rounded-xl object-contain">
      {% else %}
      <div class="w-10 h-10 rounded-xl bg-primary flex items-center justify-center text-white shadow-lg shadow-primary/20">
        <span class="material-symbols-outlined text-2xl">hub</span>
      </div>
      {% endif %}
      <div>
        <h1 class="font-bold text-base leading-tight dark:text-white">{{ dashboard_title }}</h1>
        <p class="text-[10px] font-bold text-slate-500 uppercase tracking-widest">{{ dashboard_subtitle }}</p>
      </div>
    </div>

    <nav class="flex-1 px-4 space-y-1 sidebar-nav pt-4">
      <a href="/dashboard/" class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all group {% if active_page == 'agents' %}bg-primary/10 text-primary border border-primary/20 shadow-sm{% else %}text-slate-400 hover:bg-white/5 hover:text-white{% endif %}">
        <span class="material-symbols-outlined text-xl {% if active_page == 'agents' %}text-primary{% else %}text-slate-500 group-hover:text-white{% endif %}">smart_toy</span>
        <span class="text-sm font-semibold">Agents</span>
      </a>

      {% if current_user and current_user.is_admin %}
      <a href="/dashboard/executions" class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all group {% if active_page == 'executions' %}bg-primary/10 text-primary border border-primary/20 shadow-sm{% else %}text-slate-400 hover:bg-white/5 hover:text-white{% endif %}">
        <span class="material-symbols-outlined text-xl {% if active_page == 'executions' %}text-primary{% else %}text-slate-500 group-hover:text-white{% endif %}">terminal</span>
        <span class="text-sm font-semibold">Executions</span>
      </a>
      {% endif %}

      <a href="/dashboard/conversations" class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all group {% if active_page == 'conversations' %}bg-primary/10 text-primary border border-primary/20 shadow-sm{% else %}text-slate-400 hover:bg-white/5 hover:text-white{% endif %}">
        <span class="material-symbols-outlined text-xl {% if active_page == 'conversations' %}text-primary{% else %}text-slate-500 group-hover:text-white{% endif %}">forum</span>
        <span class="text-sm font-semibold">Conversations</span>
      </a>

      {% if current_user and current_user.is_admin %}
      <a href="/dashboard/schedules" class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all group {% if active_page == 'schedules' %}bg-primary/10 text-primary border border-primary/20 shadow-sm{% else %}text-slate-400 hover:bg-white/5 hover:text-white{% endif %}">
        <span class="material-symbols-outlined text-xl {% if active_page == 'schedules' %}text-primary{% else %}text-slate-500 group-hover:text-white{% endif %}">calendar_month</span>
        <span class="text-sm font-semibold">Schedules</span>
      </a>

      <a href="/dashboard/analytics" class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all group {% if active_page == 'analytics' %}bg-primary/10 text-primary border border-primary/20 shadow-sm{% else %}text-slate-400 hover:bg-white/5 hover:text-white{% endif %}">
        <span class="material-symbols-outlined text-xl {% if active_page == 'analytics' %}text-primary{% else %}text-slate-500 group-hover:text-white{% endif %}">bar_chart</span>
        <span class="text-sm font-semibold">Analytics</span>
      </a>
      {% endif %}

      <a href="/dashboard/notifications" class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all group {% if active_page == 'notifications' %}bg-primary/10 text-primary border border-primary/20 shadow-sm{% else %}text-slate-400 hover:bg-white/5 hover:text-white{% endif %}">
        <span class="material-symbols-outlined text-xl {% if active_page == 'notifications' %}text-primary{% else %}text-slate-500 group-hover:text-white{% endif %}">notifications</span>
        <span class="text-sm font-semibold">Notifications</span>
      </a>

      <a href="/dashboard/chat" class="flex items-center gap-3 px-3 py-2.5 rounded-xl transition-all group {% if active_page == 'chat' %}bg-primary/10 text-primary border border-primary/20 shadow-sm{% else %}text-slate-400 hover:bg-white/5 hover:text-white{% endif %}">
        <span class="material-symbols-outlined text-xl {% if active_page == 'chat' %}text-primary{% else %}text-slate-500 group-hover:text-white{% endif %}">chat_bubble</span>
        <span class="text-sm font-semibold">Chat</span>
      </a>
    </nav>

    <div class="sidebar-footer p-4 border-t border-border-dark/30">
      <form action="/dashboard/logout" method="post">
        <button type="submit" class="w-full h-12 flex items-center justify-center gap-2 bg-white/5 text-slate-300 rounded-xl py-3 text-sm font-bold transition-all hover:bg-white/10 hover:text-white border border-white/5">
          <span class="material-symbols-outlined text-lg">logout</span>
          Sign out
        </button>
      </form>
    </div>
  </aside>

  <!-- Mobile sidebar overlay -->
  <div class="sidebar-overlay fixed inset-0 bg-black/50 backdrop-blur-sm z-40 hidden" id="sidebar-overlay"></div>

  <!-- Main Area -->
  <main class="main flex-1 flex flex-col overflow-hidden bg-background-dark/50">
    <div class="topbar h-16 border-b border-border-dark/30 flex items-center justify-between px-8 bg-background-dark backdrop-blur-xl z-20">
      <div class="flex items-center gap-4">
        <button class="sidebar-toggle md:hidden" id="sidebar-toggle" aria-label="Toggle navigation">
          <span class="material-symbols-outlined">menu</span>
        </button>
        
        <!-- Extensible Brand/Heading Area -->
        {% block topbar_left %}
        <div class="flex items-center gap-4">
          <h2 class="text-base font-black uppercase tracking-widest text-slate-400">
            {% block page_heading %}{{ active_page|title }}{% endblock %}
          </h2>
          <div class="flex items-center gap-1.5 px-2.5 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20">
            <div class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></div>
            <span class="text-[9px] font-bold text-emerald-500 uppercase tracking-wider">System Healthy</span>
          </div>
        </div>
        {% endblock %}
      </div>

      <div class="topbar-actions flex items-center gap-6">
        {% block topbar_middle %}
        <div class="relative hidden sm:block group">
          <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-lg text-slate-500 group-focus-within:text-primary transition-colors">search</span>
          <input type="text" placeholder="Global search..." class="pl-10 pr-4 py-2 rounded-xl bg-white/5 border-white/5 text-sm focus:ring-2 focus:ring-primary/20 focus:bg-white/10 w-48 lg:w-64 transition-all placeholder:text-slate-600 font-medium font-sans" />
        </div>
        {% endblock %}

        <div class="flex items-center gap-4">
          {% block topbar_right_actions %}{% endblock %}
          
          <button id="theme-toggle" class="p-2 text-slate-500 hover:bg-white/5 rounded-xl transition-colors">
            <span class="material-symbols-outlined theme-icon-sun">light_mode</span>
            <span class="material-symbols-outlined theme-icon-moon hidden">dark_mode</span>
          </button>

          {% if current_user and current_user.is_admin %}
          <span class="px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wider rounded bg-primary/20 text-primary border border-primary/30">Admin</span>
          {% endif %}
          <div class="h-9 w-9 rounded-xl bg-gradient-to-br from-primary to-purple-600 p-[1px]">
            <div class="h-full w-full rounded-xl bg-background-dark flex items-center justify-center overflow-hidden">
               <img src="https://ui-avatars.com/api/?name={{ current_user.username if current_user else 'Admin' }}&background=0b0f1a&color=fff" alt="User Profile" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="page-content flex-1 overflow-y-auto">
      {% block content %}{% endblock %}
    </div>
  </main>

</div>

<!-- App JS -->
<script src="/dashboard/static/dashboard/app.js" defer></script>
{% block extra_scripts %}{% endblock %}
</body>
</html>
