<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>
    <!-- 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-neutral-500"></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-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> -->
      <!-- UNUSED FOR NOW, JUST KEEP IT HERE -->
      <div class="tw-topbar-action-icons tw:hidden" style="display: none">
        <!-- 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="student-detail"
         data-student-detail-student-name-value="Kayla Roberts"
         data-student-detail-popup-outlet="[data-sd-popup]">
      <!-- Page header: breadcrumb + back + title (NEET badge) + academic-year 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">
                <a href="/lookbook/preview/projects/la_dashboard/schools" data-turbo="false">Schools</a>
              </li>
              <li class="tw-breadcrumb-item">
                <a href="/lookbook/preview/projects/la_dashboard/school_detail" data-turbo="false">The Urswick School</a>
              </li>
              <li class="tw-breadcrumb-item tw-active" aria-current="page">Kayla Roberts</li>
            </ol>
          </nav>
        </div>
        <div class="tw-page-header-main">
          <a href="/lookbook/preview/projects/la_dashboard/school_detail" class="tw-page-header-back" data-turbo="false" aria-label="Back to The Urswick School">
            <i class="fa-solid fa-chevron-left tw-page-header-back-icon"></i>
          </a>
          <div class="tw-page-header-title-group">
            <h1 class="tw-page-header-title">Kayla Roberts
              <span class="tw-badge tw-badge-danger-subtle tw-badge-sm tw:ml-2 tw:align-middle">NEET RISK</span>
            </h1>
            <span class="tw-page-header-subtitle">Academic Year 2024/2025</span>
          </div>
        </div>
      </div>
      <!-- Student info card: contact (left) + general notes (right) -->
      <div class="tw-card tw:mb-4">
        <div class="tw-card-body">
          <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-6">
            <div class="tw:space-y-4">
              <div>
                <div class="tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:tracking-wide tw:uppercase tw:text-neutral-500">Email</div>
                <div class="tw:text-body-m tw:text-neutral-900 tw:mt-1">kayla.roberts@urswick.hackney.sch.uk</div>
              </div>
              <div>
                <div class="tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:tracking-wide tw:uppercase tw:text-neutral-500">Current school</div>
                <div class="tw:text-body-m tw:text-neutral-900 tw:mt-1">The Urswick School</div>
              </div>
            </div>
            <div>
              <div class="tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:tracking-wide tw:uppercase tw:text-neutral-500">General notes</div>
              <div class="tw:text-body-m tw:mt-1" data-student-detail-target="generalNotes">
                <span class="tw:text-neutral-500 tw:italic">No general notes recorded.</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Records section header: title + count + actions -->
      <div class="tw:flex tw:flex-col tw:gap-3 tw:mb-3 tw:md:flex-row tw:md:items-start tw:md:justify-between">
        <div>
          <h2 class="tw-h4 tw:mb-0">
            Student Destination Records
            <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw:ml-1 tw:align-middle" data-student-detail-target="count">2</span>
          </h2>
          <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-500 tw:mt-1 tw:mb-0">Destinations recorded for this student in the selected academic year.</p>
        </div>
        <div class="tw:flex tw:flex-wrap tw:gap-2">
          <button type="button" class="tw-btn tw-btn-outline-secondary" data-action="click->student-detail#openGeneralNotes">
            <i class="fa-regular fa-pen-to-square tw:mr-1"></i>Edit General Notes
          </button>
          <button type="button" class="tw-btn tw-btn-primary" data-action="click->student-detail#openAddDestination">
            <i class="fa-regular fa-plus tw:mr-1"></i>Add Destination Manually
          </button>
        </div>
      </div>
      <!-- Records table -->
      <div class="tw-card tw:overflow-hidden">
        <div class="tw-data-table-body">
          <table class="tw-table tw-table-hover">
            <thead>
              <tr>
                <th class="tw-table-cell-fit">#</th>
                <th>School</th>
                <th>Destination Type</th>
                <th>Status</th>
                <th>Interested Subjects</th>
                <th>Meeting Notes</th>
                <th class="tw:text-right">Actions</th>
              </tr>
            </thead>
            <tbody data-student-detail-target="recordsBody">
              <!-- Record 1 — Leyton Sixth Form College (Manual, Withdrawn) -->
              <tr data-record data-dest-type="College" data-dest-status="Withdrawn" data-dest-school="Leyton Sixth Form College">
                <td class="tw:text-neutral-500 tw:tabular-nums" data-record-index>1</td>
                <td>
                  <div class="tw:font-semibold" data-record-school>Leyton Sixth Form College</div>
                  <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw:mt-1"><i class="fa-regular fa-pen tw:mr-1"></i>Manual</span>
                </td>
                <td data-record-type>College</td>
                <td>
                  <span data-record-status><span class="tw-badge tw-badge-danger-subtle tw-badge-sm">Withdrawn</span></span>
                  <div class="tw:text-neutral-500 tw:text-body-xs tw:leading-body-xs tw:mt-1" data-record-updated>Last updated on 25/05/2026</div>
                </td>
                <td><span class="tw:text-neutral-500">—</span></td>
                <td><span class="tw:text-neutral-500" data-meeting-notes>—</span></td>
                <td class="tw:text-right">
                  <span class="tw:inline-flex tw:gap-1 tw:justify-end">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-tertiary tw-btn-icon" aria-label="Meeting notes" data-controller="tooltip" data-tooltip-content-value="Meeting notes" data-tooltip-placement-value="top" data-action="click->student-detail#openMeetingNotes"><i class="fa-regular fa-comment"></i></button>
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-tertiary tw-btn-icon" aria-label="Edit destination" data-controller="tooltip" data-tooltip-content-value="Edit destination" data-tooltip-placement-value="top" data-action="click->student-detail#openEditDestination"><i class="fa-regular fa-pen"></i></button>
                  </span>
                </td>
              </tr>
              <!-- Record 2 — Mossbourne Community Academy Sixth Form (ApplicaaOne, Applied) — no pen -->
              <tr data-record data-dest-type="School Sixth Form" data-dest-status="Applied" data-dest-school="Mossbourne Community Academy Sixth Form">
                <td class="tw:text-neutral-500 tw:tabular-nums" data-record-index>2</td>
                <td>
                  <div class="tw:font-semibold" data-record-school>Mossbourne Community Academy Sixth Form</div>
                  <span class="tw-badge tw-badge-info-subtle tw-badge-sm tw:mt-1"><i class="fa-solid fa-wand-magic-sparkles tw:mr-1"></i>ApplicaaOne</span>
                </td>
                <td data-record-type>School Sixth Form</td>
                <td>
                  <span data-record-status><span class="tw-badge tw-badge-warning-subtle tw-badge-sm">Applied</span></span>
                  <div class="tw:text-neutral-500 tw:text-body-xs tw:leading-body-xs tw:mt-1" data-record-updated>Last updated on 20/05/2026</div>
                </td>
                <td><span class="tw:text-neutral-500">—</span></td>
                <td><span class="tw:text-neutral-500" data-meeting-notes>—</span></td>
                <td class="tw:text-right">
                  <span class="tw:inline-flex tw:gap-1 tw:justify-end">
                    <button type="button" class="tw-btn tw-btn-sm tw-btn-tertiary tw-btn-icon" aria-label="Meeting notes" data-controller="tooltip" data-tooltip-content-value="Meeting notes" data-tooltip-placement-value="top" data-action="click->student-detail#openMeetingNotes"><i class="fa-regular fa-comment"></i></button>
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <!-- Row <template> for manually-added (Manual source) records -->
      <template data-student-detail-target="recordTemplate">
        <tr data-record data-dest-type="" data-dest-status="" data-dest-school="">
          <td class="tw:text-neutral-500 tw:tabular-nums" data-record-index>0</td>
          <td>
            <div class="tw:font-semibold" data-record-school></div>
            <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw:mt-1"><i class="fa-regular fa-pen tw:mr-1"></i>Manual</span>
          </td>
          <td data-record-type></td>
          <td>
            <span data-record-status></span>
            <div class="tw:text-neutral-500 tw:text-body-xs tw:leading-body-xs tw:mt-1" data-record-updated></div>
          </td>
          <td><span class="tw:text-neutral-500">—</span></td>
          <td><span class="tw:text-neutral-500" data-meeting-notes>—</span></td>
          <td class="tw:text-right">
            <span class="tw:inline-flex tw:gap-1 tw:justify-end">
              <button type="button" class="tw-btn tw-btn-sm tw-btn-tertiary tw-btn-icon" aria-label="Meeting notes" data-controller="tooltip" data-tooltip-content-value="Meeting notes" data-tooltip-placement-value="top" data-action="click->student-detail#openMeetingNotes"><i class="fa-regular fa-comment"></i></button>
              <button type="button" class="tw-btn tw-btn-sm tw-btn-tertiary tw-btn-icon" aria-label="Edit destination" data-controller="tooltip" data-tooltip-content-value="Edit destination" data-tooltip-placement-value="top" data-action="click->student-detail#openEditDestination"><i class="fa-regular fa-pen"></i></button>
            </span>
          </td>
        </tr>
      </template>
      <!-- ============ Pop-up 1: Notes editor (General + Meeting) ============ -->
      <div data-controller="popup" data-sd-popup="notes">
        <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
        <div class="tw-popup-panel tw-popup-lg" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="sd-notes-title">
          <div class="tw-popup-header">
            <div>
              <h2 class="tw-popup-header-title" id="sd-notes-title" data-student-detail-target="notesTitle">Edit General Notes</h2>
            </div>
            <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close">
              <i class="fa-solid fa-xmark"></i>
            </button>
          </div>
          <div class="tw-popup-body">
            <div class="tw-rte">
              <div class="tw-rte-toolbar" role="toolbar" aria-label="Formatting options">
                <div class="tw-rte-toolbar-group" role="group" aria-label="Block format">
                  <button class="tw-rte-toolbar-select" type="button">Paragraph <i class="fa-solid fa-chevron-down tw-rte-toolbar-select-chevron"></i></button>
                </div>
                <div class="tw-rte-toolbar-group" role="group" aria-label="Text formatting">
                  <button class="tw-rte-toolbar-btn" type="button" aria-label="Bold" aria-pressed="false" data-command="bold" data-action="mousedown->student-detail#preventBlur click->student-detail#format"><i class="fa-regular fa-bold"></i></button>
                  <button class="tw-rte-toolbar-btn" type="button" aria-label="Underline" aria-pressed="false" data-command="underline" data-action="mousedown->student-detail#preventBlur click->student-detail#format"><i class="fa-regular fa-underline"></i></button>
                  <button class="tw-rte-toolbar-btn" type="button" aria-label="Italic" aria-pressed="false" data-command="italic" data-action="mousedown->student-detail#preventBlur click->student-detail#format"><i class="fa-regular fa-italic"></i></button>
                </div>
                <div class="tw-rte-toolbar-group" role="group" aria-label="Alignment">
                  <button class="tw-rte-toolbar-btn tw-active" type="button" aria-label="Align left" aria-pressed="true" data-command="justifyLeft" data-action="mousedown->student-detail#preventBlur click->student-detail#format"><i class="fa-regular fa-align-left"></i></button>
                  <button class="tw-rte-toolbar-btn" type="button" aria-label="Align right" aria-pressed="false" data-command="justifyRight" data-action="mousedown->student-detail#preventBlur click->student-detail#format"><i class="fa-regular fa-align-right"></i></button>
                  <button class="tw-rte-toolbar-btn" type="button" aria-label="Align center" aria-pressed="false" data-command="justifyCenter" data-action="mousedown->student-detail#preventBlur click->student-detail#format"><i class="fa-regular fa-align-center"></i></button>
                  <button class="tw-rte-toolbar-btn" type="button" aria-label="Justify" aria-pressed="false" data-command="justifyFull" data-action="mousedown->student-detail#preventBlur click->student-detail#format"><i class="fa-regular fa-align-justify"></i></button>
                </div>
                <div class="tw-rte-toolbar-group" role="group" aria-label="More formatting">
                  <button class="tw-rte-toolbar-btn" type="button" aria-label="Strikethrough" aria-pressed="false" data-command="strikeThrough" data-action="mousedown->student-detail#preventBlur click->student-detail#format"><i class="fa-regular fa-strikethrough"></i></button>
                </div>
                <div class="tw-rte-toolbar-group" role="group" aria-label="More">
                  <button class="tw-rte-toolbar-btn" type="button" aria-label="More options"><i class="fa-regular fa-ellipsis-vertical"></i></button>
                </div>
              </div>
              <div class="tw-rte-content" contenteditable="true" tabindex="0" role="textbox" aria-multiline="true" aria-label="Notes" data-placeholder="Start typing…" data-student-detail-target="rteContent" data-popup-target="autofocus"></div>
            </div>
          </div>
          <div class="tw-popup-footer">
            <button class="tw-btn tw-btn-secondary" type="button" data-action="click->popup#close">Discard Changes</button>
            <button class="tw-btn tw-btn-success" type="button" data-action="click->student-detail#saveNotes">Save Change</button>
          </div>
        </div>
      </div>
      <!-- ============ Pop-up 2: Destination form (Add + Update) ============ -->
      <div data-controller="popup" data-sd-popup="destination">
        <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
        <div class="tw-popup-panel tw-popup-lg" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="sd-dest-title">
          <div class="tw-popup-header">
            <div>
              <h2 class="tw-popup-header-title" id="sd-dest-title" data-student-detail-target="destTitle">Add destination details for Kayla Roberts</h2>
            </div>
            <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close">
              <i class="fa-solid fa-xmark"></i>
            </button>
          </div>
          <div class="tw-popup-body">
            <div class="tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:gap-4">
              <div>
                <label for="sd-dest-type" class="tw-form-label">Destination Type <span class="tw:text-danger">*</span></label>
                <select id="sd-dest-type" class="tw-form-select" data-student-detail-target="destTypeSelect" data-popup-target="autofocus">
                  <option value="" disabled selected>Select…</option>
                  <option value="Apprenticeship">Apprenticeship</option>
                  <option value="College">College</option>
                  <option value="School Sixth Form">School Sixth Form</option>
                </select>
              </div>
              <div>
                <label for="sd-dest-status" class="tw-form-label">Status of application <span class="tw:text-danger">*</span></label>
                <select id="sd-dest-status" class="tw-form-select" data-student-detail-target="destStatusSelect">
                  <option value="" disabled selected>Select…</option>
                  <option value="Applied">Applied</option>
                  <option value="Offer accepted">Offer accepted</option>
                  <option value="Offer received">Offer received</option>
                  <option value="Withdrawn">Withdrawn</option>
                  <option value="Offer rejected">Offer rejected</option>
                  <option value="Enrolled">Enrolled</option>
                </select>
              </div>
            </div>
            <div class="tw:mt-4">
              <label for="sd-school-input" class="tw-form-label">School <span class="tw:text-danger">*</span></label>
              <div class="tw-dropdown tw-dropdown-search tw-dropdown-block" data-controller="dropdown" data-dropdown-teleport-value="true" data-student-detail-target="schoolWrap">
                <div class="tw-dropdown-trigger" data-dropdown-target="trigger" data-action="click->dropdown#focusSearchInput">
                  <input id="sd-school-input" type="text" class="tw-dropdown-search-input" placeholder="Type to search" autocomplete="off"
                         role="combobox" aria-autocomplete="list" aria-expanded="false" aria-controls="sd-school-menu"
                         data-student-detail-target="schoolInput"
                         data-dropdown-target="searchInput"
                         data-action="input->dropdown#filter focus->dropdown#open keydown->dropdown#keydown compositionstart->dropdown#startCompose compositionend->dropdown#endCompose">
                  <i class="fa-regular fa-chevron-down tw-dropdown-chevron" aria-hidden="true"></i>
                </div>
                <div id="sd-school-menu" class="tw-dropdown-menu" data-dropdown-target="menu" role="listbox">
                  <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="BSix Sixth Form College" data-action="click->dropdown#select">
                    <span class="tw-dropdown-item-text">BSix Sixth Form College</span>
                    <i class="fa-solid fa-check tw-dropdown-item-check" aria-hidden="true"></i>
                  </button>
                  <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="City and Islington College" data-action="click->dropdown#select">
                    <span class="tw-dropdown-item-text">City and Islington College</span>
                    <i class="fa-solid fa-check tw-dropdown-item-check" aria-hidden="true"></i>
                  </button>
                  <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Mossbourne Community Academy Sixth Form" data-action="click->dropdown#select">
                    <span class="tw-dropdown-item-text">Mossbourne Community Academy Sixth Form</span>
                    <i class="fa-solid fa-check tw-dropdown-item-check" aria-hidden="true"></i>
                  </button>
                  <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Newham Collegiate Sixth Form" data-action="click->dropdown#select">
                    <span class="tw-dropdown-item-text">Newham Collegiate Sixth Form</span>
                    <i class="fa-solid fa-check tw-dropdown-item-check" aria-hidden="true"></i>
                  </button>
                  <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Hackney New School" data-action="click->dropdown#select">
                    <span class="tw-dropdown-item-text">Hackney New School</span>
                    <i class="fa-solid fa-check tw-dropdown-item-check" aria-hidden="true"></i>
                  </button>
                  <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="The City Academy, Hackney" data-action="click->dropdown#select">
                    <span class="tw-dropdown-item-text">The City Academy, Hackney</span>
                    <i class="fa-solid fa-check tw-dropdown-item-check" aria-hidden="true"></i>
                  </button>
                  <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Stoke Newington School Sixth Form" data-action="click->dropdown#select">
                    <span class="tw-dropdown-item-text">Stoke Newington School Sixth Form</span>
                    <i class="fa-solid fa-check tw-dropdown-item-check" aria-hidden="true"></i>
                  </button>
                  <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Leyton Sixth Form College" data-action="click->dropdown#select">
                    <span class="tw-dropdown-item-text">Leyton Sixth Form College</span>
                    <i class="fa-solid fa-check tw-dropdown-item-check" aria-hidden="true"></i>
                  </button>
                  <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Westminster Kingsway College" data-action="click->dropdown#select">
                    <span class="tw-dropdown-item-text">Westminster Kingsway College</span>
                    <i class="fa-solid fa-check tw-dropdown-item-check" aria-hidden="true"></i>
                  </button>
                  <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Big Creative Academy" data-action="click->dropdown#select">
                    <span class="tw-dropdown-item-text">Big Creative Academy</span>
                    <i class="fa-solid fa-check tw-dropdown-item-check" aria-hidden="true"></i>
                  </button>
                  <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Hackney Community College" data-action="click->dropdown#select">
                    <span class="tw-dropdown-item-text">Hackney Community College</span>
                    <i class="fa-solid fa-check tw-dropdown-item-check" aria-hidden="true"></i>
                  </button>
                  <button type="button" class="tw-dropdown-item" role="option" data-dropdown-target="item" data-value="Haverstock School" data-action="click->dropdown#select">
                    <span class="tw-dropdown-item-text">Haverstock School</span>
                    <i class="fa-solid fa-check tw-dropdown-item-check" aria-hidden="true"></i>
                  </button>
                </div>
                <div class="tw-dropdown-status" role="status" aria-live="polite" data-dropdown-target="empty" hidden>
                  No matches for "<span data-dropdown-target="emptyQuery"></span>"
                </div>
              </div>
            </div>
          </div>
          <div class="tw-popup-footer">
            <button class="tw-btn tw-btn-primary" type="button" data-student-detail-target="destConfirmBtn" data-action="click->student-detail#confirmDestination">Confirm add destination</button>
          </div>
        </div>
      </div>
      <!-- DS toast outlet for action confirmations -->
      <div class="tw-toast-container" data-controller="toast" data-student-detail-target="toastContainer"></div>
    </div>
  </main>
</div>