<div data-controller="sidebar">
  <div class="tw:flex tw:min-h-screen tw:bg-background">
    <aside class="tw-sidebar">
      <!-- Logo -->
      <div class="tw-sidebar-logo">
        <a href="#" class="tw-sidebar-logo-link">
          <img src="/mat-plus-logo.png" alt="MAT plus — home">
        </a>
      </div>
      <!-- Navigation -->
      <nav class="tw-sidebar-nav" role="navigation" aria-label="MAT navigation">
        <a href="#"
         class="tw-sidebar-item"
         data-label="MAT Templates"
         >
          <i class="fa-light fa-files tw-sidebar-icon"></i>
          <span class="tw:sr-only">MAT Templates</span>
        </a>
        <a href="#"
         class="tw-sidebar-item"
         data-label="Insights"
         >
          <i class="fa-light fa-chart-mixed tw-sidebar-icon"></i>
          <span class="tw:sr-only">Insights</span>
        </a>
        <a href="#"
         class="tw-sidebar-item"
         data-label="Destination Tracker"
         >
          <i class="fa-light fa-school-flag tw-sidebar-icon"></i>
          <span class="tw:sr-only">Destination Tracker</span>
        </a>
        <a href="#"
         class="tw-sidebar-item"
         data-label="Student Retention"
         >
          <i class="fa-light fa-graduation-cap tw-sidebar-icon"></i>
          <span class="tw:sr-only">Student Retention</span>
        </a>
        <button type="button"
              class="tw-sidebar-item"
              data-sidebar-target="item"
              data-action="click->sidebar#toggleDrawer"
          data-drawer="events_calendar"
          data-label="Events & Calendar"
          aria-expanded="false">
          <i class="fa-light fa-calendar-star tw-sidebar-icon"></i>
          <span class="tw:sr-only">Events & Calendar</span>
        </button>
        <button type="button"
              class="tw-sidebar-item tw-active"
              data-sidebar-target="item"
              data-action="click->sidebar#toggleDrawer"
          data-drawer="enquiries_surveys"
          data-label="Enquiries & Surveys"
          aria-expanded="false">
          <i class="fa-light fa-envelope tw-sidebar-icon"></i>
          <span class="tw:sr-only">Enquiries & Surveys</span>
        </button>
      </nav>
      <!-- Bottom Section -->
      <div class="tw-sidebar-bottom">
        <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
          data-drawer="trust_settings"
          data-label="Trust Settings"
          aria-expanded="false">
          <i class="fa-light fa-cog tw-sidebar-icon"></i>
          <span class="tw:sr-only">Trust Settings</span>
        </button>
        <a href="#" class="tw-sidebar-item" data-label="Sign out">
          <i class="fa-light fa-sign-out tw-sidebar-icon"></i>
          <span class="tw:sr-only">Sign out</span>
        </a>
      </div>
    </aside>
    <div class="tw-sidebar-drawer"
       data-sidebar-target="drawer"
       data-drawer-id="events_calendar"
       aria-label="Events & Calendar navigation">
      <div class="tw-sidebar-drawer-header">EVENTS & CALENDAR</div>
      <nav class="tw-drawer-nav">
        <a href="/lookbook/preview/projects/mat_plus/events"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Events</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Calendar</span>
        </a>
      </nav>
    </div>
    <div class="tw-sidebar-drawer"
       data-sidebar-target="drawer"
       data-drawer-id="enquiries_surveys"
       aria-label="Enquiries & Surveys navigation">
      <div class="tw-sidebar-drawer-header">ENQUIRIES & SURVEYS</div>
      <nav class="tw-drawer-nav">
        <a href="/lookbook/preview/projects/mat_enquiries/all_enquiries"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Enquiries</span>
        </a>
        <a href="/lookbook/preview/projects/mat_surveys/surveys"
           class="tw-drawer-item tw-active">
          <span class="tw-drawer-item-label">Surveys</span>
        </a>
      </nav>
    </div>
    <div class="tw-sidebar-drawer"
       data-sidebar-target="drawer"
       data-drawer-id="trust_settings"
       aria-label="Trust Settings navigation">
      <div class="tw-sidebar-drawer-header">TRUST SETTINGS</div>
      <nav class="tw-drawer-nav">
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Settings</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Admins & Staff</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Invitation</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Group Linking Requests</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Password & Security</span>
        </a>
        <a href="#"
           class="tw-drawer-item">
          <span class="tw-drawer-item-label">Old Dashboard</span>
        </a>
      </nav>
    </div>
    <div class="tw:ml-16 tw:flex-1 tw:min-w-0 tw:flex tw:flex-col">
      <header class="tw:sticky tw:top-0 tw:z-40 tw:flex tw:items-center tw:justify-between tw:h-16 tw:px-6 tw:bg-neutral-0 tw:border-b tw:border-neutral-200" role="banner">
        <!-- Left: Trust identity -->
        <div class="tw:flex tw:items-center tw:gap-3">
          <div class="tw:w-10 tw:h-10 tw:rounded-lg tw:bg-neutral-100 tw:flex tw:items-center tw:justify-center tw:text-neutral-400 tw:shrink-0">
            <i class="fa-regular fa-building tw:text-lg" aria-hidden="true"></i>
          </div>
          <div>
            <div class="fw-bold tw:text-body-m tw:leading-body-m tw:text-neutral-900">Demo School Trust</div>
            <div class="tw:hidden tw:md:block tw:text-body-xs tw:leading-body-xs text-muted">39 Schools • 4 Regions • 30,000+ Students</div>
          </div>
        </div>
        <!-- Right: Search + action buttons + notifications + avatar -->
        <div class="tw-topbar-right">
          <!-- Search -->
          <div class="tw:hidden tw:lg:flex tw-topbar-search">
            <div class="tw-input-group tw-has-icon-start">
              <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i>
              <input type="search" class="tw-form-control" placeholder="Search surveys, schools..." aria-label="Search">
            </div>
          </div>
          <!-- Action Buttons -->
          <button type="button" class="tw-btn tw-btn-outline-success tw-btn-multiline tw:hidden tw:xl:inline-flex" 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 tw:xl:inline-flex" 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 tw:hidden tw:xl:inline-flex" 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">
            <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:flex-1 tw:min-w-0 tw:bg-background tw:flex tw:flex-col">
        <div class="tw-container-fluid tw:pb-6">
          <!-- Page Header — breadcrumb + borderless -->
          <div class="tw-page-header tw-page-header-borderless tw:mb-2">
            <div class="tw-page-header-breadcrumb">
              <nav aria-label="Breadcrumb">
                <ol class="tw-breadcrumb">
                  <li class="tw-breadcrumb-item">Enquiries & Surveys</li>
                  <li class="tw-breadcrumb-item tw-active" aria-current="page">Surveys</li>
                </ol>
              </nav>
            </div>
            <div class="tw-page-header-main">
              <div class="tw-page-header-title-group">
                <h1 class="tw-page-header-title">Surveys</h1>
                <p class="tw-page-header-subtitle">Create, manage and analyse surveys across Demo School Trust — 39 schools</p>
              </div>
              <div class="tw-page-header-actions">
                <a href="/lookbook/preview/projects/mat_surveys/surveys" class="tw-btn tw-btn-primary">
                  <i class="fa-regular fa-plus" aria-hidden="true"></i> New Survey
                </a>
              </div>
            </div>
          </div>
          <!-- KPI Strip -->
          <div class="tw-card tw:mb-4">
            <div class="tw:grid tw:grid-cols-2 tw:lg:grid-cols-4 tw:divide-x tw:divide-neutral-translucent-200">
              <div class="tw:px-4 tw:py-3">
                <div class="tw-h6 text-muted tw:mb-1">TOTAL SURVEYS</div>
                <div class="tw-h4 tw:mb-0">6 <span class="tw-small text-muted tw:font-normal">· 3 active</span></div>
              </div>
              <div class="tw:px-4 tw:py-3">
                <div class="tw-h6 text-muted tw:mb-1">TOTAL RESPONSES</div>
                <div class="tw-h4 tw:mb-0">2,145</div>
              </div>
              <div class="tw:px-4 tw:py-3">
                <div class="tw-h6 text-muted tw:mb-1">AVG. COMPLETION</div>
                <div class="tw-h4 tw:mb-0">70% <span class="tw-small text-muted tw:font-normal">· of started</span></div>
              </div>
              <div class="tw:px-4 tw:py-3">
                <div class="tw-h6 text-muted tw:mb-1">DRAFTS</div>
                <div class="tw-h4 tw:mb-0">1 <span class="tw-small text-muted tw:font-normal">· awaiting publish</span></div>
              </div>
            </div>
          </div>
          <!-- Data Table -->
          <div class="tw-data-table tw-card tw:overflow-hidden">
            <!-- Toolbar -->
            <div class="tw-data-table-toolbar tw:px-4">
              <div class="tw-data-table-toolbar-start">
                <div class="tw-input-group tw-has-icon-start">
                  <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start" aria-hidden="true"></i>
                  <input type="search" class="tw-form-control" placeholder="Search surveys..." aria-label="Search surveys">
                </div>
                <div class="tw:flex tw:flex-wrap tw:gap-2">
                  <button type="button" class="tw-tag tw-tag-pill tw-tag-primary tw-tag-interactive" aria-pressed="true">6 All</button>
                  <button type="button" class="tw-tag tw-tag-pill tw-tag-success-subtle tw-tag-interactive" aria-pressed="false">3 Active</button>
                  <button type="button" class="tw-tag tw-tag-pill tw-tag-info-subtle tw-tag-interactive" aria-pressed="false">1 Scheduled</button>
                  <button type="button" class="tw-tag tw-tag-pill tw-tag-secondary-subtle tw-tag-interactive" aria-pressed="false">1 Draft</button>
                  <button type="button" class="tw-tag tw-tag-pill tw-tag-primary-subtle tw-tag-interactive" aria-pressed="false">1 Completed</button>
                </div>
              </div>
              <div class="tw-data-table-toolbar-end">
                <button type="button" class="tw-btn tw-btn-secondary">
                  <i class="fa-regular fa-file-export" aria-hidden="true"></i> Export
                </button>
              </div>
            </div>
            <!-- Table Body -->
            <div class="tw-data-table-body">
              <table class="tw-table tw-table-hover">
                <thead>
                  <tr>
                    <th scope="col">Survey</th>
                    <th scope="col">Status</th>
                    <th scope="col">Responses</th>
                    <th scope="col">Completion</th>
                    <th scope="col">NPS</th>
                    <th scope="col">Schools</th>
                    <th scope="col">Updated</th>
                    <th scope="col" class="tw-table-cell-actions"><span class="tw:sr-only">Actions</span></th>
                  </tr>
                </thead>
                <tbody>
                  <!-- Row 1: Parent Satisfaction Survey 2026 — Active -->
                  <tr class="tw-table-row-clickable">
                    <td>
                      <a href="/lookbook/preview/projects/mat_surveys/survey_results" class="tw:text-blue-500 tw:font-medium tw:whitespace-nowrap">Parent Satisfaction Survey 2026</a>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted">Parent Voice</div>
                    </td>
                    <td><span class="tw-tag tw-tag-pill tw-tag-success-subtle">Active</span></td>
                    <td class="tw:tabular-nums">312</td>
                    <td>
                      <div class="tw:flex tw:items-center tw:gap-2">
                        <span class="tw:tabular-nums tw:w-9">64%</span>
                        <div class="tw-progress tw:w-16" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Completion 64%"
                           data-controller="progress" data-progress-current-value="64">
                          <div class="tw-progress-bar tw-progress-bar-success" data-progress-target="bar"></div>
                        </div>
                      </div>
                    </td>
                    <td class="tw:tabular-nums">+42</td>
                    <td class="tw:whitespace-nowrap">All 39 schools</td>
                    <td class="tw:whitespace-nowrap text-muted">4 hours ago</td>
                    <td class="tw-table-cell-actions">
                      <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown" data-dropdown-teleport-value="true">
                        <button type="button" class="tw-dropdown-trigger" aria-label="Survey actions" aria-haspopup="true" aria-expanded="false"
                              data-dropdown-target="trigger" data-action="click->dropdown#toggle keydown->dropdown#keydown">
                          <i class="fa-regular fa-ellipsis-vertical" aria-hidden="true"></i>
                        </button>
                        <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
                          <a href="/lookbook/preview/projects/mat_surveys/new_survey" class="tw-dropdown-item" role="menuitem">
                            <i class="fa-regular fa-pen tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Edit</span>
                          </a>
                          <a href="/lookbook/preview/projects/mat_surveys/survey_results" class="tw-dropdown-item" role="menuitem">
                            <i class="fa-regular fa-chart-column tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">View results</span>
                          </a>
                          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                            <i class="fa-regular fa-copy tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Duplicate</span>
                          </button>
                          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                            <i class="fa-regular fa-bell tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Send reminder</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" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Close survey</span>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <!-- Row 2: Student Wellbeing Pulse — Active -->
                  <tr class="tw-table-row-clickable">
                    <td>
                      <a href="/lookbook/preview/projects/mat_surveys/survey_results" class="tw:text-blue-500 tw:font-medium tw:whitespace-nowrap">Student Wellbeing Pulse</a>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted">Wellbeing</div>
                    </td>
                    <td><span class="tw-tag tw-tag-pill tw-tag-success-subtle">Active</span></td>
                    <td class="tw:tabular-nums">543</td>
                    <td>
                      <div class="tw:flex tw:items-center tw:gap-2">
                        <span class="tw:tabular-nums tw:w-9">71%</span>
                        <div class="tw-progress tw:w-16" role="progressbar" aria-valuenow="71" aria-valuemin="0" aria-valuemax="100" aria-label="Completion 71%"
                           data-controller="progress" data-progress-current-value="71">
                          <div class="tw-progress-bar tw-progress-bar-success" data-progress-target="bar"></div>
                        </div>
                      </div>
                    </td>
                    <td class="tw:tabular-nums">+18</td>
                    <td class="tw:whitespace-nowrap">All 39 schools</td>
                    <td class="tw:whitespace-nowrap text-muted">Yesterday</td>
                    <td class="tw-table-cell-actions">
                      <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown" data-dropdown-teleport-value="true">
                        <button type="button" class="tw-dropdown-trigger" aria-label="Survey actions" aria-haspopup="true" aria-expanded="false"
                              data-dropdown-target="trigger" data-action="click->dropdown#toggle keydown->dropdown#keydown">
                          <i class="fa-regular fa-ellipsis-vertical" aria-hidden="true"></i>
                        </button>
                        <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
                          <a href="/lookbook/preview/projects/mat_surveys/new_survey" class="tw-dropdown-item" role="menuitem">
                            <i class="fa-regular fa-pen tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Edit</span>
                          </a>
                          <a href="/lookbook/preview/projects/mat_surveys/survey_results" class="tw-dropdown-item" role="menuitem">
                            <i class="fa-regular fa-chart-column tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">View results</span>
                          </a>
                          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                            <i class="fa-regular fa-copy tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Duplicate</span>
                          </button>
                          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                            <i class="fa-regular fa-bell tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Send reminder</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" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Close survey</span>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <!-- Row 3: Sixth Form Destinations — Active, no NPS -->
                  <tr class="tw-table-row-clickable">
                    <td>
                      <a href="/lookbook/preview/projects/mat_surveys/survey_results" class="tw:text-blue-500 tw:font-medium tw:whitespace-nowrap">Sixth Form Destinations</a>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted">Outcomes</div>
                    </td>
                    <td><span class="tw-tag tw-tag-pill tw-tag-success-subtle">Active</span></td>
                    <td class="tw:tabular-nums">86</td>
                    <td>
                      <div class="tw:flex tw:items-center tw:gap-2">
                        <span class="tw:tabular-nums tw:w-9">58%</span>
                        <div class="tw-progress tw:w-16" role="progressbar" aria-valuenow="58" aria-valuemin="0" aria-valuemax="100" aria-label="Completion 58%"
                           data-controller="progress" data-progress-current-value="58">
                          <div class="tw-progress-bar tw-progress-bar-success" data-progress-target="bar"></div>
                        </div>
                      </div>
                    </td>
                    <td class="text-muted">—</td>
                    <td class="tw:whitespace-nowrap">6 schools</td>
                    <td class="tw:whitespace-nowrap text-muted">2 days ago</td>
                    <td class="tw-table-cell-actions">
                      <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown" data-dropdown-teleport-value="true">
                        <button type="button" class="tw-dropdown-trigger" aria-label="Survey actions" aria-haspopup="true" aria-expanded="false"
                              data-dropdown-target="trigger" data-action="click->dropdown#toggle keydown->dropdown#keydown">
                          <i class="fa-regular fa-ellipsis-vertical" aria-hidden="true"></i>
                        </button>
                        <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
                          <a href="/lookbook/preview/projects/mat_surveys/new_survey" class="tw-dropdown-item" role="menuitem">
                            <i class="fa-regular fa-pen tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Edit</span>
                          </a>
                          <a href="/lookbook/preview/projects/mat_surveys/survey_results" class="tw-dropdown-item" role="menuitem">
                            <i class="fa-regular fa-chart-column tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">View results</span>
                          </a>
                          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                            <i class="fa-regular fa-copy tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Duplicate</span>
                          </button>
                          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                            <i class="fa-regular fa-bell tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Send reminder</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" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Close survey</span>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <!-- Row 4: Staff CPD Feedback — Draft -->
                  <tr class="tw-table-row-clickable">
                    <td>
                      <a href="/lookbook/preview/projects/mat_surveys/new_survey" class="tw:text-blue-500 tw:font-medium tw:whitespace-nowrap">Staff CPD Feedback</a>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted">Staff Voice</div>
                    </td>
                    <td><span class="tw-tag tw-tag-pill tw-tag-secondary-subtle">Draft</span></td>
                    <td class="text-muted">—</td>
                    <td class="text-muted">—</td>
                    <td class="text-muted">—</td>
                    <td class="tw:whitespace-nowrap text-muted">Not set</td>
                    <td class="tw:whitespace-nowrap text-muted">6 hours ago</td>
                    <td class="tw-table-cell-actions">
                      <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown" data-dropdown-teleport-value="true">
                        <button type="button" class="tw-dropdown-trigger" aria-label="Survey actions" aria-haspopup="true" aria-expanded="false"
                              data-dropdown-target="trigger" data-action="click->dropdown#toggle keydown->dropdown#keydown">
                          <i class="fa-regular fa-ellipsis-vertical" aria-hidden="true"></i>
                        </button>
                        <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
                          <a href="/lookbook/preview/projects/mat_surveys/new_survey" class="tw-dropdown-item" role="menuitem">
                            <i class="fa-regular fa-pen tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Edit</span>
                          </a>
                          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                            <i class="fa-regular fa-copy tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Duplicate</span>
                          </button>
                          <div class="tw-dropdown-divider"></div>
                          <button class="tw-dropdown-item tw-dropdown-item-danger" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                            <i class="fa-regular fa-trash tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Delete</span>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <!-- Row 5: Open Day Follow-up — Scheduled -->
                  <tr class="tw-table-row-clickable">
                    <td>
                      <a href="/lookbook/preview/projects/mat_surveys/new_survey" class="tw:text-blue-500 tw:font-medium tw:whitespace-nowrap">Open Day Follow-up</a>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted">Admissions</div>
                    </td>
                    <td>
                      <span class="tw-tag tw-tag-pill tw-tag-info-subtle">Scheduled</span>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted tw:mt-1 tw:whitespace-nowrap">Sends 15 Jun 2026</div>
                    </td>
                    <td class="text-muted">—</td>
                    <td class="text-muted">—</td>
                    <td class="text-muted">—</td>
                    <td class="tw:whitespace-nowrap">12 schools</td>
                    <td class="tw:whitespace-nowrap text-muted">3 days ago</td>
                    <td class="tw-table-cell-actions">
                      <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown" data-dropdown-teleport-value="true">
                        <button type="button" class="tw-dropdown-trigger" aria-label="Survey actions" aria-haspopup="true" aria-expanded="false"
                              data-dropdown-target="trigger" data-action="click->dropdown#toggle keydown->dropdown#keydown">
                          <i class="fa-regular fa-ellipsis-vertical" aria-hidden="true"></i>
                        </button>
                        <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
                          <a href="/lookbook/preview/projects/mat_surveys/new_survey" class="tw-dropdown-item" role="menuitem">
                            <i class="fa-regular fa-pen tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Edit</span>
                          </a>
                          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                            <i class="fa-regular fa-copy tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Duplicate</span>
                          </button>
                          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                            <i class="fa-regular fa-calendar-xmark tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Cancel schedule</span>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                  <!-- Row 6: Year 11 Destinations 2025 — Completed -->
                  <tr class="tw-table-row-clickable">
                    <td>
                      <a href="/lookbook/preview/projects/mat_surveys/survey_results" class="tw:text-blue-500 tw:font-medium tw:whitespace-nowrap">Year 11 Destinations 2025</a>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted">Outcomes</div>
                    </td>
                    <td>
                      <span class="tw-tag tw-tag-pill tw-tag-primary-subtle">Completed</span>
                      <div class="tw:text-body-xs tw:leading-body-xs text-muted tw:mt-1 tw:whitespace-nowrap">Closed 20 Jul 2025</div>
                    </td>
                    <td class="tw:tabular-nums">1,204</td>
                    <td>
                      <div class="tw:flex tw:items-center tw:gap-2">
                        <span class="tw:tabular-nums tw:w-9">82%</span>
                        <div class="tw-progress tw:w-16" role="progressbar" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100" aria-label="Completion 82%"
                           data-controller="progress" data-progress-current-value="82">
                          <div class="tw-progress-bar tw-progress-bar-primary" data-progress-target="bar"></div>
                        </div>
                      </div>
                    </td>
                    <td class="tw:tabular-nums">+35</td>
                    <td class="tw:whitespace-nowrap">All 39 schools</td>
                    <td class="tw:whitespace-nowrap text-muted">20 Jul 2025</td>
                    <td class="tw-table-cell-actions">
                      <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown" data-dropdown-teleport-value="true">
                        <button type="button" class="tw-dropdown-trigger" aria-label="Survey actions" aria-haspopup="true" aria-expanded="false"
                              data-dropdown-target="trigger" data-action="click->dropdown#toggle keydown->dropdown#keydown">
                          <i class="fa-regular fa-ellipsis-vertical" aria-hidden="true"></i>
                        </button>
                        <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
                          <a href="/lookbook/preview/projects/mat_surveys/survey_results" class="tw-dropdown-item" role="menuitem">
                            <i class="fa-regular fa-chart-column tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">View results</span>
                          </a>
                          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                            <i class="fa-regular fa-copy tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Duplicate</span>
                          </button>
                          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
                            <i class="fa-regular fa-file-export tw-dropdown-item-icon" aria-hidden="true"></i>
                            <span class="tw-dropdown-item-text">Export responses</span>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- Footer -->
            <div class="tw-data-table-footer tw:px-4">
              <span class="tw-data-table-results">Showing 6 surveys</span>
            </div>
          </div>
          <!-- /tw-data-table -->
        </div>
      </main>
    </div>
  </div>
  <!-- Survey Results Drawer — static-open -->
  <div class="tw-drawer-backdrop tw-show" aria-hidden="true" onclick="closeResults()"></div>
  <div class="tw-drawer tw-drawer-wide tw-show"
     role="dialog" aria-modal="true" aria-labelledby="resultsTitle">
    <!-- Drawer Header — title + accurate sub-line, close only (Export lives in footer) -->
    <div class="tw-drawer-header">
      <div class="tw:min-w-0">
        <h2 class="tw-drawer-title" id="resultsTitle">Retention Survey 2026 — Results</h2>
        <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-1.5 tw:mt-1">
          <span class="tw-badge tw-badge-secondary-subtle">Student Voice</span>
          <span class="tw-badge tw-badge-secondary-subtle">Year 11</span>
          <span class="tw-badge tw-badge-secondary-subtle">39 schools</span>
        </div>
      </div>
      <button class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" type="button" aria-label="Close results" onclick="closeResults()">
        <i class="fa-regular fa-xmark" aria-hidden="true"></i>
      </button>
    </div>
    <!-- Drawer Body -->
    <div class="tw-drawer-body">
      <!-- Section 1: Stats strip -->
      <div class="tw-card tw-card-flat tw:mb-3">
        <div class="tw:grid tw:grid-cols-2 tw:sm:grid-cols-4 tw:divide-x tw:divide-neutral-translucent-200">
          <div class="tw:px-3 tw:py-2">
            <div class="tw:text-indicator tw:leading-indicator tw:text-neutral-500 tw:uppercase">Sent</div>
            <div class="tw:text-body-m tw:leading-body-m tw:font-semibold tw:tabular-nums">1,240</div>
          </div>
          <div class="tw:px-3 tw:py-2">
            <div class="tw:text-indicator tw:leading-indicator tw:text-neutral-500 tw:uppercase">Completed</div>
            <div class="tw:text-body-m tw:leading-body-m tw:font-semibold tw:tabular-nums">868</div>
          </div>
          <div class="tw:px-3 tw:py-2">
            <div class="tw:text-indicator tw:leading-indicator tw:text-neutral-500 tw:uppercase">Completion</div>
            <div class="tw:text-body-m tw:leading-body-m tw:font-semibold tw:tabular-nums">70%</div>
          </div>
          <div class="tw:px-3 tw:py-2">
            <div class="tw:text-indicator tw:leading-indicator tw:text-neutral-500 tw:uppercase">Last response</div>
            <div class="tw:text-body-m tw:leading-body-m tw:font-semibold">Just now</div>
          </div>
        </div>
      </div>
      <!-- Section 2: Confidence headline (Q4 "How confident are you in this choice?") -->
      <div class="tw-card tw-card-flat tw-card-sm tw:mb-3">
        <div class="tw-card-body">
          <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:mb-2">
            <h3 class="tw-card-title tw:mb-0">Confidence in next-step choice</h3>
            <div class="tw:flex tw:items-baseline tw:gap-1.5">
              <span class="tw-h2 tw:mb-0 tw:tabular-nums">61%</span>
              <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">feel confident</span>
            </div>
          </div>
          <div class="tw:flex tw:h-2 tw:rounded-full tw:overflow-hidden tw:mb-2"
             role="img" aria-label="Very confident 34%, Fairly confident 27%, Still weighing 28%, No idea yet 11%">
            <div class="tw:w-[34%] tw:bg-green-500"></div>
            <div class="tw:w-[27%] tw:bg-green-300"></div>
            <div class="tw:w-[28%] tw:bg-orange-500"></div>
            <div class="tw:w-[11%] tw:bg-red-500"></div>
          </div>
          <div class="tw:flex tw:flex-wrap tw:gap-x-4 tw:gap-y-1">
            <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">
              <span class="tw:w-2 tw:h-2 tw:rounded-full tw:bg-green-500"></span>
              <strong class="tw:text-neutral-800 tw:tabular-nums">34%</strong> Very confident, it's decided
            </span>
            <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">
              <span class="tw:w-2 tw:h-2 tw:rounded-full tw:bg-green-300"></span>
              <strong class="tw:text-neutral-800 tw:tabular-nums">27%</strong> Fairly confident, leaning this way
            </span>
            <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">
              <span class="tw:w-2 tw:h-2 tw:rounded-full tw:bg-orange-500"></span>
              <strong class="tw:text-neutral-800 tw:tabular-nums">28%</strong> Still weighing options
            </span>
            <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">
              <span class="tw:w-2 tw:h-2 tw:rounded-full tw:bg-red-500"></span>
              <strong class="tw:text-neutral-800 tw:tabular-nums">11%</strong> No idea yet
            </span>
          </div>
        </div>
      </div>
      <!-- Section 3: Response trend -->
      <div class="tw-card tw-card-flat tw-card-sm tw:mb-3">
        <div class="tw-card-body">
          <h3 class="tw-card-title tw:mb-2">Responses over time</h3>
          <div class="tw:flex tw:items-end tw:gap-1 tw:h-16"
             role="img" aria-label="Response trend over the last 7 weeks, rising then steady">
            <div class="tw:flex-1 tw:bg-primary-200 tw:rounded-t tw:h-1/4"></div>
            <div class="tw:flex-1 tw:bg-primary-200 tw:rounded-t tw:h-1/3"></div>
            <div class="tw:flex-1 tw:bg-primary-200 tw:rounded-t tw:h-1/2"></div>
            <div class="tw:flex-1 tw:bg-primary-200 tw:rounded-t tw:h-2/3"></div>
            <div class="tw:flex-1 tw:bg-primary-200 tw:rounded-t tw:h-3/4"></div>
            <div class="tw:flex-1 tw:bg-primary-200 tw:rounded-t tw:h-full"></div>
            <div class="tw:flex-1 tw:bg-primary-200 tw:rounded-t tw:h-2/3"></div>
          </div>
          <div class="tw:flex tw:gap-1 tw:mt-1">
            <span class="tw:flex-1 tw:text-center tw:text-indicator tw:leading-indicator tw:text-neutral-500">W1</span>
            <span class="tw:flex-1 tw:text-center tw:text-indicator tw:leading-indicator tw:text-neutral-500">W2</span>
            <span class="tw:flex-1 tw:text-center tw:text-indicator tw:leading-indicator tw:text-neutral-500">W3</span>
            <span class="tw:flex-1 tw:text-center tw:text-indicator tw:leading-indicator tw:text-neutral-500">W4</span>
            <span class="tw:flex-1 tw:text-center tw:text-indicator tw:leading-indicator tw:text-neutral-500">W5</span>
            <span class="tw:flex-1 tw:text-center tw:text-indicator tw:leading-indicator tw:text-neutral-500">W6</span>
            <span class="tw:flex-1 tw:text-center tw:text-indicator tw:leading-indicator tw:text-neutral-500">W7</span>
          </div>
        </div>
      </div>
      <!-- Section 4a: Per-question — Q1 "After Year 11, I'm planning to…" (Multiple choice) -->
      <div class="tw-card tw-card-flat tw-card-sm tw:mb-3">
        <div class="tw-card-body">
          <h3 class="tw-card-title tw:mb-0 tw:text-pretty">After Year 11, I'm planning to…</h3>
          <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mt-0.5 tw:mb-3">868 responses</p>
          <!-- Stay at current sixth form — the retention win -->
          <div class="tw:mb-2">
            <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:mb-1">
              <span class="tw:text-body-s tw:leading-body-s tw:text-pretty">Stay at my current school's sixth form</span>
              <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums tw:whitespace-nowrap">330 (38%)</span>
            </div>
            <div data-controller="progress" data-progress-current-value="38" class="tw-progress"
               role="progressbar" aria-valuenow="38" aria-valuemin="0" aria-valuemax="100" aria-label="Stay at my current school's sixth form 38%">
              <div class="tw-progress-bar tw-progress-bar-success" data-progress-target="bar"></div>
            </div>
          </div>
          <!-- Move to a different sixth form or college -->
          <div class="tw:mb-2">
            <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:mb-1">
              <span class="tw:text-body-s tw:leading-body-s tw:text-pretty">Move to a different sixth form or college</span>
              <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums tw:whitespace-nowrap">269 (31%)</span>
            </div>
            <div data-controller="progress" data-progress-current-value="31" class="tw-progress"
               role="progressbar" aria-valuenow="31" aria-valuemin="0" aria-valuemax="100" aria-label="Move to a different sixth form or college 31%">
              <div class="tw-progress-bar tw-progress-bar-primary" data-progress-target="bar"></div>
            </div>
          </div>
          <!-- Start an apprenticeship -->
          <div class="tw:mb-2">
            <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:mb-1">
              <span class="tw:text-body-s tw:leading-body-s tw:text-pretty">Start an apprenticeship</span>
              <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums tw:whitespace-nowrap">139 (16%)</span>
            </div>
            <div data-controller="progress" data-progress-current-value="16" class="tw-progress"
               role="progressbar" aria-valuenow="16" aria-valuemin="0" aria-valuemax="100" aria-label="Start an apprenticeship 16%">
              <div class="tw-progress-bar tw-progress-bar-primary" data-progress-target="bar"></div>
            </div>
          </div>
          <!-- Go into employment or training -->
          <div class="tw:mb-2">
            <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:mb-1">
              <span class="tw:text-body-s tw:leading-body-s tw:text-pretty">Go into employment or training</span>
              <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums tw:whitespace-nowrap">78 (9%)</span>
            </div>
            <div data-controller="progress" data-progress-current-value="9" class="tw-progress"
               role="progressbar" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100" aria-label="Go into employment or training 9%">
              <div class="tw-progress-bar tw-progress-bar-primary" data-progress-target="bar"></div>
            </div>
          </div>
          <!-- Not sure yet — needs follow-up -->
          <div class="tw:mb-0">
            <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:mb-1">
              <span class="tw:text-body-s tw:leading-body-s tw:text-pretty">Not sure yet</span>
              <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums tw:whitespace-nowrap">52 (6%)</span>
            </div>
            <div data-controller="progress" data-progress-current-value="6" class="tw-progress"
               role="progressbar" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100" aria-label="Not sure yet 6%">
              <div class="tw-progress-bar tw-progress-bar-warning" data-progress-target="bar"></div>
            </div>
          </div>
        </div>
      </div>
      <!-- Section 4b: Per-question — Q2 "Where would you like to go?" (Short answer → most mentioned) -->
      <div class="tw-card tw-card-flat tw-card-sm tw:mb-3">
        <div class="tw-card-body">
          <h3 class="tw-card-title tw:mb-0 tw:text-pretty">Where would you like to go?</h3>
          <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mt-0.5 tw:mb-3">624 answers · most mentioned</p>
          <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
            <span class="tw:text-body-s tw:leading-body-s">Our Trust Sixth Form</span>
            <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums">142</span>
          </div>
          <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
            <span class="tw:text-body-s tw:leading-body-s">City College</span>
            <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums">96</span>
          </div>
          <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
            <span class="tw:text-body-s tw:leading-body-s">Riverside Sixth Form</span>
            <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums">71</span>
          </div>
          <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:py-1.5 tw:border-b tw:border-neutral-translucent-100">
            <span class="tw:text-body-s tw:leading-body-s">Newham College</span>
            <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums">64</span>
          </div>
          <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:py-1.5">
            <span class="tw:text-body-s tw:leading-body-s">Apprenticeship (various)</span>
            <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums">58</span>
          </div>
          <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mb-0 tw:mt-2">+ 193 other answers</p>
        </div>
      </div>
      <!-- Section 4c: Per-question — Q3 "What do you want to study or do there?" (Dropdown) -->
      <div class="tw-card tw-card-flat tw-card-sm tw:mb-3">
        <div class="tw-card-body">
          <h3 class="tw-card-title tw:mb-0 tw:text-pretty">What do you want to study or do there?</h3>
          <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mt-0.5 tw:mb-3">868 responses · top pathways</p>
          <div class="tw:mb-2">
            <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:mb-1">
              <span class="tw:text-body-s tw:leading-body-s tw:text-pretty">A-Level — Sciences</span>
              <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums tw:whitespace-nowrap">191 (22%)</span>
            </div>
            <div data-controller="progress" data-progress-current-value="22" class="tw-progress"
               role="progressbar" aria-valuenow="22" aria-valuemin="0" aria-valuemax="100" aria-label="A-Level Sciences 22%">
              <div class="tw-progress-bar tw-progress-bar-primary" data-progress-target="bar"></div>
            </div>
          </div>
          <div class="tw:mb-2">
            <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:mb-1">
              <span class="tw:text-body-s tw:leading-body-s tw:text-pretty">A-Level — Humanities</span>
              <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums tw:whitespace-nowrap">156 (18%)</span>
            </div>
            <div data-controller="progress" data-progress-current-value="18" class="tw-progress"
               role="progressbar" aria-valuenow="18" aria-valuemin="0" aria-valuemax="100" aria-label="A-Level Humanities 18%">
              <div class="tw-progress-bar tw-progress-bar-primary" data-progress-target="bar"></div>
            </div>
          </div>
          <div class="tw:mb-2">
            <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:mb-1">
              <span class="tw:text-body-s tw:leading-body-s tw:text-pretty">A-Level — Maths & Further Maths</span>
              <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums tw:whitespace-nowrap">122 (14%)</span>
            </div>
            <div data-controller="progress" data-progress-current-value="14" class="tw-progress"
               role="progressbar" aria-valuenow="14" aria-valuemin="0" aria-valuemax="100" aria-label="A-Level Maths and Further Maths 14%">
              <div class="tw-progress-bar tw-progress-bar-primary" data-progress-target="bar"></div>
            </div>
          </div>
          <div class="tw:mb-2">
            <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:mb-1">
              <span class="tw:text-body-s tw:leading-body-s tw:text-pretty">BTEC — Business</span>
              <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums tw:whitespace-nowrap">95 (11%)</span>
            </div>
            <div data-controller="progress" data-progress-current-value="11" class="tw-progress"
               role="progressbar" aria-valuenow="11" aria-valuemin="0" aria-valuemax="100" aria-label="BTEC Business 11%">
              <div class="tw-progress-bar tw-progress-bar-primary" data-progress-target="bar"></div>
            </div>
          </div>
          <div class="tw:mb-0">
            <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:mb-1">
              <span class="tw:text-body-s tw:leading-body-s tw:text-pretty">Apprenticeship</span>
              <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums tw:whitespace-nowrap">78 (9%)</span>
            </div>
            <div data-controller="progress" data-progress-current-value="9" class="tw-progress"
               role="progressbar" aria-valuenow="9" aria-valuemin="0" aria-valuemax="100" aria-label="Apprenticeship 9%">
              <div class="tw-progress-bar tw-progress-bar-primary" data-progress-target="bar"></div>
            </div>
          </div>
          <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mb-0 tw:mt-2 tw:flex tw:items-baseline tw:justify-between tw:gap-3">
            <span>Other pathways</span>
            <span class="tw:shrink-0 tw:tabular-nums">226 (26%)</span>
          </p>
        </div>
      </div>
      <!-- Section 4d: Per-question — Q5 "Would you like a careers conversation?" (Multiple choice) -->
      <div class="tw-card tw-card-flat tw-card-sm tw:mb-3">
        <div class="tw-card-body">
          <h3 class="tw-card-title tw:mb-0 tw:text-pretty">Would you like a careers conversation?</h3>
          <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mt-0.5 tw:mb-3">868 responses</p>
          <div class="tw:mb-2">
            <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:mb-1">
              <span class="tw:text-body-s tw:leading-body-s tw:text-pretty">Yes, please book me in</span>
              <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums tw:whitespace-nowrap">295 (34%)</span>
            </div>
            <div data-controller="progress" data-progress-current-value="34" class="tw-progress"
               role="progressbar" aria-valuenow="34" aria-valuemin="0" aria-valuemax="100" aria-label="Yes, please book me in 34%">
              <div class="tw-progress-bar tw-progress-bar-success" data-progress-target="bar"></div>
            </div>
          </div>
          <div class="tw:mb-2">
            <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:mb-1">
              <span class="tw:text-body-s tw:leading-body-s tw:text-pretty">Maybe, send me some info first</span>
              <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums tw:whitespace-nowrap">356 (41%)</span>
            </div>
            <div data-controller="progress" data-progress-current-value="41" class="tw-progress"
               role="progressbar" aria-valuenow="41" aria-valuemin="0" aria-valuemax="100" aria-label="Maybe, send me some info first 41%">
              <div class="tw-progress-bar tw-progress-bar-primary" data-progress-target="bar"></div>
            </div>
          </div>
          <div class="tw:mb-0">
            <div class="tw:flex tw:items-baseline tw:justify-between tw:gap-3 tw:mb-1">
              <span class="tw:text-body-s tw:leading-body-s tw:text-pretty">No thanks, I'm good</span>
              <span class="tw:shrink-0 tw:text-body-s tw:leading-body-s tw:font-semibold tw:tabular-nums tw:whitespace-nowrap">217 (25%)</span>
            </div>
            <div data-controller="progress" data-progress-current-value="25" class="tw-progress"
               role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-label="No thanks, I'm good 25%">
              <div class="tw-progress-bar tw-progress-bar-primary" data-progress-target="bar"></div>
            </div>
          </div>
          <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mb-0 tw:mt-3">
            <i class="fa-regular fa-circle-info tw:mr-1" aria-hidden="true"></i>295 students opted in — export the named list to follow up.
          </p>
        </div>
      </div>
      <!-- Section 5: Per-school breakdown -->
      <div class="tw-card tw-card-flat tw-card-sm">
        <div class="tw-card-body">
          <h3 class="tw-card-title tw:mb-1">By school</h3>
          <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mb-2">Top 6 of 39 schools · “Staying on” = chose their current sixth form</p>
          <div class="tw-table-responsive">
            <table class="tw-table tw-table-sm">
              <thead>
                <tr>
                  <th scope="col">School</th>
                  <th scope="col">Responses</th>
                  <th scope="col">Completion</th>
                  <th scope="col">Staying on</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Riverside Academy</td>
                  <td class="tw:tabular-nums">131</td>
                  <td class="tw:tabular-nums">78%</td>
                  <td class="tw:tabular-nums">44%</td>
                </tr>
                <tr>
                  <td>Stoke Newington School</td>
                  <td class="tw:tabular-nums">101</td>
                  <td class="tw:tabular-nums">71%</td>
                  <td class="tw:tabular-nums">41%</td>
                </tr>
                <tr>
                  <td>Oakwood High School</td>
                  <td class="tw:tabular-nums">80</td>
                  <td class="tw:tabular-nums">66%</td>
                  <td class="tw:tabular-nums">39%</td>
                </tr>
                <tr>
                  <td>St. Mary's CofE School</td>
                  <td class="tw:tabular-nums">60</td>
                  <td class="tw:tabular-nums">62%</td>
                  <td class="tw:tabular-nums">36%</td>
                </tr>
                <tr>
                  <td>Hartley Park School</td>
                  <td class="tw:tabular-nums">80</td>
                  <td class="tw:tabular-nums">60%</td>
                  <td class="tw:tabular-nums">33%</td>
                </tr>
                <tr>
                  <td>Millfield Community College</td>
                  <td class="tw:tabular-nums">63</td>
                  <td class="tw:tabular-nums">41% <span class="tw-tag tw-tag-sm tw-tag-warning-subtle tw:ml-2">Low</span></td>
                  <td class="tw:tabular-nums">29%</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <!-- /drawer-body -->
    <!-- Drawer Footer — two secondary export actions (full-width 50/50 via DS footer stretch) -->
    <div class="tw-drawer-footer">
      <button type="button" class="tw-btn tw-btn-secondary" onclick="showToast('Export started — a download link will be emailed to you', 'success')">
        <i class="fa-regular fa-file-pdf" aria-hidden="true"></i> Export PDF
      </button>
      <button type="button" class="tw-btn tw-btn-secondary" onclick="showToast('Export started — a download link will be emailed to you', 'success')">
        <i class="fa-regular fa-file-excel" aria-hidden="true"></i> Export Excel
      </button>
    </div>
  </div>
  <!-- /survey results drawer -->
  <!-- Toast container -->
  <div class="tw-toast-container" id="toastContainer"></div>
  <script>
    // ============ Toast (same idiom as new_survey) ============
    window.showToast = function(message, variant) {
      var container = document.getElementById('toastContainer');
      var toast = document.createElement('div');
      toast.className = 'tw-toast tw-toast-' + (variant || 'success') + ' tw-toast-visible';
      toast.setAttribute('role', 'status');
      var icon = document.createElement('div');
      icon.className = 'tw-toast-icon';
      icon.innerHTML = '<i class="fa-regular fa-circle-check" aria-hidden="true"></i>';
      var msg = document.createElement('div');
      msg.className = 'tw-toast-message';
      msg.textContent = message;
      toast.appendChild(icon);
      toast.appendChild(msg);
      container.appendChild(toast);
      setTimeout(function() {
        toast.classList.remove('tw-toast-visible');
        toast.classList.add('tw-toast-dismissing');
        setTimeout(function() { if (toast.parentNode) toast.parentNode.removeChild(toast); }, 300);
      }, 2400);
    };
    // ============ Close drawer → back to listing ============
    window.closeResults = function() {
      window.location.href = '/lookbook/preview/projects/mat_surveys/surveys';
    };
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') closeResults();
    });
  </script>
</div>
<!-- /sidebar controller -->