{% extends "tungsten/layout/base.html" %}
{% import "tungsten/components/ui.html" as ui %}
{% block body %}
<div class="min-h-full" x-data="{ sidebar: false }" @keydown.window.prevent.ctrl.k="$dispatch('tw-open-search')" @keydown.window.prevent.meta.k="$dispatch('tw-open-search')">
  {# ------------------------------------------------------------ sidebar #}
  <div x-show="sidebar" x-cloak class="fixed inset-0 z-40 bg-gray-950/50 lg:hidden" @click="sidebar = false"></div>
  <aside class="tw-sb-aside fixed inset-y-0 start-0 z-50 flex w-64 -translate-x-full flex-col bg-sidebar-950 text-sidebar-300 transition-transform duration-200 lg:translate-x-0"
         :class="sidebar && '!translate-x-0'">
    <div class="flex h-16 shrink-0 items-center justify-between px-5">
      <a href="{{ panel.url() }}" class="tw-sb-brand flex items-center gap-2.5">{% include "tungsten/components/brand.html" %}</a>
      <button type="button" class="tw-icon-btn text-sidebar-400 hover:text-white lg:hidden" @click="sidebar = false" aria-label="{{ __('Close menu') }}">{{ icon('x', 'h-5 w-5') }}</button>
    </div>
    {% if tenants %}
    <div class="px-3 pb-2">
      {% call(part) ui.dropdown(align='start', width='w-full', classes='w-full') %}
        {% if part == 'trigger' %}
        <button type="button" class="flex w-full items-center gap-3 rounded-lg bg-white/5 px-3 py-2 text-start text-sm text-white ring-1 ring-white/10 hover:bg-white/10">
          <span class="flex h-7 w-7 items-center justify-center rounded-md bg-primary-500 text-xs font-bold">{{ tenant_label[:1] | upper }}</span>
          <span class="flex-1 truncate font-medium">{{ tenant_label }}</span>{{ icon('chevrons-up-down', 'h-4 w-4 text-sidebar-400') }}
        </button>
        {% else %}
          {% for t in tenants %}
          <form method="post" action="{{ panel.url('_tw', 'tenant') }}">
            <input type="hidden" name="_token" value="{{ csrf_token }}"><input type="hidden" name="tenant" value="{{ panel.tenancy.key_of(t) }}">
            <button class="{{ ui.button_classes('gray', 'dropdown') }}">{{ panel.tenancy.label(t) }}{% if t == tenant %}<span class="ms-auto text-primary-600">{{ icon('check', 'h-4 w-4') }}</span>{% endif %}</button>
          </form>
          {% endfor %}
        {% endif %}
      {% endcall %}
    </div>
    {% endif %}
    <div class="tw-sb-label px-3 pb-3">
      <button type="button" @click="$dispatch('tw-open-search')" class="flex w-full items-center gap-2 rounded-lg bg-white/5 px-3 py-2 text-sm text-sidebar-400 ring-1 ring-white/10 transition hover:bg-white/10 hover:text-sidebar-200">
        {{ icon('search', 'h-4 w-4') }}<span class="flex-1 text-start">{{ __('Search menu...') }}</span><kbd class="rounded border border-white/10 px-1.5 text-xs">⌘K</kbd>
      </button>
    </div>
    <nav class="flex-1 space-y-5 overflow-y-auto px-3 pb-4" aria-label="{{ __('Main') }}">
      {{ panel.hooks('sidebar.nav.start', ctx) }}
      {% for group in navigation %}
      <div x-data="{ open: true }">
        {% if group.label %}
        <button type="button" class="tw-sb-label mb-1 flex w-full items-center justify-between px-3 text-xs font-semibold uppercase tracking-wider text-sidebar-500 hover:text-sidebar-300" @click="open = !open">
          <span class="flex items-center gap-2">{{ icon(group.icon, 'h-4 w-4') }}{{ __(group.label) }}</span>
          <span class="transition" :class="open ? '' : '-rotate-90'">{{ icon('chevron-down', 'h-3.5 w-3.5') }}</span>
        </button>
        {% endif %}
        <ul class="space-y-0.5" x-show="open">
          {% for item in group.items %}
          <li x-data="{ expanded: {{ 'true' if item.expanded else 'false' }} }">
            <div class="relative flex items-center">
              {% if item.active %}<span class="absolute inset-y-1 start-0 w-0.5 rounded-full bg-primary-500"></span>{% endif %}
              <a href="{{ item.url }}" {% if item.new_tab %}target="_blank"{% endif %}
                 class="tw-nav-item flex-1 {{ 'tw-nav-item-active' if item.active }}" {% if item.active %}aria-current="page"{% endif %} title="{{ __(item.label) }}">
                {{ icon(item.icon, 'h-5 w-5 shrink-0') }}<span class="tw-sb-label flex-1 truncate">{{ __(item.label) }}</span>
                {% if item.badge is not none and item.badge != '' %}<span class="tw-sb-label contents">{{ ui.count_pill(item.badge, item.badge_color) }}</span>{% endif %}
              </a>
              {% if item.children %}
              <button type="button" class="tw-sb-label absolute end-1 tw-icon-btn h-7 w-7 text-sidebar-400 hover:text-white" @click="expanded = !expanded" aria-label="{{ __('Toggle') }}">
                <span class="transition" :class="expanded ? 'rotate-180' : ''">{{ icon('chevron-down', 'h-4 w-4') }}</span>
              </button>
              {% endif %}
            </div>
            {% if item.children %}
            <ul class="tw-sb-label ms-5 mt-0.5 space-y-0.5 border-s border-white/10 ps-3" x-show="expanded" {% if not item.expanded %}x-cloak{% endif %}>
              {% for child in item.children %}
              <li><a href="{{ child.url }}" class="tw-nav-item py-1.5 {{ 'tw-nav-item-active' if child.active }}">
                <span class="flex-1 truncate">{{ __(child.label) }}</span>{% if child.badge is not none and child.badge != '' %}{{ ui.count_pill(child.badge, child.badge_color) }}{% endif %}
              </a></li>
              {% endfor %}
            </ul>
            {% endif %}
          </li>
          {% endfor %}
        </ul>
      </div>
      {% endfor %}
      {{ panel.hooks('sidebar.nav.end', ctx) }}
    </nav>
    <div class="tw-sb-label p-3">
      {% if panel.sidebar_footer is not none %}{{ panel.sidebar_footer }}{% else %}
      <div class="flex items-center gap-3 rounded-xl bg-white/5 p-3 ring-1 ring-white/10">
        <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-primary-500/20 text-primary-400">{{ icon('crown', 'h-5 w-5') }}</span>
        <div class="min-w-0 flex-1">
          <p class="truncate text-sm font-semibold text-white">{{ panel.brand_name }}</p>
          <p class="text-xs text-sidebar-400">v{{ version }}</p>
        </div>
      </div>
      {% endif %}
      {{ panel.hooks('sidebar.footer', ctx) }}
    </div>
  </aside>

  {# ------------------------------------------------------------ main #}
  <div class="tw-sb-main lg:ps-64">
    <header class="sticky top-0 z-30 flex h-16 items-center gap-x-4 border-b border-gray-200 bg-white/90 px-4 backdrop-blur sm:px-6 lg:px-8 dark:border-white/10 dark:bg-gray-900/90">
      <button type="button" class="tw-icon-btn text-gray-500 lg:hidden" @click="sidebar = true" aria-label="{{ __('Open menu') }}">{{ icon('menu', 'h-5 w-5') }}</button>
      {% if panel.sidebar_collapsible %}
      <button type="button" class="tw-icon-btn hidden text-gray-500 lg:inline-flex" onclick="twToggleSidebar()" aria-label="{{ __('Collapse sidebar') }}" title="{{ __('Collapse sidebar') }}">{{ icon('panel-left', 'h-5 w-5') }}</button>
      {% endif %}
      {{ panel.hooks('topbar.start', ctx) }}
      {% if panel.global_search_enabled %}
      {% include "tungsten/components/global-search.html" %}
      {% endif %}
      <div class="ms-auto flex items-center gap-x-2 sm:gap-x-3">
        {{ panel.hooks('topbar.end', ctx) }}
        {% if panel.dark_mode %}
        <div class="hidden items-center rounded-full bg-gray-100 p-1 sm:flex dark:bg-white/5" x-data>
          <button type="button" class="rounded-full p-1.5 transition" :class="$store.theme.mode === 'light' ? 'bg-white text-primary-600 shadow-sm dark:bg-white/10' : 'text-gray-400 hover:text-gray-600'" @click="$store.theme.set('light')" title="{{ __('Light') }}">{{ icon('sun', 'h-4 w-4') }}</button>
          <button type="button" class="rounded-full p-1.5 transition" :class="$store.theme.mode === 'dark' ? 'bg-white text-primary-600 shadow-sm dark:bg-white/10' : 'text-gray-400 hover:text-gray-600'" @click="$store.theme.set('dark')" title="{{ __('Dark') }}">{{ icon('moon', 'h-4 w-4') }}</button>
          <button type="button" class="rounded-full p-1.5 transition" :class="$store.theme.mode === 'system' ? 'bg-white text-primary-600 shadow-sm dark:bg-white/10' : 'text-gray-400 hover:text-gray-600'" @click="$store.theme.set('system')" title="{{ __('System') }}">{{ icon('monitor', 'h-4 w-4') }}</button>
        </div>
        {% endif %}
        {% if user and panel.database_notifications %}
        {% include "tungsten/components/notification-bell.html" %}
        {% endif %}
        {% if user %}
        {% call(part) ui.dropdown(width='w-60') %}
          {% if part == 'trigger' %}
          <button type="button" class="flex items-center gap-x-3 rounded-full p-0.5 pe-2 transition hover:bg-gray-100 dark:hover:bg-white/5">
            {{ ui.avatar(user_name, user_avatar) }}
            <span class="hidden text-start md:block">
              <span class="block text-sm font-semibold leading-tight text-gray-950 dark:text-white">{{ user_name }}</span>
              {% if user_role %}<span class="block text-xs text-gray-500 dark:text-gray-400">{{ user_role }}</span>{% endif %}
            </span>
            <span class="hidden text-gray-400 md:block">{{ icon('chevron-down', 'h-4 w-4') }}</span>
          </button>
          {% else %}
          <div class="border-b border-gray-100 px-3 py-2 dark:border-white/10">
            <p class="truncate text-sm font-semibold">{{ user_name }}</p>
            <p class="truncate text-xs text-gray-500">{{ user | attr(panel.auth.email_field) or '' }}</p>
          </div>
          <div class="py-1">
            {% if panel.auth.profile %}<a href="{{ panel.url('profile') }}" class="{{ ui.button_classes('gray', 'dropdown') }}">{{ icon('user', 'h-4 w-4') }}{{ __('My profile') }}</a>{% endif %}
            {% for item in user_menu_items %}<a href="{{ item.url }}" class="{{ ui.button_classes('gray', 'dropdown') }}">{{ icon(item.icon, 'h-4 w-4') }}{{ __(item.label) }}</a>{% endfor %}
            {{ panel.hooks('user-menu.items', ctx) }}
          </div>
          {% if panel.locales | length > 1 %}
          <div class="border-t border-gray-100 py-1 dark:border-white/10" data-tw-languages>
            <p class="flex items-center gap-2 px-3 pb-1 pt-1.5 text-xs font-semibold uppercase tracking-wide text-gray-400">{{ icon('languages', 'h-3.5 w-3.5') }}{{ __('Language') }}</p>
            {% for lang in panel.language_options() %}
            <form method="post" action="{{ panel.url('_tw', 'locale') }}">
              <input type="hidden" name="_token" value="{{ csrf_token }}"><input type="hidden" name="locale" value="{{ lang.code }}">
              <button type="submit" class="{{ ui.button_classes('gray', 'dropdown') }}" lang="{{ lang.code }}">{{ lang.label }}{% if lang.code == current_locale() %}<span class="ms-auto text-primary-600">{{ icon('check', 'h-4 w-4') }}</span>{% endif %}</button>
            </form>
            {% endfor %}
          </div>
          {% endif %}
          <form method="post" action="{{ panel.url('logout') }}" class="border-t border-gray-100 pt-1 dark:border-white/10">
            <input type="hidden" name="_token" value="{{ csrf_token }}">
            <button type="submit" class="{{ ui.button_classes('danger', 'dropdown') }}">{{ icon('log-out', 'h-4 w-4') }}{{ __('Sign out') }}</button>
          </form>
          {% endif %}
        {% endcall %}
        {% endif %}
      </div>
    </header>

    <main class="px-4 py-6 sm:px-6 lg:px-8 lg:py-8">
      <div class="mx-auto max-w-screen-2xl">
        {{ panel.hooks('content.start', ctx) }}
        {% block content %}{% endblock %}
        {{ panel.hooks('content.end', ctx) }}
      </div>
    </main>
  </div>
</div>
{% endblock %}