{% extends "base.html" %}
{% from 'macros/a11y.html' import skip_link %}

{% block body %}
{{ skip_link("#main-content") }}
<div class="drawer"
     x-data="{
       sidebarOpen: $persist(true).as('dz-sidebar'),
       dark: $persist(false).as('dz-dark-mode'),
       toggleDark() { this.dark = !this.dark; this.applyDark() },
       applyDark() { document.documentElement.setAttribute('data-theme', this.dark ? 'dark' : 'light'); document.documentElement.classList.toggle('dark', this.dark) },
       toggleSidebar(action) {
         if (action === 'open') this.sidebarOpen = true;
         else if (action === 'close') this.sidebarOpen = false;
         else this.sidebarOpen = !this.sidebarOpen;
       }
     }"
     x-init="applyDark(); let mq = window.matchMedia('(min-width: 1024px)'); mq.addEventListener('change', e => { if (e.matches) sidebarOpen = true })"
     :data-dz-sidebar="sidebarOpen ? 'open' : ''">
  <input id="dz-drawer" type="checkbox" class="drawer-toggle" />

  {# Main content area #}
  <div class="drawer-content flex flex-col">
    {# Top bar (mobile + desktop when sidebar collapsed) #}
    {% block navbar %}
    <div class="navbar bg-base-100/85 backdrop-blur-md shadow-sm border-b border-base-300/50 sticky top-0 z-30">
      <div class="flex-none">
        {# Mobile: open drawer #}
        <label for="dz-drawer" class="btn btn-square btn-ghost drawer-button lg:hidden"
               aria-label="Open navigation menu">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-5 h-5 stroke-current" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
          </svg>
        </label>
        {# Desktop collapsed: expand sidebar #}
        <button class="btn btn-square btn-ghost hidden lg:flex"
                x-show="!sidebarOpen"
                @click="toggleSidebar('open')"
                aria-label="Expand sidebar">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="m14 9 3 3-3 3"/></svg>
        </button>
      </div>
      <div class="flex-1">
        <span class="text-lg font-semibold tracking-tight">{{ app_name | default("Dazzle") }}</span>
      </div>
      <div class="flex-none flex items-center gap-2">
        {% if is_authenticated %}
        <span class="text-sm hidden sm:inline truncate max-w-[200px]">{{ user_name or user_email }}</span>
        {% endif %}
        {# Dark mode toggle #}
        <button class="btn btn-ghost btn-sm btn-circle" @click="toggleDark()" aria-label="Toggle dark mode">
          <svg x-show="!dark" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
          </svg>
          <svg x-show="dark" x-cloak xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
          </svg>
        </button>
      </div>
    </div>
    {% endblock navbar %}

    {# Page content #}
    <main id="main-content" class="flex-1 p-4 lg:p-6" tabindex="-1"
          data-dazzle-view="{{ view_name | default('') }}">
      {% block content %}{% endblock %}
    </main>
  </div>

  {# Sidebar #}
  {% block sidebar %}
  <div class="drawer-side z-40">
    <label for="dz-drawer" aria-label="close sidebar" class="drawer-overlay"></label>
    <aside class="bg-base-100 w-64 min-h-full border-r border-base-300 flex flex-col">
      {# Brand + collapse toggle #}
      {% block sidebar_brand %}
      <div class="p-4 border-b border-base-300 flex items-center justify-between">
        <h1 class="text-xl font-bold tracking-tight">{{ app_name | default("Dazzle") }}</h1>
        <button class="btn btn-ghost btn-sm btn-square hidden lg:flex"
                @click="toggleSidebar('close')" aria-label="Collapse sidebar">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="m16 15-3-3 3-3"/></svg>
        </button>
      </div>
      {% endblock sidebar_brand %}

      {# Navigation #}
      {% block sidebar_nav %}
      <nav aria-label="Main navigation">
      <ul class="menu p-4 gap-1 flex-1">
        {# Ungrouped nav items first — workspace home link sorts above groups (#630) #}
        {% for nav_item in nav_items | default([]) %}
        <li>
          <a href="{{ nav_item.route }}"
             hx-get="{{ nav_item.route }}"
             hx-target="#main-content"
             hx-swap="morph:innerHTML transition:true"
             hx-push-url="true"
             preload="mousedown"
             class="{% if current_route == nav_item.route %}active{% endif %}"
             {% if current_route == nav_item.route %}aria-current="page"{% endif %}
             data-dazzle-nav="{{ nav_item.route }}">
            {% if nav_item.icon %}<i data-lucide="{{ nav_item.icon }}" class="w-4 h-4"></i>{% endif %}
            {{ nav_item.label }}
          </a>
        </li>
        {% endfor %}

        {# Collapsible nav groups (v0.38.0) #}
        {% for group in nav_groups | default([]) %}
        <li>
          <details{% if not group.collapsed %} open{% endif %}>
            <summary class="font-medium">
              {% if group.icon %}<i data-lucide="{{ group.icon }}" class="w-4 h-4"></i>{% endif %}
              {{ group.label }}
            </summary>
            <ul>
              {% for child in group.children %}
              <li>
                <a href="{{ child.route }}"
                   hx-get="{{ child.route }}"
                   hx-target="#main-content"
                   hx-swap="morph:innerHTML transition:true"
                   hx-push-url="true"
                   preload="mousedown"
                   class="{% if current_route == child.route %}active{% endif %}"
                   {% if current_route == child.route %}aria-current="page"{% endif %}
                   data-dazzle-nav="{{ child.route }}">
                  {% if child.icon %}<i data-lucide="{{ child.icon }}" class="w-4 h-4"></i>{% endif %}
                  {{ child.label }}
                </a>
              </li>
              {% endfor %}
            </ul>
          </details>
        </li>
        {% endfor %}
      </ul>
      </nav>
      {# Initialize Lucide icons in sidebar #}
      <script>if(window.lucide)lucide.createIcons();</script>
      {% endblock sidebar_nav %}

      {# User section + dark mode toggle #}
      {% block sidebar_footer %}
      <div class="mt-auto border-t border-base-300">
        {% if is_authenticated %}
        <div class="p-4 pb-2">
          <div class="text-sm font-medium truncate" title="{{ user_email }}">{{ user_name or user_email }}</div>
          <form action="/auth/logout" method="post" class="mt-2">
            <button type="submit" class="btn btn-ghost btn-sm w-full justify-start gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4" aria-hidden="true">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" />
              </svg>
              Logout
            </button>
          </form>
        </div>
        {% endif %}

        {# Dark mode toggle (sidebar, visible on desktop) #}
        <div class="p-4 pt-2 hidden lg:block">
          <button class="btn btn-ghost btn-sm w-full justify-start gap-2" @click="toggleDark()"
                  aria-label="Toggle dark mode">
            <svg x-show="!dark" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
            </svg>
            <svg x-show="dark" x-cloak xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-4 h-4" aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
            </svg>
            <span x-text="dark ? 'Light mode' : 'Dark mode'">Dark mode</span>
          </button>
        </div>
      </div>
      {% endblock sidebar_footer %}
    </aside>
  </div>
  {% endblock sidebar %}
</div>
{% endblock %}