{# partials/sidebar.html — navigation sidebar #}
<aside class="admin-sidebar"
       :class="{ 'open': sidebarOpen, 'collapsed': sidebarCollapsed }"
       :style="sidebarCollapsed ? 'width: var(--sidebar-collapsed-width)' : 'width: var(--sidebar-width)'"
       x-show="true">

  {# Dashboard section (no label) #}
  <nav class="sidebar-nav">
    <ul class="sidebar-nav-list">
      <li class="sidebar-nav-item">
        <a href="{{ admin_path | default('/admin') }}/"
           class="nav-link {% if request.url.path == admin_path | default('/admin') ~ '/' %}active{% endif %}">
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <use href="/static/icons/heroicons.svg#home"/>
          </svg>
          <span class="nav-link-label">Dashboard</span>
          <span class="nav-tooltip" x-show="sidebarCollapsed">Dashboard</span>
        </a>
      </li>

      {# Models section #}
      {% if registered_models %}
      <li class="sidebar-section">
        <span class="sidebar-section-label">Models</span>
      </li>
      {% for registered in registered_models %}
      <li class="sidebar-nav-item">
        <a href="{{ admin_path | default('/admin') }}/{{ registered.table_name }}/"
           class="nav-link {% if request.url.path.startswith(admin_path | default('/admin') ~ '/' ~ registered.table_name ~ '/') %}active{% endif %}">
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <use href="/static/icons/heroicons.svg#{{ registered.admin.icon | default('document-text') }}"/>
          </svg>
          <span class="nav-link-label">{{ registered.verbose_name_plural }}</span>
          {% if registered.record_count is defined and registered.record_count > 0 %}
          <span class="nav-link-badge">{{ registered.record_count }}</span>
          {% endif %}
          <span class="nav-tooltip" x-show="sidebarCollapsed">{{ registered.verbose_name_plural }}</span>
        </a>
      </li>
      {% endfor %}
      {% endif %}

      {# System section #}
      <li class="sidebar-section">
        <span class="sidebar-section-label">System</span>
      </li>

      <li class="sidebar-nav-item">
        <a href="{{ admin_path | default('/admin') }}/audit-log/"
           class="nav-link {% if request.url.path.startswith(admin_path | default('/admin') ~ '/audit-log') %}active{% endif %}">
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <use href="/static/icons/heroicons.svg#clock"/>
          </svg>
          <span class="nav-link-label">Audit Log</span>
          <span class="nav-tooltip" x-show="sidebarCollapsed">Audit Log</span>
        </a>
      </li>

      {% if admin_user and admin_user.is_superuser %}
      <li class="sidebar-nav-item">
        <a href="{{ admin_path | default('/admin') }}/roles/"
           class="nav-link {% if request.url.path.startswith(admin_path | default('/admin') ~ '/roles') %}active{% endif %}">
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <use href="/static/icons/heroicons.svg#users"/>
          </svg>
          <span class="nav-link-label">Roles</span>
          <span class="nav-tooltip" x-show="sidebarCollapsed">Roles</span>
        </a>
      </li>
      {% endif %}
    </ul>
  </nav>

  {# Bottom section (pushed to bottom) #}
  <div class="sidebar-bottom">
    <ul class="sidebar-nav-list">
      <li class="sidebar-nav-item">
        <a href="{{ admin_path | default('/admin') }}/settings/"
           class="nav-link {% if request.url.path.startswith(admin_path | default('/admin') ~ '/settings') %}active{% endif %}">
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <use href="/static/icons/heroicons.svg#cog-6-tooth"/>
          </svg>
          <span class="nav-link-label">Settings</span>
          <span class="nav-tooltip" x-show="sidebarCollapsed">Settings</span>
        </a>
      </li>
    </ul>
  </div>
</aside>

{# Mobile sidebar overlay #}
<div class="admin-sidebar-overlay"
     :class="{ 'open': sidebarOpen }"
     @click="sidebarOpen = false"
     x-show="window.innerWidth < 768 && sidebarOpen"
     style="display: none;">
</div>