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

{% block body %}
{{ skip_link("#main-content") }}
{# Contract: ~/.claude/skills/ux-architect/components/app-shell.md (UX-031) #}
<div 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' : ''">

  {# Main content wrapper — padding offsets for the sidebar on desktop #}
  <div class="flex flex-col min-h-screen transition-[padding] duration-200 [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
       :class="sidebarOpen ? 'lg:pl-64' : 'lg:pl-0'">

    {# Top bar (mobile + desktop when sidebar collapsed) #}
    {% block navbar %}
    <div class="sticky top-0 z-30 flex items-center h-14 px-4 lg:px-6 gap-3 bg-[hsl(var(--background)/0.85)] backdrop-blur-md border-b border-[hsl(var(--border)/0.5)] shadow-[0_1px_3px_rgb(0_0_0/0.04)]">
      <div class="flex-none">
        {# Mobile: open drawer #}
        <button type="button"
                class="h-8 w-8 inline-flex items-center justify-center rounded-[4px] text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)] lg:hidden"
                @click="toggleSidebar()"
                aria-label="Open navigation menu">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="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>
        </button>
        {# Desktop collapsed: expand sidebar #}
        <button type="button"
                class="h-8 w-8 items-center justify-center rounded-[4px] text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)] hidden lg:inline-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>
          <span class="sr-only">Expand sidebar</span>
        </button>
      </div>
      <div class="flex-1 min-w-0">
        <span class="text-[16px] font-semibold tracking-tight text-[hsl(var(--foreground))]">{{ app_name | default("Dazzle") }}</span>
      </div>
      <div class="flex-none flex items-center gap-2">
        {% if is_authenticated %}
        <span class="text-[13px] text-[hsl(var(--muted-foreground))] hidden sm:inline truncate max-w-[200px]">{{ user_name or user_email }}</span>
        {% endif %}
        {# Dark mode toggle #}
        <button type="button"
                class="h-8 w-8 inline-flex items-center justify-center rounded-[4px] text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
                @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>
          <span class="sr-only">Toggle dark mode</span>
        </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>

  {# Overlay backdrop — mobile only, shown when sidebar open #}
  <div x-show="sidebarOpen"
       x-transition:enter="transition-opacity ease-out duration-150"
       x-transition:enter-start="opacity-0"
       x-transition:enter-end="opacity-100"
       x-transition:leave="transition-opacity ease-in duration-100"
       x-transition:leave-start="opacity-100"
       x-transition:leave-end="opacity-0"
       @click="toggleSidebar('close')"
       class="fixed inset-0 bg-black/40 z-30 lg:hidden"
       style="display: none"
       aria-label="Close sidebar overlay"></div>

  {# Sidebar #}
  {% block sidebar %}
  <aside class="fixed inset-y-0 left-0 z-40 w-64 bg-[hsl(var(--card))] border-r border-[hsl(var(--border))] flex flex-col transform transition-transform duration-200 [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
         :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'">
    {# Brand + collapse toggle #}
    {% block sidebar_brand %}
    <div class="p-4 border-b border-[hsl(var(--border))] flex items-center justify-between">
      <h1 class="text-[16px] font-semibold tracking-tight text-[hsl(var(--foreground))]">{{ app_name | default("Dazzle") }}</h1>
      <button type="button"
              class="h-8 w-8 items-center justify-center rounded-[4px] text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)] hidden lg:inline-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>
        <span class="sr-only">Collapse sidebar</span>
      </button>
    </div>
    {% endblock sidebar_brand %}

    {# Navigation #}
    {% block sidebar_nav %}
    <nav aria-label="Main navigation" class="flex-1 overflow-y-auto">
    <ul class="p-3 space-y-0.5">
      {# 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="flex items-center gap-2 px-3 py-1.5 rounded-[4px] text-[13px] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]
             {% if current_route == nav_item.route %}
               bg-[hsl(var(--muted))] text-[hsl(var(--foreground))] font-medium
             {% else %}
               text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))]
             {% 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 shrink-0" aria-hidden="true"></i>{% endif %}
          <span class="truncate">{{ nav_item.label }}</span>
        </a>
      </li>
      {% endfor %}

      {# Collapsible nav groups #}
      {% for group in nav_groups | default([]) %}
      <li>
        <details{% if not group.collapsed %} open{% endif %} class="group">
          <summary class="flex items-center gap-2 px-3 py-1.5 rounded-[4px] text-[13px] font-medium text-[hsl(var(--foreground))] cursor-pointer hover:bg-[hsl(var(--muted))] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)] list-none">
            {% if group.icon %}<i data-lucide="{{ group.icon }}" class="w-4 h-4 shrink-0" aria-hidden="true"></i>{% endif %}
            <span class="truncate">{{ group.label }}</span>
          </summary>
          <ul class="pl-4 mt-0.5 space-y-0.5">
            {% 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="flex items-center {% if child.icon %}gap-2 {% endif %}px-3 py-1.5 rounded-[4px] text-[13px] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]
                   {% if current_route == child.route %}
                     bg-[hsl(var(--muted))] text-[hsl(var(--foreground))] font-medium
                   {% else %}
                     text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))]
                   {% 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 shrink-0" aria-hidden="true"></i>{% endif %}
                <span class="truncate">{{ child.label }}</span>
              </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-[hsl(var(--border))]">
      {% if is_authenticated %}
      <div class="p-3 pb-1">
        <div class="text-[13px] font-medium text-[hsl(var(--foreground))] truncate px-3" title="{{ user_email }}">{{ user_name or user_email }}</div>
        {# HTMX POST (not a <form>) — the base.html htmx:configRequest listener injects the X-CSRF-Token header automatically. #}
        <div class="mt-1">
          <button type="button"
                  hx-post="/auth/logout"
                  hx-target="body"
                  hx-swap="innerHTML"
                  class="flex items-center gap-2 w-full px-3 py-1.5 rounded-[4px] text-[13px] text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]">
            <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 shrink-0" 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>
        </div>
      </div>
      {% endif %}

      {# Dark mode toggle (sidebar, visible on desktop) #}
      <div class="p-3 pt-1 hidden lg:block">
        <button type="button"
                class="flex items-center gap-2 w-full px-3 py-1.5 rounded-[4px] text-[13px] text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--muted))] hover:text-[hsl(var(--foreground))] transition-colors duration-[80ms] [transition-timing-function:cubic-bezier(0.2,0,0,1)]"
                @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 shrink-0" 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 shrink-0" 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>
  {% endblock sidebar %}
</div>
{% endblock %}