{% extends "base.html" %}

{% block title %}{{ page_title | default("Dazzle Console") }}{% endblock %}

{% block head_extra %}
<style>
  .console-sidebar .menu li a.active {
    background-color: oklch(var(--p));
    color: oklch(var(--pc));
  }
  .stat-card { transition: all 0.2s ease; }
  .stat-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
  .htmx-indicator { display: none; }
  .htmx-request .htmx-indicator { display: inline-block; }
  .htmx-request.htmx-indicator { display: inline-block; }
</style>
{% endblock %}

{% block body %}
<div class="drawer lg:drawer-open">
  <input id="console-drawer" type="checkbox" class="drawer-toggle" />

  {# Main content #}
  <div class="drawer-content flex flex-col">
    {# Top bar (mobile) #}
    <div class="navbar bg-base-100 shadow-sm lg:hidden">
      <div class="flex-none">
        <label for="console-drawer" class="btn btn-square btn-ghost drawer-button">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </label>
      </div>
      <div class="flex-1">
        <span class="text-lg font-semibold">{{ app_name | default("Dazzle Console") }}</span>
      </div>
      {% if username %}
      <div class="flex-none">
        <span class="text-sm opacity-70">{{ username }}</span>
      </div>
      {% endif %}
    </div>

    {# Page content #}
    <main class="flex-1 p-4 lg:p-6" id="console-content">
      {% block content %}{% endblock %}
    </main>
  </div>

  {# Sidebar #}
  <div class="drawer-side z-40">
    <label for="console-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
    <aside class="console-sidebar bg-base-100 w-64 min-h-full border-r border-base-300 flex flex-col">
      {# Brand #}
      <div class="p-4 border-b border-base-300">
        <h1 class="text-xl font-bold">Dazzle Console</h1>
        <p class="text-xs opacity-60 mt-1">Founder Control Plane</p>
      </div>

      {# Navigation #}
      <ul class="menu p-4 gap-1 flex-1">
        {% for item in nav_items | default([]) %}
        <li>
          <a href="{{ item.route }}"
             class="{% if current_route == item.route %}active{% endif %}"
             hx-boost="true">
            {{ item.label }}
          </a>
        </li>
        {% endfor %}
      </ul>

      {# User / Logout #}
      {% if username %}
      <div class="p-4 border-t border-base-300">
        <div class="flex items-center justify-between">
          <span class="text-sm font-medium">{{ username }}</span>
          <a href="/_console/logout" class="btn btn-ghost btn-xs">Logout</a>
        </div>
      </div>
      {% endif %}
    </aside>
  </div>
</div>
{% endblock %}