<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 tw-active"
       data-label="Schools">
        <i class="fa-light fa-school tw-sidebar-icon"></i>
        <span class="tw:sr-only">Schools</span>
      </a>
      <!-- Students (navigates to the Students page) -->
      <a href="/lookbook/preview/projects/la_dashboard/students"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Students">
        <i class="fa-light fa-users tw-sidebar-icon"></i>
        <span class="tw:sr-only">Students</span>
      </a>
      <!-- Destination Tracker (navigates to the Destination Tracker page) -->
      <a href="/lookbook/preview/projects/la_dashboard/destination_tracker"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Destination Tracker">
        <i class="fa-light fa-location-dot tw-sidebar-icon"></i>
        <span class="tw:sr-only">Destination Tracker</span>
      </a>
      <!-- Transitions (navigates to the Transitions page) -->
      <a href="/lookbook/preview/projects/la_dashboard/transitions"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Transitions">
        <i class="fa-light fa-right-left tw-sidebar-icon"></i>
        <span class="tw:sr-only">Transitions</span>
      </a>
      <!-- SEND & NEET (navigates to the SEND & NEET page) -->
      <a href="/lookbook/preview/projects/la_dashboard/send_neet"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="SEND & NEET">
        <i class="fa-light fa-person-circle-exclamation tw-sidebar-icon"></i>
        <span class="tw:sr-only">SEND & NEET</span>
      </a>
    </nav>
    <!-- Bottom Section -->
    <div class="tw-sidebar-bottom">
      <a href="/lookbook/preview/projects/la_dashboard/settings"
       data-turbo="false"
       class="tw-sidebar-item"
       data-label="Settings">
        <i class="fa-light fa-cogs tw-sidebar-icon"></i>
        <span class="tw:sr-only">Settings</span>
      </a>
    </div>
  </aside>
  <header class="tw-topbar" role="banner">
    <div class="tw-topbar-left">
      <!-- LA brand lockup (logo placeholder + authority name) -->
      <div class="tw:flex tw:items-center tw:gap-3">
        <div class="tw-avatar tw-avatar-square tw-avatar-icon" role="img" aria-label="Hackney logo">
          <i class="fa-regular fa-building-columns tw:text-base"></i>
        </div>
        <h2 class="tw-h2 tw:text-neutral-800 tw:mb-0">Hackney</h2>
      </div>
    </div>
    <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: breadcrumb + title + subtitle -->
      <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">Schools</li>
            </ol>
          </nav>
        </div>
        <div class="tw-page-header-main">
          <div class="tw-page-header-title-group">
            <h1 class="tw-page-header-title">Schools</h1>
            <span class="tw-page-header-subtitle">Directory of schools and colleges tracked across Hackney</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, DfE number 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-primary-500">19</div>
              <div class="tw-small tw:text-neutral-500 tw:mt-1">Schools tracked</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,542</div>
              <div class="tw-small tw:text-neutral-500 tw:mt-1">Year 11 students</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-red-600">35</div>
              <div class="tw-small tw:text-neutral-500 tw:mt-1">High RONI risk</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-orange-600">107</div>
              <div class="tw-small tw:text-neutral-500 tw:mt-1">Medium RONI risk</div>
            </div>
          </div>
        </div>
        <!-- Directory 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-school tw:text-primary-500"></i>
              <span class="tw:font-semibold tw:text-body-s">School directory</span>
              <span class="tw-small tw:text-neutral-500" data-directory-target="count">19 of 19</span>
            </div>
            <div class="tw-data-table-toolbar-end">
              <div class="tw:flex tw:flex-wrap tw:gap-1" role="group" aria-label="Filter by phase">
                <button type="button" class="tw-tag tw-tag-pill tw-tag-primary tw-tag-interactive"
                        data-phase="all" data-directory-target="pill"
                        data-action="click->directory#selectPhase" aria-pressed="true">All</button>
                <button type="button" class="tw-tag tw-tag-pill tw-tag-secondary-subtle tw-tag-interactive"
                        data-phase="primary" data-directory-target="pill"
                        data-action="click->directory#selectPhase" aria-pressed="false">Primary</button>
                <button type="button" class="tw-tag tw-tag-pill tw-tag-secondary-subtle tw-tag-interactive"
                        data-phase="secondary" data-directory-target="pill"
                        data-action="click->directory#selectPhase" aria-pressed="false">Secondary</button>
                <button type="button" class="tw-tag tw-tag-pill tw-tag-secondary-subtle tw-tag-interactive"
                        data-phase="sixth" data-directory-target="pill"
                        data-action="click->directory#selectPhase" aria-pressed="false">Sixth Form</button>
                <button type="button" class="tw-tag tw-tag-pill tw-tag-secondary-subtle tw-tag-interactive"
                        data-phase="special" data-directory-target="pill"
                        data-action="click->directory#selectPhase" aria-pressed="false">Special / AP</button>
                <button type="button" class="tw-tag tw-tag-pill tw-tag-secondary-subtle tw-tag-interactive"
                        data-phase="home" data-directory-target="pill"
                        data-action="click->directory#selectPhase" aria-pressed="false">Home educated</button>
                <button type="button" class="tw-tag tw-tag-pill tw-tag-secondary-subtle tw-tag-interactive"
                        data-phase="notinschool" data-directory-target="pill"
                        data-action="click->directory#selectPhase" aria-pressed="false">Not in School</button>
              </div>
            </div>
          </div>
          <!-- RONI legend (inset px-4 to align with the table cells; full-width border-t divider) -->
          <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-4 tw:px-4 tw:py-2.5 tw:border-t tw:border-neutral-200">
            <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">
              <strong class="tw:font-semibold tw:text-neutral-900">RONI risk profile</strong> — Year 11 cohort by Risk of NEET Indicator band. Thresholds configurable in Settings.
            </span>
            <span class="tw:inline-flex tw:flex-wrap tw:items-center tw:gap-4 tw:ml-auto">
              <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-body-xs tw:leading-body-xs">
                <span class="tw:inline-block tw:w-2.5 tw:h-2.5 tw:rounded-sm tw:bg-primary-500"></span>No risk
              </span>
              <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-body-xs tw:leading-body-xs">
                <span class="tw:inline-block tw:w-2.5 tw:h-2.5 tw:rounded-sm tw:bg-green-600"></span>Low
              </span>
              <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-body-xs tw:leading-body-xs">
                <span class="tw:inline-block tw:w-2.5 tw:h-2.5 tw:rounded-sm tw:bg-orange-500"></span>Medium
              </span>
              <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-body-xs tw:leading-body-xs">
                <span class="tw:inline-block tw:w-2.5 tw:h-2.5 tw:rounded-sm tw:bg-red-500"></span>High
              </span>
            </span>
          </div>
          <div class="tw-data-table-body">
            <table class="tw-table tw-table-hover">
              <thead>
                <tr>
                  <th>School name</th>
                  <th>DfE number</th>
                  <th>Postcode</th>
                  <th>Phase</th>
                  <th class="tw:text-right">Year 11 students</th>
                  <th>RONI risk profile</th>
                  <th class="tw:text-right">Action</th>
                </tr>
              </thead>
              <tbody>
                <!-- ROW #1 — Cardinal Pole Catholic School -->
                <tr data-directory-target="row"
                    data-search="cardinal pole catholic school 204/4716 e9 6lg"
                    data-phases="secondary sixth">
                  <td class="tw:font-semibold">Cardinal Pole Catholic School</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/4716</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">E9 6LG</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Secondary</span>
                      <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Sixth Form</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">164</td>
                  <td>
                    <div>
                      <div class="tw-progress tw-progress-stacked" role="img"
                           aria-label="RONI risk profile: 115 no risk, 38 low, 9 medium, 2 high of 164 Year 11 students">
                        <div class="tw-progress-bar tw-progress-bar-primary tw:[--progress-value:70.1%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-success tw:[--progress-value:23.2%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:5.5%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-danger tw:[--progress-value:1.2%]"></div>
                      </div>
                      <div class="tw:flex tw:gap-2.5 tw:mt-1.5 tw:text-body-xs tw:leading-body-xs tw:tabular-nums">
                        <span class="tw:text-red-600 tw:font-bold">2 high</span>
                        <span class="tw:text-orange-600 tw:font-bold">9 med</span>
                        <span class="tw:text-green-600 tw:font-semibold">38 low</span>
                      </div>
                    </div>
                  </td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="Cardinal Pole Catholic School" data-school-cohort="164">View</button>
                  </td>
                </tr>
                <!-- ROW #2 — City of London Academy, Shoreditch Park — Year 11 = 0 -->
                <tr data-directory-target="row"
                    data-search="city of london academy, shoreditch park 204/6906 n1 5ju"
                    data-phases="secondary">
                  <td class="tw:font-semibold">City of London Academy, Shoreditch Park</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/6906</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">N1 5JU</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Secondary</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">—</td>
                  <td><span class="tw:text-neutral-500">—</span></td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="City of London Academy, Shoreditch Park" data-school-cohort="0">View</button>
                  </td>
                </tr>
                <!-- ROW #3 — Clapton Girls' Academy -->
                <tr data-directory-target="row"
                    data-search="clapton girls' academy 204/4003 e5 0rb"
                    data-phases="secondary sixth">
                  <td class="tw:font-semibold">Clapton Girls' Academy</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/4003</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">E5 0RB</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Secondary</span>
                      <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Sixth Form</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">177</td>
                  <td>
                    <div>
                      <div class="tw-progress tw-progress-stacked" role="img"
                           aria-label="RONI risk profile: 123 no risk, 40 low, 11 medium, 3 high of 177 Year 11 students">
                        <div class="tw-progress-bar tw-progress-bar-primary tw:[--progress-value:69.5%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-success tw:[--progress-value:22.6%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:6.2%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-danger tw:[--progress-value:1.7%]"></div>
                      </div>
                      <div class="tw:flex tw:gap-2.5 tw:mt-1.5 tw:text-body-xs tw:leading-body-xs tw:tabular-nums">
                        <span class="tw:text-red-600 tw:font-bold">3 high</span>
                        <span class="tw:text-orange-600 tw:font-bold">11 med</span>
                        <span class="tw:text-green-600 tw:font-semibold">40 low</span>
                      </div>
                    </div>
                  </td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="Clapton Girls' Academy" data-school-cohort="177">View</button>
                  </td>
                </tr>
                <!-- ROW #4 — Comet Nursery School and Children's Centre — primary, Year 11 = 0 -->
                <tr data-directory-target="row"
                    data-search="comet nursery school and children's centre 204/1003 n1 5rf"
                    data-phases="primary">
                  <td class="tw:font-semibold">Comet Nursery School and Children's Centre</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/1003</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">N1 5RF</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-success-subtle tw-badge-sm">Primary</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">—</td>
                  <td><span class="tw:text-neutral-500">—</span></td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="Comet Nursery School and Children's Centre" data-school-cohort="0">View</button>
                  </td>
                </tr>
                <!-- ROW #5 — Hackney Collegiate Sixth Form (HCS) — sixth only -->
                <tr data-directory-target="row"
                    data-search="hackney collegiate sixth form (hcs) 204/6914 n1 5ju"
                    data-phases="sixth">
                  <td class="tw:font-semibold">Hackney Collegiate Sixth Form (HCS)</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/6914</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">N1 5JU</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Sixth Form</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">19</td>
                  <td>
                    <div>
                      <div class="tw-progress tw-progress-stacked" role="img"
                           aria-label="RONI risk profile: 11 no risk, 5 low, 2 medium, 1 high of 19 Year 11 students">
                        <div class="tw-progress-bar tw-progress-bar-primary tw:[--progress-value:57.9%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-success tw:[--progress-value:26.3%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:10.5%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-danger tw:[--progress-value:5.3%]"></div>
                      </div>
                      <div class="tw:flex tw:gap-2.5 tw:mt-1.5 tw:text-body-xs tw:leading-body-xs tw:tabular-nums">
                        <span class="tw:text-red-600 tw:font-bold">1 high</span>
                        <span class="tw:text-orange-600 tw:font-bold">2 med</span>
                        <span class="tw:text-green-600 tw:font-semibold">5 low</span>
                      </div>
                    </div>
                  </td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="Hackney Collegiate Sixth Form (HCS)" data-school-cohort="19">View</button>
                  </td>
                </tr>
                <!-- ROW #6 — Haggerston School -->
                <tr data-directory-target="row"
                    data-search="haggerston school 204/4004 e2 8ls"
                    data-phases="secondary sixth">
                  <td class="tw:font-semibold">Haggerston School</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/4004</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">E2 8LS</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Secondary</span>
                      <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Sixth Form</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">163</td>
                  <td>
                    <div>
                      <div class="tw-progress tw-progress-stacked" role="img"
                           aria-label="RONI risk profile: 106 no risk, 41 low, 12 medium, 4 high of 163 Year 11 students">
                        <div class="tw-progress-bar tw-progress-bar-primary tw:[--progress-value:65.0%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-success tw:[--progress-value:25.2%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:7.4%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-danger tw:[--progress-value:2.5%]"></div>
                      </div>
                      <div class="tw:flex tw:gap-2.5 tw:mt-1.5 tw:text-body-xs tw:leading-body-xs tw:tabular-nums">
                        <span class="tw:text-red-600 tw:font-bold">4 high</span>
                        <span class="tw:text-orange-600 tw:font-bold">12 med</span>
                        <span class="tw:text-green-600 tw:font-semibold">41 low</span>
                      </div>
                    </div>
                  </td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="Haggerston School" data-school-cohort="163">View</button>
                  </td>
                </tr>
                <!-- ROW #7 — Ickburgh School — special, Year 11 = 0 -->
                <tr data-directory-target="row"
                    data-search="ickburgh school 204/7001 e5 8na"
                    data-phases="special">
                  <td class="tw:font-semibold">Ickburgh School</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/7001</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">E5 8NA</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-danger-subtle tw-badge-sm">Special / AP</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">—</td>
                  <td><span class="tw:text-neutral-500">—</span></td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="Ickburgh School" data-school-cohort="0">View</button>
                  </td>
                </tr>
                <!-- ROW #8 — Lubavitch House School (Senior Girls) — secondary, Year 11 = 0 -->
                <tr data-directory-target="row"
                    data-search="lubavitch house school (senior girls) 204/6001 n16 5rp"
                    data-phases="secondary">
                  <td class="tw:font-semibold">Lubavitch House School (Senior Girls)</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/6001</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">N16 5RP</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Secondary</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">—</td>
                  <td><span class="tw:text-neutral-500">—</span></td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="Lubavitch House School (Senior Girls)" data-school-cohort="0">View</button>
                  </td>
                </tr>
                <!-- ROW #9 — Mossbourne Community Academy -->
                <tr data-directory-target="row"
                    data-search="mossbourne community academy 204/6905 e5 8jy"
                    data-phases="secondary sixth">
                  <td class="tw:font-semibold">Mossbourne Community Academy</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/6905</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">E5 8JY</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Secondary</span>
                      <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Sixth Form</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">211</td>
                  <td>
                    <div>
                      <div class="tw-progress tw-progress-stacked" role="img"
                           aria-label="RONI risk profile: 154 no risk, 45 low, 10 medium, 2 high of 211 Year 11 students">
                        <div class="tw-progress-bar tw-progress-bar-primary tw:[--progress-value:73.0%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-success tw:[--progress-value:21.3%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:4.7%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-danger tw:[--progress-value:0.9%]"></div>
                      </div>
                      <div class="tw:flex tw:gap-2.5 tw:mt-1.5 tw:text-body-xs tw:leading-body-xs tw:tabular-nums">
                        <span class="tw:text-red-600 tw:font-bold">2 high</span>
                        <span class="tw:text-orange-600 tw:font-bold">10 med</span>
                        <span class="tw:text-green-600 tw:font-semibold">45 low</span>
                      </div>
                    </div>
                  </td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="Mossbourne Community Academy" data-school-cohort="211">View</button>
                  </td>
                </tr>
                <!-- ROW #10 — Skinners' Academy -->
                <tr data-directory-target="row"
                    data-search="skinners' academy 204/6907 n4 1sy"
                    data-phases="secondary sixth">
                  <td class="tw:font-semibold">Skinners' Academy</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/6907</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">N4 1SY</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Secondary</span>
                      <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Sixth Form</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">177</td>
                  <td>
                    <div>
                      <div class="tw-progress tw-progress-stacked" role="img"
                           aria-label="RONI risk profile: 120 no risk, 42 low, 12 medium, 3 high of 177 Year 11 students">
                        <div class="tw-progress-bar tw-progress-bar-primary tw:[--progress-value:67.8%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-success tw:[--progress-value:23.7%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:6.8%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-danger tw:[--progress-value:1.7%]"></div>
                      </div>
                      <div class="tw:flex tw:gap-2.5 tw:mt-1.5 tw:text-body-xs tw:leading-body-xs tw:tabular-nums">
                        <span class="tw:text-red-600 tw:font-bold">3 high</span>
                        <span class="tw:text-orange-600 tw:font-bold">12 med</span>
                        <span class="tw:text-green-600 tw:font-semibold">42 low</span>
                      </div>
                    </div>
                  </td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="Skinners' Academy" data-school-cohort="177">View</button>
                  </td>
                </tr>
                <!-- ROW #11 — Stoke Newington School & Sixth Form -->
                <tr data-directory-target="row"
                    data-search="stoke newington school & sixth form 204/4007 n16 9ex"
                    data-phases="secondary sixth">
                  <td class="tw:font-semibold">Stoke Newington School & Sixth Form</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/4007</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">N16 9EX</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Secondary</span>
                      <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Sixth Form</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">259</td>
                  <td>
                    <div>
                      <div class="tw-progress tw-progress-stacked" role="img"
                           aria-label="RONI risk profile: 178 no risk, 60 low, 16 medium, 5 high of 259 Year 11 students">
                        <div class="tw-progress-bar tw-progress-bar-primary tw:[--progress-value:68.7%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-success tw:[--progress-value:23.2%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:6.2%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-danger tw:[--progress-value:1.9%]"></div>
                      </div>
                      <div class="tw:flex tw:gap-2.5 tw:mt-1.5 tw:text-body-xs tw:leading-body-xs tw:tabular-nums">
                        <span class="tw:text-red-600 tw:font-bold">5 high</span>
                        <span class="tw:text-orange-600 tw:font-bold">16 med</span>
                        <span class="tw:text-green-600 tw:font-semibold">60 low</span>
                      </div>
                    </div>
                  </td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="Stoke Newington School & Sixth Form" data-school-cohort="259">View</button>
                  </td>
                </tr>
                <!-- ROW #12 — Stormont House School — special, Year 11 = 0 -->
                <tr data-directory-target="row"
                    data-search="stormont house school 204/7002 e5 8np"
                    data-phases="special">
                  <td class="tw:font-semibold">Stormont House School</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/7002</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">E5 8NP</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-danger-subtle tw-badge-sm">Special / AP</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">—</td>
                  <td><span class="tw:text-neutral-500">—</span></td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="Stormont House School" data-school-cohort="0">View</button>
                  </td>
                </tr>
                <!-- ROW #13 — The Bridge Academy — secondary, Year 11 = 0 -->
                <tr data-directory-target="row"
                    data-search="the bridge academy 204/6908 e2 8lf"
                    data-phases="secondary">
                  <td class="tw:font-semibold">The Bridge Academy</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/6908</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">E2 8LF</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Secondary</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">—</td>
                  <td><span class="tw:text-neutral-500">—</span></td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="The Bridge Academy" data-school-cohort="0">View</button>
                  </td>
                </tr>
                <!-- ROW #14 — The Brooke House Sixth Form College — sixth, Year 11 = 0 -->
                <tr data-directory-target="row"
                    data-search="the brooke house sixth form college 204/8001 e5 8ar"
                    data-phases="sixth">
                  <td class="tw:font-semibold">The Brooke House Sixth Form College</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/8001</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">E5 8AR</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Sixth Form</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">—</td>
                  <td><span class="tw:text-neutral-500">—</span></td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="The Brooke House Sixth Form College" data-school-cohort="0">View</button>
                  </td>
                </tr>
                <!-- ROW #15 — The City Academy, Hackney -->
                <tr data-directory-target="row"
                    data-search="the city academy, hackney 204/6909 e9 6ea"
                    data-phases="secondary sixth">
                  <td class="tw:font-semibold">The City Academy, Hackney</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/6909</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">E9 6EA</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Secondary</span>
                      <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Sixth Form</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">179</td>
                  <td>
                    <div>
                      <div class="tw-progress tw-progress-stacked" role="img"
                           aria-label="RONI risk profile: 121 no risk, 44 low, 11 medium, 3 high of 179 Year 11 students">
                        <div class="tw-progress-bar tw-progress-bar-primary tw:[--progress-value:67.6%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-success tw:[--progress-value:24.6%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:6.1%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-danger tw:[--progress-value:1.7%]"></div>
                      </div>
                      <div class="tw:flex tw:gap-2.5 tw:mt-1.5 tw:text-body-xs tw:leading-body-xs tw:tabular-nums">
                        <span class="tw:text-red-600 tw:font-bold">3 high</span>
                        <span class="tw:text-orange-600 tw:font-bold">11 med</span>
                        <span class="tw:text-green-600 tw:font-semibold">44 low</span>
                      </div>
                    </div>
                  </td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="The City Academy, Hackney" data-school-cohort="179">View</button>
                  </td>
                </tr>
                <!-- ROW #16 — The Excelsior Academy -->
                <tr data-directory-target="row"
                    data-search="the excelsior academy 204/6912 e8 2ey"
                    data-phases="secondary sixth">
                  <td class="tw:font-semibold">The Excelsior Academy</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/6912</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">E8 2EY</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Secondary</span>
                      <span class="tw-badge tw-badge-primary-subtle tw-badge-sm">Sixth Form</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">170</td>
                  <td>
                    <div>
                      <div class="tw-progress tw-progress-stacked" role="img"
                           aria-label="RONI risk profile: 100 no risk, 46 low, 18 medium, 6 high of 170 Year 11 students">
                        <div class="tw-progress-bar tw-progress-bar-primary tw:[--progress-value:58.8%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-success tw:[--progress-value:27.1%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:10.6%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-danger tw:[--progress-value:3.5%]"></div>
                      </div>
                      <div class="tw:flex tw:gap-2.5 tw:mt-1.5 tw:text-body-xs tw:leading-body-xs tw:tabular-nums">
                        <span class="tw:text-red-600 tw:font-bold">6 high</span>
                        <span class="tw:text-orange-600 tw:font-bold">18 med</span>
                        <span class="tw:text-green-600 tw:font-semibold">46 low</span>
                      </div>
                    </div>
                  </td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="The Excelsior Academy" data-school-cohort="170">View</button>
                  </td>
                </tr>
                <!-- ROW #17 — The Urswick School — secondary, Year 11 = 0 -->
                <tr data-directory-target="row"
                    data-search="the urswick school 204/4715 e9 6nr"
                    data-phases="secondary">
                  <td class="tw:font-semibold">The Urswick School</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">204/4715</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">E9 6NR</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Secondary</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">—</td>
                  <td><span class="tw:text-neutral-500">—</span></td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="The Urswick School" data-school-cohort="0">View</button>
                  </td>
                </tr>
                <!-- ROW #18 — Electively Home Educated (EHE) — cohort bucket -->
                <tr data-directory-target="row"
                    data-search="electively home educated (ehe)"
                    data-phases="home">
                  <td class="tw:font-semibold">Electively Home Educated (EHE)</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">—</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">—</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-magenta-subtle tw-badge-sm">Home educated</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">14</td>
                  <td>
                    <div>
                      <div class="tw-progress tw-progress-stacked" role="img"
                           aria-label="RONI risk profile: 5 no risk, 5 low, 3 medium, 1 high of 14 Year 11 students">
                        <div class="tw-progress-bar tw-progress-bar-primary tw:[--progress-value:35.7%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-success tw:[--progress-value:35.7%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:21.4%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-danger tw:[--progress-value:7.1%]"></div>
                      </div>
                      <div class="tw:flex tw:gap-2.5 tw:mt-1.5 tw:text-body-xs tw:leading-body-xs tw:tabular-nums">
                        <span class="tw:text-red-600 tw:font-bold">1 high</span>
                        <span class="tw:text-orange-600 tw:font-bold">3 med</span>
                        <span class="tw:text-green-600 tw:font-semibold">5 low</span>
                      </div>
                    </div>
                  </td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="Electively Home Educated (EHE)" data-school-cohort="14">View</button>
                  </td>
                </tr>
                <!-- ROW #19 — Not in School / Awaiting provision — cohort bucket (noRisk = 0 → omitted) -->
                <tr data-directory-target="row"
                    data-search="not in school / awaiting provision"
                    data-phases="notinschool">
                  <td class="tw:font-semibold">Not in School / Awaiting provision</td>
                  <td class="tw:text-neutral-500 tw:font-mono tw:text-body-xs tw:tracking-wide">—</td>
                  <td class="tw:text-neutral-500 tw:tabular-nums">—</td>
                  <td>
                    <span class="tw:inline-flex tw:flex-wrap tw:gap-1">
                      <span class="tw-badge tw-badge-danger-subtle tw-badge-sm">Not in School</span>
                    </span>
                  </td>
                  <td class="tw:text-right tw:font-bold tw:tabular-nums">9</td>
                  <td>
                    <div>
                      <div class="tw-progress tw-progress-stacked" role="img"
                           aria-label="RONI risk profile: 0 no risk, 1 low, 3 medium, 5 high of 9 Year 11 students">
                        <div class="tw-progress-bar tw-progress-bar-success tw:[--progress-value:11.1%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-warning tw:[--progress-value:33.3%]"></div>
                        <div class="tw-progress-bar tw-progress-bar-danger tw:[--progress-value:55.6%]"></div>
                      </div>
                      <div class="tw:flex tw:gap-2.5 tw:mt-1.5 tw:text-body-xs tw:leading-body-xs tw:tabular-nums">
                        <span class="tw:text-red-600 tw:font-bold">5 high</span>
                        <span class="tw:text-orange-600 tw:font-bold">3 med</span>
                        <span class="tw:text-green-600 tw:font-semibold">1 low</span>
                      </div>
                    </div>
                  </td>
                  <td class="tw:text-right">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-outline-primary"
                            data-action="click->directory#view"
                      data-school-name="Not in School / Awaiting provision" data-school-cohort="9">View</button>
                  </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>
        <!-- Toast container (View → presentational toast) -->
        <div class="tw-toast-container" data-controller="toast" data-directory-target="toastContainer"></div>
      </div>
    </div>
  </main>
</div>