<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>
    <div class="tw-topbar-right">
      <!-- Action Buttons -->
      <button type="button" class="tw-btn tw-btn-outline-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-outline-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-outline-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>
      <div class="tw-topbar-action-icons">
        <!-- 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>
      <!-- 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">
      <!-- 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>
      <div data-controller="directory">
        <!-- Prominent search -->
        <div class="tw-input-group tw-has-icon-start tw-has-icon-end tw:mb-4">
          <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>
        <!-- Summary stats -->
        <div class="tw:grid tw:grid-cols-2 tw:lg:grid-cols-4 tw:gap-3 tw:mb-4">
          <div class="tw-card tw:h-full">
            <div class="tw-card-body">
              <div class="tw:text-3xl tw:font-bold tw:text-green-600">46%</div>
              <div class="tw-small tw:text-neutral-500 tw:mt-1">Destinations confirmed (693)</div>
            </div>
          </div>
          <div class="tw-card tw:h-full">
            <div class="tw-card-body">
              <div class="tw:text-3xl tw:font-bold tw:text-warning">643</div>
              <div class="tw-small tw:text-neutral-500 tw:mt-1">Awaiting confirmation</div>
            </div>
          </div>
          <div class="tw-card tw:h-full">
            <div class="tw-card-body">
              <div class="tw:text-3xl tw:font-bold tw:text-danger">182</div>
              <div class="tw-small tw:text-neutral-500 tw:mt-1">Unknown destination</div>
            </div>
          </div>
          <div class="tw-card tw:h-full">
            <div class="tw-card-body">
              <div class="tw:text-3xl tw:font-bold tw:text-primary-500">1,519</div>
              <div class="tw-small tw:text-neutral-500 tw:mt-1">Year 11 tracked</div>
            </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-neutral-500" 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</th>
                  <th class="tw:text-right">Year 11</th>
                  <th class="tw:text-right">Confirmed</th>
                  <th class="tw:text-right">Pending</th>
                  <th class="tw:text-right">Unknown</th>
                  <th class="tw:text-right">NEET</th>
                  <th>Confirmation progress</th>
                  <th class="tw:text-right">Action</th>
                </tr>
              </thead>
              <tbody>
                <!-- ROW #1 — Cardinal Pole Catholic School | E9 6LG | Y11 164 | Confirmed 94 | Pending 45 | Unknown 25 | NEET 0 | Progress 57% → success -->
                <tr data-directory-target="row" data-search="cardinal pole catholic school e9 6lg">
                  <td class="tw:font-semibold">Cardinal Pole Catholic School
                    <div class="tw-small tw:text-neutral-500 tw:font-normal">E9 6LG</div>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">164</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-green-600">94</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-warning">45</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-danger">25</td>
                  <td class="tw:text-right tw:tabular-nums tw:text-neutral-500">0</td>
                  <td>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <div class="tw-progress tw:flex-1">
                        <div class="tw-progress-bar tw-progress-bar-success tw:[--progress-value:57%]"></div>
                      </div>
                      <span class="tw:w-10 tw:text-right tw:text-body-s tw:font-bold tw:tabular-nums tw:text-green-600">57%</span>
                    </div>
                  </td>
                  <td class="tw:text-right"><button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary">View</button></td>
                </tr>
                <!-- ROW #2 — Clapton Girls' Academy | E5 0RB | Y11 177 | Confirmed 89 | Pending 71 | Unknown 17 | NEET 0 | Progress 50% → warning -->
                <tr data-directory-target="row" data-search="clapton girls' academy e5 0rb">
                  <td class="tw:font-semibold">Clapton Girls' Academy
                    <div class="tw-small tw:text-neutral-500 tw:font-normal">E5 0RB</div>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">177</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-green-600">89</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-warning">71</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-danger">17</td>
                  <td class="tw:text-right tw:tabular-nums tw:text-neutral-500">0</td>
                  <td>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <div class="tw-progress tw:flex-1">
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:50%]"></div>
                      </div>
                      <span class="tw:w-10 tw:text-right tw:text-body-s tw:font-bold tw:tabular-nums tw:text-warning">50%</span>
                    </div>
                  </td>
                  <td class="tw:text-right"><button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary">View</button></td>
                </tr>
                <!-- ROW #3 — Hackney Collegiate Sixth Form (HCS) | N1 5JU | Y11 19 | Confirmed 7 | Pending 10 | Unknown 2 | NEET 0 | Progress 37% → warning -->
                <tr data-directory-target="row" data-search="hackney collegiate sixth form (hcs) n1 5ju">
                  <td class="tw:font-semibold">Hackney Collegiate Sixth Form (HCS)
                    <div class="tw-small tw:text-neutral-500 tw:font-normal">N1 5JU</div>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">19</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-green-600">7</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-warning">10</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-danger">2</td>
                  <td class="tw:text-right tw:tabular-nums tw:text-neutral-500">0</td>
                  <td>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <div class="tw-progress tw:flex-1">
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:37%]"></div>
                      </div>
                      <span class="tw:w-10 tw:text-right tw:text-body-s tw:font-bold tw:tabular-nums tw:text-warning">37%</span>
                    </div>
                  </td>
                  <td class="tw:text-right"><button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary">View</button></td>
                </tr>
                <!-- ROW #4 — Haggerston School | E2 8LS | Y11 163 | Confirmed 58 | Pending 81 | Unknown 24 | NEET 0 | Progress 36% → warning -->
                <tr data-directory-target="row" data-search="haggerston school e2 8ls">
                  <td class="tw:font-semibold">Haggerston School
                    <div class="tw-small tw:text-neutral-500 tw:font-normal">E2 8LS</div>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">163</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-green-600">58</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-warning">81</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-danger">24</td>
                  <td class="tw:text-right tw:tabular-nums tw:text-neutral-500">0</td>
                  <td>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <div class="tw-progress tw:flex-1">
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:36%]"></div>
                      </div>
                      <span class="tw:w-10 tw:text-right tw:text-body-s tw:font-bold tw:tabular-nums tw:text-warning">36%</span>
                    </div>
                  </td>
                  <td class="tw:text-right"><button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary">View</button></td>
                </tr>
                <!-- ROW #5 — Mossbourne Community Academy | E5 8JY | Y11 211 | Confirmed 108 | Pending 80 | Unknown 23 | NEET 0 | Progress 51% → warning -->
                <tr data-directory-target="row" data-search="mossbourne community academy e5 8jy">
                  <td class="tw:font-semibold">Mossbourne Community Academy
                    <div class="tw-small tw:text-neutral-500 tw:font-normal">E5 8JY</div>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">211</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-green-600">108</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-warning">80</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-danger">23</td>
                  <td class="tw:text-right tw:tabular-nums tw:text-neutral-500">0</td>
                  <td>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <div class="tw-progress tw:flex-1">
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:51%]"></div>
                      </div>
                      <span class="tw:w-10 tw:text-right tw:text-body-s tw:font-bold tw:tabular-nums tw:text-warning">51%</span>
                    </div>
                  </td>
                  <td class="tw:text-right"><button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary">View</button></td>
                </tr>
                <!-- ROW #6 — Skinners' Academy | N4 1SY | Y11 177 | Confirmed 90 | Pending 61 | Unknown 26 | NEET 0 | Progress 51% → warning -->
                <tr data-directory-target="row" data-search="skinners' academy n4 1sy">
                  <td class="tw:font-semibold">Skinners' Academy
                    <div class="tw-small tw:text-neutral-500 tw:font-normal">N4 1SY</div>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">177</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-green-600">90</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-warning">61</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-danger">26</td>
                  <td class="tw:text-right tw:tabular-nums tw:text-neutral-500">0</td>
                  <td>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <div class="tw-progress tw:flex-1">
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:51%]"></div>
                      </div>
                      <span class="tw:w-10 tw:text-right tw:text-body-s tw:font-bold tw:tabular-nums tw:text-warning">51%</span>
                    </div>
                  </td>
                  <td class="tw:text-right"><button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary">View</button></td>
                </tr>
                <!-- ROW #7 — Stoke Newington School & Sixth Form | N16 9EX | Y11 259 | Confirmed 90 | Pending 131 | Unknown 38 | NEET 0 | Progress 35% → warning -->
                <tr data-directory-target="row" data-search="stoke newington school & sixth form n16 9ex">
                  <td class="tw:font-semibold">Stoke Newington School & Sixth Form
                    <div class="tw-small tw:text-neutral-500 tw:font-normal">N16 9EX</div>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">259</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-green-600">90</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-warning">131</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-danger">38</td>
                  <td class="tw:text-right tw:tabular-nums tw:text-neutral-500">0</td>
                  <td>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <div class="tw-progress tw:flex-1">
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:35%]"></div>
                      </div>
                      <span class="tw:w-10 tw:text-right tw:text-body-s tw:font-bold tw:tabular-nums tw:text-warning">35%</span>
                    </div>
                  </td>
                  <td class="tw:text-right"><button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary">View</button></td>
                </tr>
                <!-- ROW #8 — The City Academy, Hackney | E9 6EA | Y11 179 | Confirmed 82 | Pending 81 | Unknown 16 | NEET 0 | Progress 46% → warning -->
                <tr data-directory-target="row" data-search="the city academy, hackney e9 6ea">
                  <td class="tw:font-semibold">The City Academy, Hackney
                    <div class="tw-small tw:text-neutral-500 tw:font-normal">E9 6EA</div>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">179</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-green-600">82</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-warning">81</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-danger">16</td>
                  <td class="tw:text-right tw:tabular-nums tw:text-neutral-500">0</td>
                  <td>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <div class="tw-progress tw:flex-1">
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:46%]"></div>
                      </div>
                      <span class="tw:w-10 tw:text-right tw:text-body-s tw:font-bold tw:tabular-nums tw:text-warning">46%</span>
                    </div>
                  </td>
                  <td class="tw:text-right"><button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary">View</button></td>
                </tr>
                <!-- ROW #9 — The Excelsior Academy | E8 2EY | Y11 170 | Confirmed 75 | Pending 83 | Unknown 11 | NEET 1 | Progress 44% → warning -->
                <tr data-directory-target="row" data-search="the excelsior academy e8 2ey">
                  <td class="tw:font-semibold">The Excelsior Academy
                    <div class="tw-small tw:text-neutral-500 tw:font-normal">E8 2EY</div>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">170</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-green-600">75</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-warning">83</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-danger">11</td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums tw:text-danger">1</td>
                  <td>
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <div class="tw-progress tw:flex-1">
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:44%]"></div>
                      </div>
                      <span class="tw:w-10 tw:text-right tw:text-body-s tw:font-bold tw:tabular-nums tw:text-warning">44%</span>
                    </div>
                  </td>
                  <td class="tw:text-right"><button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary">View</button></td>
                </tr>
                <!-- Empty state -->
                <tr data-directory-target="empty" hidden>
                  <td colspan="8" class="tw-table-empty">No schools match your search.</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>