{# Sidebar, ported from shadcn/ui's sidebar-07 block. Three regions, as
   the block has them: the brand header, one group of menu items (a
   category becomes a Collapsible with a sub-menu), and a footer showing
   who is signed in. Plus the rail on the outer edge.

   `collapsed` (the desktop icon rail) and `sidebarOpen` (the mobile
   sheet) both come from base.html's provider, and are separate axes on
   purpose: a phone gets the overlay, never the rail.

   Collapsing hides labels rather than re-templating, so there is one
   copy of the nav. Each label sits in an `x-show="!collapsed"` span
   while the icon stays put -- nav-item's p-2 plus a size-4 icon is
   exactly the 3rem collapsed width, so nothing slides sideways as the
   width animates.

   md:sticky, not md:static, undoes the sheet's `fixed`: the rail is
   absolutely positioned against the aside, and a static aside handed it
   to the page, parking it on the viewport's right edge.

   Included, not a macro, so it shares base.html's ambient context.
   `icon` rides in on that context; csrf_field does not, since base.html
   has no form of its own, so the sign-out form imports it here. #}
{% from "admin/components/csrf-field.html" import csrf_field %}

{# The footer's identity block: avatar, name and role. Its own macro
   because the footer renders it in two shapes -- as the trigger of the
   user menu, and, with no session to sign out of, as a plain row with
   nothing to open.

   Principal names are never translated, except the framework's own
   default (AllowAllAuthenticator's "Anonymous"). #}
{% macro sidebar_user(principal) %}
{% set display_name = principal.display_name or principal.id %}
{% if display_name == "Anonymous" %}{% set display_name = _(display_name) %}{% endif %}
<span class="{{ ui('avatar') }} size-8 rounded-lg">
  <span class="{{ ui('avatar', 'fallback') }} rounded-lg">{{ display_name[:2] | upper }}</span>
</span>
<span x-show="!collapsed" class="grid flex-1 text-left leading-tight">
  <span class="truncate font-medium text-foreground">{{ display_name }}</span>
  <span class="truncate text-xs text-muted-foreground">
    {{ _("Superuser") if principal.is_superuser else _("Signed in") }}
  </span>
</span>
{% endmacro %}
<aside x-cloak
       :class="[
         sidebarOpen ? 'translate-x-0' : '-translate-x-full',
         collapsed ? '{{ ui('sidebar', 'collapsed') }}' : '{{ ui('sidebar', 'expanded') }}'
       ]"
       class="{{ ui('sheet', 'content') }} {{ ui('sheet', 'side-left') }} {{ ui('sidebar') }}
              !w-72 md:!w-auto md:sticky md:top-0 md:h-screen md:!transform-none md:shadow-none">

  {# -- SidebarHeader: the block's TeamSwitcher slot -- #}
  <div class="{{ ui('sidebar', 'header') }}">
    <a href="{{ base_path }}" class="{{ ui('nav-item') }} {{ ui('nav-item', 'inactive') }} {{ ui('nav-item', 'size-lg') }}">
      <span class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
        {% if site_logo_url %}
        <img src="{{ site_logo_url }}" alt="" class="size-5 rounded object-contain">
        {% else %}
        <span class="text-xs font-semibold">{{ site_title[:2] | upper }}</span>
        {% endif %}
      </span>
      <span x-show="!collapsed" class="grid flex-1 text-left leading-tight">
        <span class="truncate font-semibold text-foreground">{{ _(site_title) }}</span>
        <span class="truncate text-xs text-muted-foreground">{{ _("Admin") }}</span>
      </span>
    </a>
  </div>

  {# -- SidebarContent: the block's NavMain -- #}
  <div class="{{ ui('sidebar', 'content') }}">
    <div class="{{ ui('sidebar', 'group') }}">
      <div x-show="!collapsed" class="{{ ui('sidebar', 'group-label') }}">{{ _("Platform") }}</div>
      <nav class="{{ ui('sidebar', 'menu') }}">
        <a href="{{ base_path }}" :title='collapsed ? {{ _("Dashboard")|tojson }} : null'
           class="{{ ui('nav-item') }} {{ ui('nav-item', 'active') if not model_admin else ui('nav-item', 'inactive') }}">
          {{ icon("home", "size-4 shrink-0") }}
          <span x-show="!collapsed" class="truncate">{{ _("Dashboard") }}</span>
        </a>
        {% for entry in nav_items %}
          {% if entry.type == "link" %}
          <a href="{{ entry.url }}" :title='collapsed ? {{ _(entry.label)|tojson }} : null'
             class="{{ ui('nav-item') }} {{ ui('nav-item', 'active') if entry.active else ui('nav-item', 'inactive') }}">
            {{ icon(entry.icon, "size-4 shrink-0") }}
            <span x-show="!collapsed" class="truncate">{{ _(entry.label) }}</span>
          </a>
          {% else %}
          {# Collapsed to the icon rail there is nowhere to put a
             sub-menu, so the group behaves as a plain link to its first
             child rather than expanding into nothing. #}
          <div x-data="{ open: {{ entry.active | tojson }} }">
            <a x-show="collapsed" href="{{ entry.links[0].url if entry.links else base_path }}"
               :title='{{ _(entry.label)|tojson }}'
               class="{{ ui('nav-item') }} {{ ui('nav-item', 'active') if entry.active else ui('nav-item', 'inactive') }}">
              {{ icon(entry.icon, "size-4 shrink-0") }}
            </a>
            <button type="button" x-show="!collapsed" @click="open = !open"
                    :aria-expanded="open ? 'true' : 'false'"
                    class="{{ ui('nav-item') }} {{ ui('nav-item', 'inactive') }}">
              {{ icon(entry.icon, "size-4 shrink-0") }}
              <span class="flex-1 truncate">{{ _(entry.label) }}</span>
              <span :class="open ? 'rotate-90' : ''" class="ml-auto transition-transform duration-200">
                {{ icon("chevron-right", "size-4") }}
              </span>
            </button>
            <div x-show="open && !collapsed" x-collapse class="{{ ui('sidebar', 'menu-sub') }}">
              {% for link in entry.links %}
              <a href="{{ link.url }}"
                 class="{{ ui('nav-item') }} {{ ui('nav-item', 'active') if link.active else ui('nav-item', 'inactive') }}">
                <span class="truncate">{{ _(link.label) }}</span>
              </a>
              {% endfor %}
            </div>
          </div>
          {% endif %}
        {% endfor %}
      </nav>
    </div>
  </div>

  {# -- SidebarFooter: the block's NavUser -- #}
  {% if principal %}
  <div class="{{ ui('sidebar', 'footer') }}">
    {% if can_sign_out %}
    <div class="relative" x-data="{ open: false }" @keydown.escape="open = false" @click.outside="open = false">
      <button type="button" x-ref="userTrigger" @click="open = !open"
              :aria-expanded="open ? 'true' : 'false'" aria-haspopup="menu"
              :class="open ? 'bg-accent text-accent-foreground' : ''"
              class="{{ ui('nav-item') }} {{ ui('nav-item', 'inactive') }} {{ ui('nav-item', 'size-lg') }}">
        {{ sidebar_user(principal) }}
        <span x-show="!collapsed">{{ icon("chevrons-up-down", "ml-auto size-4") }}</span>
      </button>
      {# side="right" like the block's desktop placement -- the footer is
         at the very bottom, so a downward menu would open offscreen.

         The menu holds actions only. The trigger it opens from sits
         directly beside it and already shows who you are, so repeating
         the name and role in here was a header that told the reader
         nothing they could not already see. #}
      <div x-show="open" x-cloak role="menu"
           x-anchor.right-end.offset.8="$refs.userTrigger"
           x-transition:enter="transition ease-out duration-150"
           x-transition:enter-start="opacity-0 scale-95"
           x-transition:enter-end="opacity-100 scale-100"
           class="{{ ui('dropdown', 'content') }} min-w-56">
        {# No Dashboard entry here: the nav above already opens with
           one, and a second link to the same place inside the user menu
           is just noise. #}
        {# A form, not a link: a logout reachable by GET is one any
           <img src> on the internet can fire at a signed-in admin, so
           it posts and carries the CSRF token. #}
        <form method="post" action="{{ base_path }}/logout">
          {{ csrf_field(csrf_token) }}
          <button type="submit" role="menuitem" class="{{ ui('dropdown', 'item') }} w-full">
            {{ icon("logout", "size-4") }}
            <span>{{ _("Sign out") }}</span>
          </button>
        </form>
      </div>
    </div>
    {% else %}
    {# No login backend, so there is no session to end and nothing else
       the menu would hold: the footer is just who you are, and opening
       an empty menu would be a dead end. #}
    <div class="{{ ui('nav-item') }} {{ ui('nav-item', 'inactive') }} {{ ui('nav-item', 'size-lg') }}">
      {{ sidebar_user(principal) }}
    </div>
    {% endif %}
  </div>
  {% endif %}

  {# -- SidebarRail -- #}
  <button type="button" @click="toggle()" tabindex="-1" aria-label="{{ _('Toggle sidebar') }}"
          class="{{ ui('sidebar', 'rail') }}"></button>
</aside>