<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"
       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 tw-active"
       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" data-controller="tabs">
      <!-- Page header -->
      <div class="tw-page-header tw:mb-4">
        <div class="tw-page-header-breadcrumb">
          <nav aria-label="Breadcrumb">
            <ol class="tw-breadcrumb">
              <li class="tw-breadcrumb-item">
                <a href="/lookbook/preview/projects/la_dashboard/overview" data-turbo="false" aria-label="Home">
                  <i class="fa-solid fa-house tw-breadcrumb-item-icon"></i>
                </a>
              </li>
              <li class="tw-breadcrumb-item tw-active" aria-current="page">Destination Tracker</li>
            </ol>
          </nav>
        </div>
        <div class="tw-page-header-main">
          <div class="tw-page-header-title-group">
            <h1 class="tw-page-header-title">Destination Tracker</h1>
            <span class="tw-page-header-subtitle">Year 11 post-16 destination progress by school</span>
          </div>
        </div>
        <div class="tw-page-header-tabs">
          <div class="tw-tabs" role="tablist" aria-label="Destination Tracker sections">
            <button class="tw-tab tw-active" role="tab" data-tabs-target="tab"
                    data-action="click->tabs#select keydown->tabs#keydown" aria-selected="true" type="button">
              Schools Overview
            </button>
            <button class="tw-tab" role="tab" data-tabs-target="tab"
                    data-action="click->tabs#select keydown->tabs#keydown" aria-selected="false" type="button">
              SEND Students
            </button>
          </div>
        </div>
      </div>
      <!-- ===================== PANEL 1 — Schools Overview ===================== -->
      <div data-tabs-target="panel" role="tabpanel" class="tw-active">
        <div data-controller="directory">
          <!-- Search + phase filter -->
          <div class="tw:flex tw:flex-col tw:sm:flex-row tw:gap-3 tw:mb-4">
            <div class="tw-input-group tw-has-icon-start tw-has-icon-end tw:flex-1">
              <i class="tw-input-group-icon tw-input-group-icon-start fa-solid fa-magnifying-glass"></i>
              <input type="search" class="tw-form-control tw-form-control-lg"
                     placeholder="Search for a school by name or postcode…"
                     aria-label="Search schools"
                     data-directory-target="input"
                     data-action="input->directory#search">
              <button type="button"
                      class="tw-input-group-icon tw-input-group-icon-end tw-input-group-icon-clickable"
                      aria-label="Clear search"
                      data-directory-target="clear"
                      data-action="click->directory#clear" hidden>
                <i class="fa-solid fa-xmark"></i>
              </button>
            </div>
            <!-- Phase filter dropdown -->
            <div class="tw-dropdown tw:shrink-0" data-controller="dropdown">
              <button type="button" class="tw-dropdown-trigger" data-dropdown-target="trigger"
                      data-action="click->dropdown#toggle" aria-haspopup="listbox">
                <span class="tw:text-muted tw:mr-1">Phase:</span>
                <span class="tw-dropdown-label" data-dropdown-target="label">All Phases</span>
                <i class="tw-dropdown-chevron fa-solid fa-chevron-down"></i>
              </button>
              <div class="tw-dropdown-menu tw-dropdown-menu-end" data-dropdown-target="menu" role="listbox">
                <button type="button" class="tw-dropdown-item tw-active" data-dropdown-target="item"
                        data-phase="all" data-action="click->directory#selectPhase click->dropdown#select">All Phases</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item"
                        data-phase="primary" data-action="click->directory#selectPhase click->dropdown#select">Primary</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item"
                        data-phase="secondary" data-action="click->directory#selectPhase click->dropdown#select">Secondary</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item"
                        data-phase="sixthform" data-action="click->directory#selectPhase click->dropdown#select">Sixth Form</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item"
                        data-phase="unspecified" data-action="click->directory#selectPhase click->dropdown#select">Unspecified</button>
              </div>
            </div>
          </div>
          <!-- Summary stats — 6 KPI tiles -->
          <div class="tw:grid tw:grid-cols-2 tw:md:grid-cols-3 tw:xl:grid-cols-6 tw:gap-3 tw:mb-4">
            <!-- Total Year 11 -->
            <div class="tw-card tw:h-full">
              <div class="tw-card-body tw-stat-tile tw-stat-tile-fill">
                <span class="tw-stat-tile-label">Total Year 11</span>
                <span class="tw-stat-tile-value">1,519</span>
                <span class="tw-stat-tile-delta tw-stat-tile-delta-positive"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 2.1%</span>
              </div>
            </div>
            <!-- Destinations Confirmed -->
            <div class="tw-card tw:h-full">
              <div class="tw-card-body tw-stat-tile tw-stat-tile-fill">
                <span class="tw-stat-tile-label">Destinations Confirmed</span>
                <span class="tw-stat-tile-value">46%</span>
                <span class="tw-stat-tile-sub">693 of 1,519</span>
                <span class="tw-stat-tile-delta tw-stat-tile-delta-positive"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 5.3%</span>
              </div>
            </div>
            <!-- NEET Risk -->
            <div class="tw-card tw:h-full">
              <div class="tw-card-body tw-stat-tile tw-stat-tile-fill">
                <span class="tw-stat-tile-label">NEET Risk</span>
                <span class="tw-stat-tile-value tw-stat-tile-value-danger">24</span>
                <span class="tw-stat-tile-delta tw-stat-tile-delta-negative"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 9.1%</span>
              </div>
            </div>
            <!-- SEND -->
            <div class="tw-card tw:h-full">
              <div class="tw-card-body tw-stat-tile tw-stat-tile-fill">
                <div class="tw:flex tw:items-start tw:justify-between tw:gap-2">
                  <span class="tw-stat-tile-label">SEND</span>
                  <span class="tw-stat-tile-delta tw-stat-tile-delta-neutral"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 6.9%</span>
                </div>
                <span class="tw-stat-tile-value">93</span>
                <div class="tw:flex tw:items-end tw:gap-4 tw:mt-1">
                  <div class="tw-stat-tile tw-stat-tile-sm tw-stat-tile-fill">
                    <span class="tw-stat-tile-value">16</span>
                    <span class="tw-stat-tile-sub">EHCP</span>
                  </div>
                  <div class="tw-stat-tile tw-stat-tile-sm tw-stat-tile-fill">
                    <span class="tw-stat-tile-value">77</span>
                    <span class="tw-stat-tile-sub">SEN Support</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- Early Leavers — alert (red border) -->
            <div class="tw-card tw:h-full tw:border-2 tw:border-red-500">
              <div class="tw-card-body tw-stat-tile tw-stat-tile-fill">
                <span class="tw-stat-tile-label">
                  <i class="fa-solid fa-triangle-exclamation tw:text-danger tw:mr-1"></i>Early Leavers
                </span>
                <span class="tw-stat-tile-value tw-stat-tile-value-danger">8</span>
                <span class="tw-stat-tile-sub">This academic year</span>
              </div>
            </div>
            <!-- Out-of-Borough — accent (magenta border) -->
            <div class="tw-card tw:h-full tw:border-2 tw:border-magenta-500">
              <div class="tw-card-body tw-stat-tile tw-stat-tile-fill">
                <span class="tw-stat-tile-label">Out-of-Borough</span>
                <span class="tw-stat-tile-value tw-stat-tile-value-warning">11.9%</span>
                <span class="tw-stat-tile-delta tw-stat-tile-delta-negative"><i class="fa-solid fa-arrow-up" aria-hidden="true"></i> 0.8%</span>
              </div>
            </div>
          </div>
          <!-- Tracker table -->
          <div class="tw-data-table tw-card tw:overflow-hidden">
            <div class="tw-data-table-toolbar tw:px-4">
              <div class="tw-data-table-toolbar-start">
                <i class="fa-solid fa-location-dot tw:text-primary-500"></i>
                <span class="tw:font-semibold tw:text-body-s">Destinations by school</span>
                <span class="tw-small tw:text-muted" data-directory-target="count">9 of 9</span>
              </div>
            </div>
            <div class="tw-data-table-body">
              <table class="tw-table tw-table-hover">
                <thead>
                  <tr>
                    <th>School Name</th>
                    <th class="tw:text-right">Total Yr 11</th>
                    <th class="tw:text-right">Dest. Confirmed %</th>
                    <th class="tw:text-right">NEET Risk</th>
                    <th class="tw:text-right">SEND</th>
                    <th class="tw:text-right">Out-of-Borough %</th>
                    <th>Trend</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- ROW #1 — Cardinal Pole Catholic School -->
                  <tr data-directory-target="row" data-search="cardinal pole catholic school e9 6lg" data-phases="secondary sixthform">
                    <td>
                      <div class="tw:flex tw:items-center tw:flex-wrap tw:gap-x-2 tw:gap-y-1">
                        <a href="/lookbook/preview/projects/la_dashboard/school_detail" data-turbo="false" class="tw:text-primary tw:hover:underline tw:font-semibold">Cardinal Pole Catholic School</a>
                        <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Secondary</span>
                        <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Sixth Form</span>
                      </div>
                      <div class="tw-small tw:text-muted">E9 6LG</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-primary-500">164</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+1.9%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-green-600">57%</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+4.2%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-danger">2</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-down tw:mr-1"></i>-33.3%</div>
                    </td>
                    <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-primary-500">11</td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-magenta-600">9.1%</div>
                      <div class="tw-small tw:text-danger"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+0.4%</div>
                    </td>
                    <td><span class="tw:text-green-600 tw:font-medium"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>Improving</span></td>
                  </tr>
                  <!-- ROW #2 — Clapton Girls' Academy -->
                  <tr data-directory-target="row" data-search="clapton girls' academy e5 0rb" data-phases="secondary sixthform">
                    <td>
                      <div class="tw:flex tw:items-center tw:flex-wrap tw:gap-x-2 tw:gap-y-1">
                        <a href="/lookbook/preview/projects/la_dashboard/school_detail" data-turbo="false" class="tw:text-primary tw:hover:underline tw:font-semibold">Clapton Girls' Academy</a>
                        <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Secondary</span>
                        <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Sixth Form</span>
                      </div>
                      <div class="tw-small tw:text-muted">E5 0RB</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-primary-500">177</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+0.6%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-green-600">50%</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+1.1%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-danger">3</div>
                      <div class="tw-small tw:text-neutral-400">—</div>
                    </td>
                    <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-primary-500">9</td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-magenta-600">12.4%</div>
                      <div class="tw-small tw:text-danger"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+1.2%</div>
                    </td>
                    <td><span class="tw:text-muted tw:font-medium"><i class="fa-solid fa-minus tw:mr-1"></i>Stable</span></td>
                  </tr>
                  <!-- ROW #3 — Hackney Collegiate Sixth Form (HCS) -->
                  <tr data-directory-target="row" data-search="hackney collegiate sixth form (hcs) n1 5ju" data-phases="sixthform">
                    <td>
                      <div class="tw:flex tw:items-center tw:flex-wrap tw:gap-x-2 tw:gap-y-1">
                        <a href="/lookbook/preview/projects/la_dashboard/school_detail" data-turbo="false" class="tw:text-primary tw:hover:underline tw:font-semibold">Hackney Collegiate Sixth Form (HCS)</a>
                        <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Sixth Form</span>
                      </div>
                      <div class="tw-small tw:text-muted">N1 5JU</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-primary-500">19</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+5.6%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-green-600">37%</div>
                      <div class="tw-small tw:text-danger"><i class="fa-solid fa-arrow-trend-down tw:mr-1"></i>-2.0%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-danger">1</div>
                      <div class="tw-small tw:text-neutral-400">—</div>
                    </td>
                    <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-primary-500">1</td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-magenta-600">21.1%</div>
                      <div class="tw-small tw:text-danger"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+3.0%</div>
                    </td>
                    <td><span class="tw:text-danger tw:font-medium"><i class="fa-solid fa-arrow-trend-down tw:mr-1"></i>Declining</span></td>
                  </tr>
                  <!-- ROW #4 — Haggerston School -->
                  <tr data-directory-target="row" data-search="haggerston school e2 8ls" data-phases="secondary">
                    <td>
                      <div class="tw:flex tw:items-center tw:flex-wrap tw:gap-x-2 tw:gap-y-1">
                        <a href="/lookbook/preview/projects/la_dashboard/school_detail" data-turbo="false" class="tw:text-primary tw:hover:underline tw:font-semibold">Haggerston School</a>
                        <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Secondary</span>
                      </div>
                      <div class="tw-small tw:text-muted">E2 8LS</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-primary-500">163</div>
                      <div class="tw-small tw:text-danger"><i class="fa-solid fa-arrow-trend-down tw:mr-1"></i>-0.6%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-green-600">36%</div>
                      <div class="tw-small tw:text-danger"><i class="fa-solid fa-arrow-trend-down tw:mr-1"></i>-1.5%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-danger">4</div>
                      <div class="tw-small tw:text-danger"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+33.3%</div>
                    </td>
                    <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-primary-500">14</td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-magenta-600">14.7%</div>
                      <div class="tw-small tw:text-danger"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+2.1%</div>
                    </td>
                    <td><span class="tw:text-danger tw:font-medium"><i class="fa-solid fa-arrow-trend-down tw:mr-1"></i>Declining</span></td>
                  </tr>
                  <!-- ROW #5 — Mossbourne Community Academy -->
                  <tr data-directory-target="row" data-search="mossbourne community academy e5 8jy" data-phases="secondary sixthform">
                    <td>
                      <div class="tw:flex tw:items-center tw:flex-wrap tw:gap-x-2 tw:gap-y-1">
                        <a href="/lookbook/preview/projects/la_dashboard/school_detail" data-turbo="false" class="tw:text-primary tw:hover:underline tw:font-semibold">Mossbourne Community Academy</a>
                        <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Secondary</span>
                        <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Sixth Form</span>
                      </div>
                      <div class="tw-small tw:text-muted">E5 8JY</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-primary-500">211</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+2.4%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-green-600">51%</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+3.4%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-danger">2</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-down tw:mr-1"></i>-33.3%</div>
                    </td>
                    <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-primary-500">12</td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-magenta-600">7.6%</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-down tw:mr-1"></i>-0.8%</div>
                    </td>
                    <td><span class="tw:text-green-600 tw:font-medium"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>Improving</span></td>
                  </tr>
                  <!-- ROW #6 — Skinners' Academy -->
                  <tr data-directory-target="row" data-search="skinners' academy n4 1sy" data-phases="secondary sixthform">
                    <td>
                      <div class="tw:flex tw:items-center tw:flex-wrap tw:gap-x-2 tw:gap-y-1">
                        <a href="/lookbook/preview/projects/la_dashboard/school_detail" data-turbo="false" class="tw:text-primary tw:hover:underline tw:font-semibold">Skinners' Academy</a>
                        <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Secondary</span>
                        <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Sixth Form</span>
                      </div>
                      <div class="tw-small tw:text-muted">N4 1SY</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-primary-500">177</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+1.1%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-green-600">51%</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+2.2%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-danger">3</div>
                      <div class="tw-small tw:text-neutral-400">—</div>
                    </td>
                    <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-primary-500">13</td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-magenta-600">10.7%</div>
                      <div class="tw-small tw:text-danger"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+0.5%</div>
                    </td>
                    <td><span class="tw:text-muted tw:font-medium"><i class="fa-solid fa-minus tw:mr-1"></i>Stable</span></td>
                  </tr>
                  <!-- ROW #7 — Stoke Newington School & Sixth Form -->
                  <tr data-directory-target="row" data-search="stoke newington school & sixth form n16 9ex" data-phases="secondary sixthform">
                    <td>
                      <div class="tw:flex tw:items-center tw:flex-wrap tw:gap-x-2 tw:gap-y-1">
                        <a href="/lookbook/preview/projects/la_dashboard/school_detail" data-turbo="false" class="tw:text-primary tw:hover:underline tw:font-semibold">Stoke Newington School & Sixth Form</a>
                        <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Secondary</span>
                        <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Sixth Form</span>
                      </div>
                      <div class="tw-small tw:text-muted">N16 9EX</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-primary-500">259</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+3.2%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-green-600">35%</div>
                      <div class="tw-small tw:text-danger"><i class="fa-solid fa-arrow-trend-down tw:mr-1"></i>-0.9%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-danger">5</div>
                      <div class="tw-small tw:text-danger"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+25.0%</div>
                    </td>
                    <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-primary-500">18</td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-magenta-600">13.5%</div>
                      <div class="tw-small tw:text-danger"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+1.8%</div>
                    </td>
                    <td><span class="tw:text-danger tw:font-medium"><i class="fa-solid fa-arrow-trend-down tw:mr-1"></i>Declining</span></td>
                  </tr>
                  <!-- ROW #8 — The City Academy, Hackney -->
                  <tr data-directory-target="row" data-search="the city academy, hackney e9 6ea" data-phases="secondary sixthform">
                    <td>
                      <div class="tw:flex tw:items-center tw:flex-wrap tw:gap-x-2 tw:gap-y-1">
                        <a href="/lookbook/preview/projects/la_dashboard/school_detail" data-turbo="false" class="tw:text-primary tw:hover:underline tw:font-semibold">The City Academy, Hackney</a>
                        <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Secondary</span>
                        <span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Sixth Form</span>
                      </div>
                      <div class="tw-small tw:text-muted">E9 6EA</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-primary-500">179</div>
                      <div class="tw-small tw:text-neutral-400">—</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-green-600">46%</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+1.8%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-danger">2</div>
                      <div class="tw-small tw:text-neutral-400">—</div>
                    </td>
                    <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-primary-500">10</td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-magenta-600">11.2%</div>
                      <div class="tw-small tw:text-danger"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+0.6%</div>
                    </td>
                    <td><span class="tw:text-muted tw:font-medium"><i class="fa-solid fa-minus tw:mr-1"></i>Stable</span></td>
                  </tr>
                  <!-- ROW #9 — The Excelsior Academy -->
                  <tr data-directory-target="row" data-search="the excelsior academy e8 2ey" data-phases="secondary">
                    <td>
                      <div class="tw:flex tw:items-center tw:flex-wrap tw:gap-x-2 tw:gap-y-1">
                        <a href="/lookbook/preview/projects/la_dashboard/school_detail" data-turbo="false" class="tw:text-primary tw:hover:underline tw:font-semibold">The Excelsior Academy</a>
                        <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Secondary</span>
                      </div>
                      <div class="tw-small tw:text-muted">E8 2EY</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-primary-500">170</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+1.2%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-green-600">44%</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+0.7%</div>
                    </td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-danger">2</div>
                      <div class="tw-small tw:text-green-600"><i class="fa-solid fa-arrow-trend-down tw:mr-1"></i>-33.3%</div>
                    </td>
                    <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-primary-500">5</td>
                    <td class="tw:text-right">
                      <div class="tw:font-bold tw:tabular-nums tw:text-magenta-600">15.3%</div>
                      <div class="tw-small tw:text-danger"><i class="fa-solid fa-arrow-trend-up tw:mr-1"></i>+2.4%</div>
                    </td>
                    <td><span class="tw:text-muted tw:font-medium"><i class="fa-solid fa-minus tw:mr-1"></i>Stable</span></td>
                  </tr>
                  <!-- Empty state -->
                  <tr data-directory-target="empty" hidden>
                    <td colspan="7" class="tw-table-empty">No schools match your search.</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
      <!-- ===================== PANEL 2 — SEND Students ===================== -->
      <div data-tabs-target="panel" role="tabpanel" hidden data-controller="send-students">
        <!-- Section header -->
        <div class="tw:flex tw:items-center tw:justify-between tw:flex-wrap tw:gap-3 tw:mb-4">
          <div class="tw:flex tw:items-center tw:gap-3">
            <h2 class="tw-h4 tw:mb-0">SEND Students</h2>
            <span class="tw-badge tw-badge-primary-subtle" data-send-students-target="count">122 students</span>
          </div>
          <span class="tw-small tw:text-muted" data-send-students-target="pager">All schools · Page 1 of 5</span>
        </div>
        <!-- Filters -->
        <div class="tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-4 tw:gap-3 tw:mb-4">
          <!-- School -->
          <div>
            <label class="tw-overline">School</label>
            <div class="tw-dropdown tw-dropdown-block" data-controller="dropdown">
              <button type="button" class="tw-dropdown-trigger" data-dropdown-target="trigger"
                      data-action="click->dropdown#toggle" aria-haspopup="listbox">
                <span class="tw-dropdown-label" data-dropdown-target="label">All Schools</span>
                <i class="tw-dropdown-chevron fa-solid fa-chevron-down"></i>
              </button>
              <div class="tw-dropdown-menu tw-dropdown-menu-scrollable" data-dropdown-target="menu" role="listbox">
                <button type="button" class="tw-dropdown-item tw-active" data-dropdown-target="item" data-filter="school" data-value="all" data-action="click->send-students#filter click->dropdown#select">All Schools</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="school" data-value="cardinal-pole" data-action="click->send-students#filter click->dropdown#select">Cardinal Pole Catholic School</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="school" data-value="clapton" data-action="click->send-students#filter click->dropdown#select">Clapton Girls' Academy</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="school" data-value="hcs" data-action="click->send-students#filter click->dropdown#select">Hackney Collegiate Sixth Form (HCS)</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="school" data-value="haggerston" data-action="click->send-students#filter click->dropdown#select">Haggerston School</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="school" data-value="mossbourne" data-action="click->send-students#filter click->dropdown#select">Mossbourne Community Academy</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="school" data-value="skinners" data-action="click->send-students#filter click->dropdown#select">Skinners' Academy</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="school" data-value="stoke-newington" data-action="click->send-students#filter click->dropdown#select">Stoke Newington School & Sixth Form</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="school" data-value="city-academy" data-action="click->send-students#filter click->dropdown#select">The City Academy, Hackney</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="school" data-value="excelsior" data-action="click->send-students#filter click->dropdown#select">The Excelsior Academy</button>
              </div>
            </div>
          </div>
          <!-- Intake -->
          <div>
            <label class="tw-overline">Intake</label>
            <div class="tw-dropdown tw-dropdown-block" data-controller="dropdown">
              <button type="button" class="tw-dropdown-trigger" data-dropdown-target="trigger"
                      data-action="click->dropdown#toggle" aria-haspopup="listbox">
                <span class="tw-dropdown-label" data-dropdown-target="label">All Years</span>
                <i class="tw-dropdown-chevron fa-solid fa-chevron-down"></i>
              </button>
              <div class="tw-dropdown-menu" data-dropdown-target="menu" role="listbox">
                <button type="button" class="tw-dropdown-item tw-active" data-dropdown-target="item" data-filter="year" data-value="all" data-action="click->send-students#filter click->dropdown#select">All Years</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="year" data-value="year11" data-action="click->send-students#filter click->dropdown#select">Year 11</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="year" data-value="year12" data-action="click->send-students#filter click->dropdown#select">Year 12</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="year" data-value="year13" data-action="click->send-students#filter click->dropdown#select">Year 13</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="year" data-value="unspecified" data-action="click->send-students#filter click->dropdown#select">Unspecified</button>
              </div>
            </div>
          </div>
          <!-- Support Level -->
          <div>
            <label class="tw-overline">Support Level</label>
            <div class="tw-dropdown tw-dropdown-block" data-controller="dropdown">
              <button type="button" class="tw-dropdown-trigger" data-dropdown-target="trigger"
                      data-action="click->dropdown#toggle" aria-haspopup="listbox">
                <span class="tw-dropdown-label" data-dropdown-target="label">All Levels</span>
                <i class="tw-dropdown-chevron fa-solid fa-chevron-down"></i>
              </button>
              <div class="tw-dropdown-menu" data-dropdown-target="menu" role="listbox">
                <button type="button" class="tw-dropdown-item tw-active" data-dropdown-target="item" data-filter="level" data-value="all" data-action="click->send-students#filter click->dropdown#select">All Levels</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="level" data-value="ehcp" data-action="click->send-students#filter click->dropdown#select">EHCP</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="level" data-value="sen-support" data-action="click->send-students#filter click->dropdown#select">SEN Support</button>
              </div>
            </div>
          </div>
          <!-- Destination Status -->
          <div>
            <label class="tw-overline">Destination Status</label>
            <div class="tw-dropdown tw-dropdown-block" data-controller="dropdown">
              <button type="button" class="tw-dropdown-trigger" data-dropdown-target="trigger"
                      data-action="click->dropdown#toggle" aria-haspopup="listbox">
                <span class="tw-dropdown-label" data-dropdown-target="label">All Statuses</span>
                <i class="tw-dropdown-chevron fa-solid fa-chevron-down"></i>
              </button>
              <div class="tw-dropdown-menu tw-dropdown-menu-end" data-dropdown-target="menu" role="listbox">
                <button type="button" class="tw-dropdown-item tw-active" data-dropdown-target="item" data-filter="status" data-value="all" data-action="click->send-students#filter click->dropdown#select">All Statuses</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="status" data-value="pending" data-action="click->send-students#filter click->dropdown#select">Pending</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="status" data-value="unknown" data-action="click->send-students#filter click->dropdown#select">Unknown</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="status" data-value="atrisk" data-action="click->send-students#filter click->dropdown#select">At Risk</button>
                <button type="button" class="tw-dropdown-item" data-dropdown-target="item" data-filter="status" data-value="confirmed" data-action="click->send-students#filter click->dropdown#select">Confirmed</button>
              </div>
            </div>
          </div>
        </div>
        <!-- Roster table -->
        <div class="tw-data-table tw-card tw:overflow-hidden">
          <div class="tw-data-table-body">
            <table class="tw-table tw-table-hover">
              <thead>
                <tr>
                  <th>Student Name</th>
                  <th>School</th>
                  <th>Year</th>
                  <th>SEND Type</th>
                  <th>Support Level</th>
                  <th>Destination Status</th>
                </tr>
              </thead>
              <tbody>
                <tr data-send-students-target="row" data-school="cardinal-pole" data-year="year11" data-level="sen-support" data-status="unknown">
                  <td class="tw:font-semibold">Amara Okafor</td>
                  <td>Cardinal Pole Catholic School</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s">Moderate Learning Difficulty</td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-secondary-subtle">Unknown</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="cardinal-pole" data-year="year11" data-level="ehcp" data-status="pending">
                  <td class="tw:font-semibold">Daniel Mensah</td>
                  <td>Cardinal Pole Catholic School</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s">Social, Emotional and Mental Health</td>
                  <td><span class="tw-badge tw-badge-magenta-subtle">EHCP</span></td>
                  <td><span class="tw-badge tw-badge-warning-subtle">Pending</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="cardinal-pole" data-year="year12" data-level="ehcp" data-status="unknown">
                  <td class="tw:font-semibold">Sofia Almeida</td>
                  <td>Cardinal Pole Catholic School</td>
                  <td>Year 12</td>
                  <td class="tw:text-body-s">Autistic Spectrum Disorder</td>
                  <td><span class="tw-badge tw-badge-magenta-subtle">EHCP</span></td>
                  <td><span class="tw-badge tw-badge-secondary-subtle">Unknown</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="cardinal-pole" data-year="unspecified" data-level="sen-support" data-status="unknown">
                  <td class="tw:font-semibold">Reuben Clarke</td>
                  <td>Cardinal Pole Catholic School</td>
                  <td><span class="tw:text-neutral-400">—</span></td>
                  <td class="tw:text-body-s">Specific Learning Difficulty</td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-secondary-subtle">Unknown</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="clapton" data-year="year11" data-level="sen-support" data-status="pending">
                  <td class="tw:font-semibold">Fatima Begum</td>
                  <td>Clapton Girls' Academy</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s">Speech, Language or Communication Need</td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-warning-subtle">Pending</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="clapton" data-year="year11" data-level="ehcp" data-status="atrisk">
                  <td class="tw:font-semibold">Grace Adeyemi</td>
                  <td>Clapton Girls' Academy</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s"><span class="tw:text-neutral-400">—</span></td>
                  <td><span class="tw-badge tw-badge-magenta-subtle">EHCP</span></td>
                  <td><span class="tw-badge tw-badge-danger-subtle">At Risk</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="clapton" data-year="year13" data-level="sen-support" data-status="confirmed">
                  <td class="tw:font-semibold">Leila Hassan</td>
                  <td>Clapton Girls' Academy</td>
                  <td>Year 13</td>
                  <td class="tw:text-body-s">Hearing Impairment</td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-success-subtle">Confirmed</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="hcs" data-year="year13" data-level="ehcp" data-status="atrisk">
                  <td class="tw:font-semibold">Joshua Bennett</td>
                  <td>Hackney Collegiate Sixth Form (HCS)</td>
                  <td>Year 13</td>
                  <td class="tw:text-body-s">Social, Emotional and Mental Health</td>
                  <td><span class="tw-badge tw-badge-magenta-subtle">EHCP</span></td>
                  <td><span class="tw-badge tw-badge-danger-subtle">At Risk</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="hcs" data-year="year12" data-level="sen-support" data-status="unknown">
                  <td class="tw:font-semibold">Maya Phillips</td>
                  <td>Hackney Collegiate Sixth Form (HCS)</td>
                  <td>Year 12</td>
                  <td class="tw:text-body-s">Moderate Learning Difficulty</td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-secondary-subtle">Unknown</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="haggerston" data-year="year11" data-level="ehcp" data-status="atrisk">
                  <td class="tw:font-semibold">Tyrese Campbell</td>
                  <td>Haggerston School</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s">Social, Emotional and Mental Health</td>
                  <td><span class="tw-badge tw-badge-magenta-subtle">EHCP</span></td>
                  <td><span class="tw-badge tw-badge-danger-subtle">At Risk</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="haggerston" data-year="year11" data-level="ehcp" data-status="pending">
                  <td class="tw:font-semibold">Aisha Rahman</td>
                  <td>Haggerston School</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s">Speech, Language or Communication Need, ASD</td>
                  <td><span class="tw-badge tw-badge-magenta-subtle">EHCP</span></td>
                  <td><span class="tw-badge tw-badge-warning-subtle">Pending</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="haggerston" data-year="unspecified" data-level="sen-support" data-status="unknown">
                  <td class="tw:font-semibold">Owen Davies</td>
                  <td>Haggerston School</td>
                  <td><span class="tw:text-neutral-400">—</span></td>
                  <td class="tw:text-body-s">Specific Learning Difficulty</td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-secondary-subtle">Unknown</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="mossbourne" data-year="year11" data-level="sen-support" data-status="unknown">
                  <td class="tw:font-semibold">Chloe Wright</td>
                  <td>Mossbourne Community Academy</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s">Moderate Learning Difficulty</td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-secondary-subtle">Unknown</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="mossbourne" data-year="year11" data-level="ehcp" data-status="pending">
                  <td class="tw:font-semibold">Idris Yusuf</td>
                  <td>Mossbourne Community Academy</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s">Autistic Spectrum Disorder</td>
                  <td><span class="tw-badge tw-badge-magenta-subtle">EHCP</span></td>
                  <td><span class="tw-badge tw-badge-warning-subtle">Pending</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="mossbourne" data-year="year12" data-level="sen-support" data-status="unknown">
                  <td class="tw:font-semibold">Hannah Cole</td>
                  <td>Mossbourne Community Academy</td>
                  <td>Year 12</td>
                  <td class="tw:text-body-s"><span class="tw:text-neutral-400">—</span></td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-secondary-subtle">Unknown</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="mossbourne" data-year="year11" data-level="sen-support" data-status="confirmed">
                  <td class="tw:font-semibold">Marcus Bright</td>
                  <td>Mossbourne Community Academy</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s">Physical Disability</td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-success-subtle">Confirmed</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="skinners" data-year="year11" data-level="sen-support" data-status="unknown">
                  <td class="tw:font-semibold">Priya Patel</td>
                  <td>Skinners' Academy</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s">Specific Learning Difficulty</td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-secondary-subtle">Unknown</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="skinners" data-year="year11" data-level="ehcp" data-status="atrisk">
                  <td class="tw:font-semibold">Kofi Asante</td>
                  <td>Skinners' Academy</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s">Social, Emotional and Mental Health</td>
                  <td><span class="tw-badge tw-badge-magenta-subtle">EHCP</span></td>
                  <td><span class="tw-badge tw-badge-danger-subtle">At Risk</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="skinners" data-year="unspecified" data-level="sen-support" data-status="unknown">
                  <td class="tw:font-semibold">Ellie Morgan</td>
                  <td>Skinners' Academy</td>
                  <td><span class="tw:text-neutral-400">—</span></td>
                  <td class="tw:text-body-s">Speech, Language or Communication Need</td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-secondary-subtle">Unknown</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="stoke-newington" data-year="year11" data-level="sen-support" data-status="unknown">
                  <td class="tw:font-semibold">Zainab Ali</td>
                  <td>Stoke Newington School & Sixth Form</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s">Moderate Learning Difficulty, Speech, Language or Communication Need</td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-secondary-subtle">Unknown</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="stoke-newington" data-year="year12" data-level="ehcp" data-status="pending">
                  <td class="tw:font-semibold">Harry Thompson</td>
                  <td>Stoke Newington School & Sixth Form</td>
                  <td>Year 12</td>
                  <td class="tw:text-body-s">Autistic Spectrum Disorder</td>
                  <td><span class="tw-badge tw-badge-magenta-subtle">EHCP</span></td>
                  <td><span class="tw-badge tw-badge-warning-subtle">Pending</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="stoke-newington" data-year="year13" data-level="sen-support" data-status="confirmed">
                  <td class="tw:font-semibold">Nia Williams</td>
                  <td>Stoke Newington School & Sixth Form</td>
                  <td>Year 13</td>
                  <td class="tw:text-body-s">Visual Impairment</td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-success-subtle">Confirmed</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="stoke-newington" data-year="year11" data-level="sen-support" data-status="unknown">
                  <td class="tw:font-semibold">Samuel Eze</td>
                  <td>Stoke Newington School & Sixth Form</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s"><span class="tw:text-neutral-400">—</span></td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-secondary-subtle">Unknown</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="city-academy" data-year="year11" data-level="ehcp" data-status="pending">
                  <td class="tw:font-semibold">Layla Ahmed</td>
                  <td>The City Academy, Hackney</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s">Social, Emotional and Mental Health</td>
                  <td><span class="tw-badge tw-badge-magenta-subtle">EHCP</span></td>
                  <td><span class="tw-badge tw-badge-warning-subtle">Pending</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="city-academy" data-year="year11" data-level="sen-support" data-status="unknown">
                  <td class="tw:font-semibold">Jacob Reid</td>
                  <td>The City Academy, Hackney</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s">Specific Learning Difficulty</td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-secondary-subtle">Unknown</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="city-academy" data-year="unspecified" data-level="sen-support" data-status="unknown">
                  <td class="tw:font-semibold">Amelia Scott</td>
                  <td>The City Academy, Hackney</td>
                  <td><span class="tw:text-neutral-400">—</span></td>
                  <td class="tw:text-body-s">Moderate Learning Difficulty</td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-secondary-subtle">Unknown</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="excelsior" data-year="year11" data-level="sen-support" data-status="unknown">
                  <td class="tw:font-semibold">Mohammed Iqbal</td>
                  <td>The Excelsior Academy</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s">Speech, Language or Communication Need</td>
                  <td><span class="tw-badge tw-badge-primary-subtle">SEN Support</span></td>
                  <td><span class="tw-badge tw-badge-secondary-subtle">Unknown</span></td>
                </tr>
                <tr data-send-students-target="row" data-school="excelsior" data-year="year11" data-level="ehcp" data-status="atrisk">
                  <td class="tw:font-semibold">Destiny Osei</td>
                  <td>The Excelsior Academy</td>
                  <td>Year 11</td>
                  <td class="tw:text-body-s">Social, Emotional and Mental Health, ASD</td>
                  <td><span class="tw-badge tw-badge-magenta-subtle">EHCP</span></td>
                  <td><span class="tw-badge tw-badge-danger-subtle">At Risk</span></td>
                </tr>
                <!-- Empty state -->
                <tr data-send-students-target="empty" hidden>
                  <td colspan="6" class="tw-table-empty">No SEND students match these filters.</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- Pagination (presentational) -->
        <nav aria-label="SEND students pagination" class="tw:mt-4 tw:flex tw:justify-center" data-send-students-target="pager">
          <ul class="tw-pagination tw-pagination-sm">
            <li class="tw-page-item disabled"><a class="tw-page-link" href="#" data-turbo="false" aria-label="Previous"><i class="fa-solid fa-chevron-left fa-xs"></i></a></li>
            <li class="tw-page-item tw-active"><a class="tw-page-link" href="#" data-turbo="false">1</a></li>
            <li class="tw-page-item"><a class="tw-page-link" href="#" data-turbo="false">2</a></li>
            <li class="tw-page-item"><a class="tw-page-link" href="#" data-turbo="false">3</a></li>
            <li class="tw-page-item"><a class="tw-page-link" href="#" data-turbo="false">4</a></li>
            <li class="tw-page-item"><a class="tw-page-link" href="#" data-turbo="false">5</a></li>
            <li class="tw-page-item"><a class="tw-page-link" href="#" data-turbo="false" aria-label="Next"><i class="fa-solid fa-chevron-right fa-xs"></i></a></li>
          </ul>
        </nav>
      </div>
    </div>
  </main>
</div>