<div data-controller="sidebar">
  <aside class="tw-sidebar">
    <!-- Logo -->
    <div class="tw-sidebar-logo">
      <a href="#" class="tw-sidebar-logo-link">
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M37.47 38L29.43 17.99H26.34L18.27 38H21.12L22.89 33.53H32.85L34.62 38H37.47ZM32.13 31.34H23.64L27.87 20.54L32.13 31.34Z" fill="white"/>
          <path d="M39 18V14H37V18H33V20H37V24H39V20H43V18H39Z" fill="#EC634B"/>
        </svg>
      </a>
    </div>
    <!-- Navigation -->
    <nav class="tw-sidebar-nav" role="navigation" aria-label="LA Dashboard navigation">
      <!-- Overview (navigates to the Overview page) -->
      <a href="/lookbook/preview/projects/la_dashboard/overview"
       data-turbo="false"
       class="tw-sidebar-item tw-active"
       data-label="Overview">
        <i class="fa-light fa-chart-pie tw-sidebar-icon"></i>
        <span class="tw:sr-only">Overview</span>
      </a>
      <!-- Comparison (navigates to the Comparison page) -->
      <a href="/lookbook/preview/projects/la_dashboard/comparison"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Comparison">
        <i class="fa-light fa-chart-column tw-sidebar-icon"></i>
        <span class="tw:sr-only">Comparison</span>
      </a>
      <!-- Schools (navigates to the Schools page) -->
      <a href="/lookbook/preview/projects/la_dashboard/schools"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Schools">
        <i class="fa-light fa-school tw-sidebar-icon"></i>
        <span class="tw:sr-only">Schools</span>
      </a>
      <!-- Students (navigates to the Students page) -->
      <a href="/lookbook/preview/projects/la_dashboard/students"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Students">
        <i class="fa-light fa-users tw-sidebar-icon"></i>
        <span class="tw:sr-only">Students</span>
      </a>
      <!-- Destination Tracker (navigates to the Destination Tracker page) -->
      <a href="/lookbook/preview/projects/la_dashboard/destination_tracker"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Destination Tracker">
        <i class="fa-light fa-location-dot tw-sidebar-icon"></i>
        <span class="tw:sr-only">Destination Tracker</span>
      </a>
      <!-- Transitions (navigates to the Transitions page) -->
      <a href="/lookbook/preview/projects/la_dashboard/transitions"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Transitions">
        <i class="fa-light fa-right-left tw-sidebar-icon"></i>
        <span class="tw:sr-only">Transitions</span>
      </a>
      <!-- SEND & NEET (navigates to the SEND & NEET page) -->
      <a href="/lookbook/preview/projects/la_dashboard/send_neet"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="SEND & NEET">
        <i class="fa-light fa-person-circle-exclamation tw-sidebar-icon"></i>
        <span class="tw:sr-only">SEND & NEET</span>
      </a>
    </nav>
    <!-- Bottom Section -->
    <div class="tw-sidebar-bottom">
      <a href="/lookbook/preview/projects/la_dashboard/settings"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Settings">
        <i class="fa-light fa-cogs tw-sidebar-icon"></i>
        <span class="tw:sr-only">Settings</span>
      </a>
    </div>
  </aside>
  <header class="tw-topbar" role="banner">
    <div class="tw-topbar-left">
      <!-- LA brand lockup (logo placeholder + authority name) -->
      <div class="tw:flex tw:items-center tw:gap-3">
        <div class="tw-avatar tw-avatar-square tw-avatar-icon" role="img" aria-label="Hackney logo">
          <i class="fa-regular fa-building-columns tw:text-base"></i>
        </div>
        <h2 class="tw-h2 tw:text-neutral-800 tw:mb-0">Hackney</h2>
      </div>
    </div>
    <!-- UNUSED FOR NOW, JUST KEEP IT HERE -->
    <div class="tw-topbar-right">
      <div class="tw:flex tw:gap-0.5 tw:-mb-0.5 tw:flex-col">
        <div class="tw-dropdown tw-dropdown-sm" data-controller="dropdown" data-dropdown-auto-highlight-value="true">
          <button class="tw-dropdown-trigger" type="button"
                aria-haspopup="listbox" aria-expanded="false"
                data-dropdown-target="trigger"
                data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <span class="tw:flex tw:items-center tw:gap-2 tw:min-w-0">
              <i class="fa-regular fa-calendar tw:text-muted"></i>
              <span class="tw:text-neutral-700">Academic Year:</span>
              <span class="tw:font-semibold tw:text-neutral-900" data-dropdown-target="label">2026/2027</span>
            </span>
            <svg class="tw-dropdown-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <path d="m2 5 6 6 6-6"/>
            </svg>
          </button>
          <div class="tw-dropdown-menu" role="listbox" data-dropdown-target="menu" tabindex="-1">
            <button class="tw-dropdown-item tw-active" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2026/2027">
              <span class="tw-dropdown-item-text">2026/2027</span>
              <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
              </svg>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025/2026">
              <span class="tw-dropdown-item-text">2025/2026</span>
              <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
              </svg>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024/2025">
              <span class="tw-dropdown-item-text">2024/2025</span>
              <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
              </svg>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2023/2024">
              <span class="tw-dropdown-item-text">2023/2024</span>
              <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
              </svg>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2022/2023">
              <span class="tw-dropdown-item-text">2022/2023</span>
              <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
              </svg>
            </button>
            <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2021/2022">
              <span class="tw-dropdown-item-text">2021/2022</span>
              <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
        </div>
        <p class="tw-small tw:text-neutral-600 tw:mb-0 tw:pl-3">
          <i class="fa-regular fa-arrow-right-arrow-left tw:mr-1"></i>
          Comparing year-on-year to <strong>2025/2026</strong>
        </p>
      </div>
      <!-- Action Buttons -->
      <!-- UNUSED FOR NOW, JUST KEEP IT HERE -->
      <!-- <button type="button" class="tw-btn tw-btn-soft-success tw-btn-multiline tw:hidden" data-controller="tooltip" data-tooltip-content-value="Referral Program" data-tooltip-placement-value="bottom">
      <i class="fa-solid fa-gift tw-icon-16"></i>
      Refer<br> & Save
    </button>
    <button type="button" class="tw-btn tw-btn-soft-primary tw-btn-multiline tw:hidden" data-controller="tooltip" data-tooltip-content-value="Discuss Ideas & Submit Feature Requests" data-tooltip-placement-value="bottom">
      <i class="fa-solid fa-users tw-icon-16"></i>
      Applicaa<br> Community
    </button>
    <button type="button" class="tw-btn tw-btn-soft-primary tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Support & Feature Requests" data-tooltip-placement-value="bottom">
      <i class="fa-solid fa-comment-question tw-icon-16"></i>
      Support<br> & Requests
    </button> -->
      <!-- UNUSED FOR NOW, JUST KEEP IT HERE -->
      <div class="tw-topbar-action-icons tw:hidden">
        <!-- Notification Icon -->
        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-topbar-notification-btn" aria-label="Notifications" data-controller="tooltip" data-tooltip-content-value="Notification" data-tooltip-placement-value="bottom">
          <i class="fa-solid fa-bell tw-icon-16"></i>
        </button>
      </div>
      <!-- <div class="tw-topbar-divider"></div> -->
      <!-- UNUSED FOR NOW, JUST KEEP IT HERE -->
      <!-- User Avatar Dropdown -->
      <!-- <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown">
      <button type="button" class="tw-dropdown-trigger tw-topbar-avatar"
              aria-label="User menu"
              aria-haspopup="true"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
        <div class="tw-avatar tw-avatar-primary" role="img" aria-label="Jane Doe">
          <span>JD</span>
        </div>
      </button>
      <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
        <div class="tw-dropdown-header">John Doe</div>
        <div class="tw-dropdown-divider"></div>
        <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
          <i class="fa-regular fa-circle-sterling tw-dropdown-item-icon"></i>
          <span class="tw-dropdown-item-text">Referrals & billing</span>
        </button>
        <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
          <i class="fa-regular fa-lock tw-dropdown-item-icon"></i>
          <span class="tw-dropdown-item-text">Password & security</span>
        </button>
        <div class="tw-dropdown-divider"></div>
        <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
          <i class="fa-regular fa-layer-group tw-dropdown-item-icon"></i>
          <span class="tw-dropdown-item-text">Multiple form</span>
        </button>
        <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
          <i class="fa-regular fa-envelope tw-dropdown-item-icon"></i>
          <span class="tw-dropdown-item-text">Email preferences</span>
        </button>
        <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
          <i class="fa-regular fa-right-from-bracket tw-dropdown-item-icon"></i>
          <span class="tw-dropdown-item-text">Logout</span>
        </button>
      </div>
    </div> -->
    </div>
  </header>
  <main class="tw-sidebar-topbar-content-offset tw:bg-background tw-min-h-screen-offset">
    <div class="tw-container-fluid tw-page-container">
      <div class="tw-page-header">
        <div class="tw-page-header-main">
          <div class="tw-page-header-title-group">
            <h1 class="tw-page-header-title">Page title</h1>
            <p class="tw-page-header-subtitle">Local Authority shell — LA rail, LA topbar, offset min-height.</p>
          </div>
        </div>
      </div>
      <div class="tw-card">
        <div class="tw-card-body">
          <h2 class="tw-h4 tw-card-title tw:mb-2">Shell template — Local Authority variant</h2>
          <p class="tw:mb-0 tw:text-muted">Identical wrapper to School except <code>tw:min-h-screen</code> becomes <code>tw-min-h-screen-offset</code>, and the LA partial set is used. See <code>docs/templates/shell.md</code>.</p>
        </div>
      </div>
    </div>
  </main>
</div>