<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"><a href="/lookbook/preview/projects/mat_surveys/surveys">Enquiries & Surveys</a></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">
                <button type="button" class="tw-btn tw-btn-primary" id="newSurveyTrigger" onclick="openNewSurvey(this)">
                  <i class="fa-regular fa-plus" aria-hidden="true"></i> New Survey
                </button>
              </div>
            </div>
          </div>
          <!-- KPI Strip — four cards, Insights/Retention convention -->
          <div class="tw:grid tw:grid-cols-2 tw:lg:grid-cols-4 tw:gap-4 tw:mb-4">
            <div class="tw-card">
              <div class="tw-card-body">
                <div class="tw:flex tw:items-start tw:justify-between tw:gap-2">
                  <div class="tw:min-w-0">
                    <div class="tw:text-body-xs tw:leading-body-xs tw:uppercase tw:tracking-wide text-muted tw:font-semibold tw:mb-1">Total Surveys</div>
                    <div class="tw:flex tw:items-baseline tw:gap-2">
                      <span class="tw:font-heading tw:text-heading-1 tw:leading-heading-1 tw:font-bold tw:text-primary">6</span>
                      <span class="tw-badge tw-badge-success-soft">3 active</span>
                    </div>
                  </div>
                  <span class="tw:flex tw:items-center tw:justify-center tw:w-9 tw:h-9 tw:rounded-lg tw:bg-primary-100 tw:text-primary tw:flex-shrink-0" aria-hidden="true">
                    <i class="fa-regular fa-square-poll-vertical"></i>
                  </span>
                </div>
              </div>
            </div>
            <div class="tw-card">
              <div class="tw-card-body">
                <div class="tw:flex tw:items-start tw:justify-between tw:gap-2">
                  <div class="tw:min-w-0">
                    <div class="tw:text-body-xs tw:leading-body-xs tw:uppercase tw:tracking-wide text-muted tw:font-semibold tw:mb-1">Total Responses</div>
                    <div class="tw:flex tw:items-baseline tw:gap-2">
                      <span class="tw:font-heading tw:text-heading-1 tw:leading-heading-1 tw:font-bold tw:text-primary">2,145</span>
                      <span class="tw:text-body-s tw:leading-body-s text-muted">across 39 schools</span>
                    </div>
                  </div>
                  <span class="tw:flex tw:items-center tw:justify-center tw:w-9 tw:h-9 tw:rounded-lg tw:bg-primary-100 tw:text-primary tw:flex-shrink-0" aria-hidden="true">
                    <i class="fa-regular fa-envelope-open-text"></i>
                  </span>
                </div>
              </div>
            </div>
            <div class="tw-card">
              <div class="tw-card-body">
                <div class="tw:flex tw:items-start tw:justify-between tw:gap-2">
                  <div class="tw:min-w-0">
                    <div class="tw:text-body-xs tw:leading-body-xs tw:uppercase tw:tracking-wide text-muted tw:font-semibold tw:mb-1">Avg. Completion</div>
                    <div class="tw:flex tw:items-baseline tw:gap-2">
                      <span class="tw:font-heading tw:text-heading-1 tw:leading-heading-1 tw:font-bold tw:text-primary">70%</span>
                      <span class="tw:text-body-s tw:leading-body-s text-muted">of started</span>
                    </div>
                  </div>
                  <span class="tw:flex tw:items-center tw:justify-center tw:w-9 tw:h-9 tw:rounded-lg tw:bg-primary-100 tw:text-primary tw:flex-shrink-0" aria-hidden="true">
                    <i class="fa-regular fa-chart-pie"></i>
                  </span>
                </div>
              </div>
            </div>
            <div class="tw-card">
              <div class="tw-card-body">
                <div class="tw:flex tw:items-start tw:justify-between tw:gap-2">
                  <div class="tw:min-w-0">
                    <div class="tw:text-body-xs tw:leading-body-xs tw:uppercase tw:tracking-wide text-muted tw:font-semibold tw:mb-1">Drafts</div>
                    <div class="tw:flex tw:items-baseline tw:gap-2">
                      <span class="tw:font-heading tw:text-heading-1 tw:leading-heading-1 tw:font-bold tw:text-primary">1</span>
                      <span class="tw-badge tw-badge-warning-soft">awaiting publish</span>
                    </div>
                  </div>
                  <span class="tw:flex tw:items-center tw:justify-center tw:w-9 tw:h-9 tw:rounded-lg tw:bg-primary-100 tw:text-primary tw:flex-shrink-0" aria-hidden="true">
                    <i class="fa-regular fa-pen-to-square"></i>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <!-- Data Table -->
          <div class="tw-data-table tw-card tw:overflow-hidden">
            <!-- Toolbar: title + filter pills | search + export -->
            <div class="tw-data-table-toolbar tw:px-4">
              <div class="tw-data-table-toolbar-start">
                <h2 class="tw:mb-0 tw:text-body-l tw:leading-body-l tw:font-semibold tw:whitespace-nowrap">All Surveys</h2>
                <div class="tw:flex tw:flex-wrap tw:gap-2" id="surveyFilterPills">
                  <button type="button" class="tw-tag tw-tag-pill tw-tag-primary tw-tag-interactive" aria-pressed="true"
                        data-filter="all" data-active-class="tw-tag-primary" data-inactive-class="tw-tag-secondary-subtle"
                        onclick="selectSurveyFilter('all')">6 All</button>
                  <button type="button" class="tw-tag tw-tag-pill tw-tag-success-subtle tw-tag-interactive" aria-pressed="false"
                        data-filter="active" data-active-class="tw-tag-success" data-inactive-class="tw-tag-success-subtle"
                        onclick="selectSurveyFilter('active')">3 Active</button>
                  <button type="button" class="tw-tag tw-tag-pill tw-tag-info-subtle tw-tag-interactive" aria-pressed="false"
                        data-filter="scheduled" data-active-class="tw-tag-info" data-inactive-class="tw-tag-info-subtle"
                        onclick="selectSurveyFilter('scheduled')">1 Scheduled</button>
                  <button type="button" class="tw-tag tw-tag-pill tw-tag-secondary-subtle tw-tag-interactive" aria-pressed="false"
                        data-filter="draft" data-active-class="tw-tag-secondary" data-inactive-class="tw-tag-secondary-subtle"
                        onclick="selectSurveyFilter('draft')">1 Draft</button>
                  <button type="button" class="tw-tag tw-tag-pill tw-tag-primary-subtle tw-tag-interactive" aria-pressed="false"
                        data-filter="completed" data-active-class="tw-tag-primary" data-inactive-class="tw-tag-primary-subtle"
                        onclick="selectSurveyFilter('completed')">1 Completed</button>
                </div>
              </div>
              <div class="tw-data-table-toolbar-end">
                <div class="tw-input-group tw-has-icon-start tw:w-56">
                  <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"
                       id="surveySearchInput" oninput="applySurveyFilters()">
                </div>
                <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-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 id="surveysTableBody">
                  <!-- Row 1: Parent Satisfaction Survey 2026 — Active -->
                  <tr class="tw-table-row-clickable" data-status="active" data-name="parent satisfaction survey 2026 parent voice">
                    <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" onclick="showToast('Survey duplicated as draft', 'success')">
                            <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" onclick="showToast('Reminder sent to non-responders', 'success')">
                            <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" onclick="openConfirm('close')">
                            <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" data-status="active" data-name="student wellbeing pulse wellbeing">
                    <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" onclick="showToast('Survey duplicated as draft', 'success')">
                            <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" onclick="showToast('Reminder sent to non-responders', 'success')">
                            <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" onclick="openConfirm('close')">
                            <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" data-status="active" data-name="sixth form destinations outcomes">
                    <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" onclick="showToast('Survey duplicated as draft', 'success')">
                            <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" onclick="showToast('Reminder sent to non-responders', 'success')">
                            <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" onclick="openConfirm('close')">
                            <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" data-status="draft" data-name="staff cpd feedback staff voice">
                    <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" onclick="showToast('Survey duplicated as draft', 'success')">
                            <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" onclick="openConfirm('delete')">
                            <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" data-status="scheduled" data-name="open day follow-up admissions">
                    <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" onclick="showToast('Survey duplicated as draft', 'success')">
                            <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" onclick="showToast('Schedule cancelled — survey moved to Draft', 'success')">
                            <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" data-status="completed" data-name="year 11 destinations 2025 outcomes">
                    <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" onclick="showToast('Survey duplicated as draft', 'success')">
                            <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" onclick="showToast('Export started — a download link will be emailed to you', 'success')">
                            <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>
                  <!-- Empty state — shown when no rows match the filters -->
                  <tr id="surveysEmptyRow" hidden>
                    <td colspan="8" class="tw-table-empty">
                      <p class="tw:mb-2">No surveys match your filters.</p>
                      <button type="button" class="tw-btn tw-btn-tertiary" onclick="clearSurveyFilters()">Clear filters</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <!-- Footer -->
            <div class="tw-data-table-footer tw:px-4">
              <span class="tw-data-table-results" id="surveyResultsCount">Showing 6 surveys</span>
              <nav aria-label="Surveys pagination">
                <ul class="tw-pagination tw-pagination-sm">
                  <li class="tw-page-item tw-disabled"><a class="tw-page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a></li>
                  <li class="tw-page-item tw-active"><a class="tw-page-link" href="#" aria-current="page">1</a></li>
                  <li class="tw-page-item tw-disabled"><a class="tw-page-link" href="#" tabindex="-1" aria-disabled="true">Next</a></li>
                </ul>
              </nav>
            </div>
          </div>
          <!-- /tw-data-table -->
        </div>
      </main>
    </div>
  </div>
  <!-- Confirm popup (Close survey / Delete draft) — hidden until opened -->
  <div class="tw-popup-overlay" id="confirmOverlay" aria-hidden="true" onclick="closeConfirm()"></div>
  <div class="tw-popup-panel tw-popup-center tw-popup-sm" id="confirmPopup"
     role="dialog" aria-modal="true" aria-labelledby="confirmTitle">
    <div class="tw-popup-header">
      <h2 class="tw-popup-header-title" id="confirmTitle">Close this survey?</h2>
      <button class="tw-popup-close" type="button" aria-label="Close" onclick="closeConfirm()">
        <i class="fa-regular fa-xmark tw:text-lg" aria-hidden="true"></i>
      </button>
    </div>
    <div class="tw-popup-body">
      <p class="tw:mb-0" id="confirmMessage">This survey will stop accepting responses.</p>
    </div>
    <div class="tw-popup-footer">
      <button class="tw-btn tw-btn-secondary" type="button" onclick="closeConfirm()">Cancel</button>
      <button class="tw-btn tw-btn-primary" type="button" id="confirmBtn" onclick="runConfirm()">Close Survey</button>
    </div>
  </div>
  <!-- New Survey chooser — in-page modal (hidden until opened) -->
  <div class="tw-popup-overlay" id="newSurveyOverlay" aria-hidden="true" onclick="closeNewSurvey()"></div>
  <div class="tw-popup-panel tw-popup-lg" id="newSurveyPopup" tabindex="-1"
     role="dialog" aria-modal="true" aria-labelledby="newSurveyTitle" aria-hidden="true">
    <div class="tw-popup-header">
      <h2 class="tw-popup-header-title" id="newSurveyTitle">New Survey</h2>
      <button class="tw-popup-close" type="button" aria-label="Close" onclick="closeNewSurvey()">
        <i class="fa-regular fa-xmark tw:text-lg" aria-hidden="true"></i>
      </button>
    </div>
    <div class="tw-popup-body">
      <fieldset class="tw:border-0 tw:p-0 tw:m-0">
        <legend class="tw:sr-only">Choose how to start your new survey</legend>
        <div class="tw:text-body-xs tw:leading-body-xs tw:uppercase tw:tracking-wide tw:text-neutral-600 tw:font-semibold tw:mb-2">Start fresh</div>
        <label class="tw-card tw-card-interactive tw:block tw:cursor-pointer tw:mb-4 tw:transition tw:duration-150 tw:motion-reduce:transition-none tw:has-[:checked]:outline tw:has-[:checked]:outline-2 tw:has-[:checked]:-outline-offset-2 tw:has-[:checked]:outline-primary tw:has-[:focus-visible]:outline tw:has-[:focus-visible]:outline-2 tw:has-[:focus-visible]:outline-offset-2 tw:has-[:focus-visible]:outline-primary">
          <input type="radio" name="newSurveyChoice" value="scratch" class="tw:sr-only" onchange="onNewSurveyChoice()">
          <div class="tw-card-body tw:flex tw:items-start tw:gap-3">
            <span class="tw:w-12 tw:h-12 tw:shrink-0 tw:rounded-lg tw:bg-primary-100 tw:flex tw:items-center tw:justify-center" aria-hidden="true">
              <i class="fa-regular fa-pen-ruler tw:text-xl tw:text-primary-500"></i>
            </span>
            <div class="tw:min-w-0">
              <h3 class="tw-h4 tw:mb-0">Start from scratch</h3>
              <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0 tw:mt-1">Build your own questions and settings from a blank survey.</p>
            </div>
          </div>
        </label>
        <div class="tw:text-body-xs tw:leading-body-xs tw:uppercase tw:tracking-wide tw:text-neutral-600 tw:font-semibold tw:mb-2">Or start from a template</div>
        <div class="tw:space-y-3">
          <label class="tw-card tw-card-interactive tw:block tw:cursor-pointer tw:transition tw:duration-150 tw:motion-reduce:transition-none tw:has-[:checked]:outline tw:has-[:checked]:outline-2 tw:has-[:checked]:-outline-offset-2 tw:has-[:checked]:outline-primary tw:has-[:focus-visible]:outline tw:has-[:focus-visible]:outline-2 tw:has-[:focus-visible]:outline-offset-2 tw:has-[:focus-visible]:outline-primary">
            <input type="radio" name="newSurveyChoice" value="retention" class="tw:sr-only" onchange="onNewSurveyChoice()">
            <div class="tw-card-body tw:flex tw:items-start tw:gap-3">
              <span class="tw:w-12 tw:h-12 tw:shrink-0 tw:rounded-lg tw:bg-blue-100 tw:flex tw:items-center tw:justify-center" aria-hidden="true">
                <i class="fa-regular fa-graduation-cap tw:text-xl tw:text-blue-500"></i>
              </span>
              <div class="tw:min-w-0">
                <div class="tw:flex tw:items-baseline tw:gap-2 tw:flex-wrap">
                  <h3 class="tw-h4 tw:mb-0">Retention Survey</h3>
                  <span class="tw:text-body-s tw:leading-body-s tw:text-neutral-600">· 6 questions</span>
                </div>
                <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0 tw:mt-1">Understand where students are heading next and how confident they feel about it.</p>
              </div>
            </div>
          </label>
          <label class="tw-card tw-card-interactive tw:block tw:cursor-pointer tw:transition tw:duration-150 tw:motion-reduce:transition-none tw:has-[:checked]:outline tw:has-[:checked]:outline-2 tw:has-[:checked]:-outline-offset-2 tw:has-[:checked]:outline-primary tw:has-[:focus-visible]:outline tw:has-[:focus-visible]:outline-2 tw:has-[:focus-visible]:outline-offset-2 tw:has-[:focus-visible]:outline-primary">
            <input type="radio" name="newSurveyChoice" value="event" class="tw:sr-only" onchange="onNewSurveyChoice()">
            <div class="tw-card-body tw:flex tw:items-start tw:gap-3">
              <span class="tw:w-12 tw:h-12 tw:shrink-0 tw:rounded-lg tw:bg-green-100 tw:flex tw:items-center tw:justify-center" aria-hidden="true">
                <i class="fa-regular fa-calendar-star tw:text-xl tw:text-green-600"></i>
              </span>
              <div class="tw:min-w-0">
                <div class="tw:flex tw:items-baseline tw:gap-2 tw:flex-wrap">
                  <h3 class="tw-h4 tw:mb-0">Post-event Survey</h3>
                  <span class="tw:text-body-s tw:leading-body-s tw:text-neutral-600">· 6 questions</span>
                </div>
                <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-0 tw:mt-1">Gather feedback after an open day, parents' evening or other event while it's fresh.</p>
              </div>
            </div>
          </label>
        </div>
      </fieldset>
    </div>
    <div class="tw-popup-footer">
      <button class="tw-btn tw-btn-secondary" type="button" onclick="closeNewSurvey()">Cancel</button>
      <button class="tw-btn tw-btn-primary" type="button" id="newSurveyConfirm" onclick="confirmNewSurvey()" disabled>Create New Survey</button>
    </div>
  </div>
  <!-- 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);
    };
    // ============ Confirm popup (Close survey / Delete draft) ============
    var confirmConfig = {
      close: {
        title: 'Close this survey?',
        message: 'This survey will stop accepting responses and results will become final.',
        btnLabel: 'Close Survey',
        btnDanger: false,
        toast: 'Survey closed — results are now final'
      },
      delete: {
        title: 'Delete this draft?',
        message: "This draft will be permanently deleted. This can't be undone.",
        btnLabel: 'Delete Draft',
        btnDanger: true,
        toast: 'Draft deleted'
      }
    };
    var pendingToast = null;
    window.openConfirm = function(kind) {
      var cfg = confirmConfig[kind];
      if (!cfg) return;
      document.getElementById('confirmTitle').textContent = cfg.title;
      document.getElementById('confirmMessage').textContent = cfg.message;
      var btn = document.getElementById('confirmBtn');
      btn.textContent = cfg.btnLabel;
      btn.classList.toggle('tw-btn-danger', cfg.btnDanger);
      btn.classList.toggle('tw-btn-primary', !cfg.btnDanger);
      pendingToast = cfg.toast;
      document.getElementById('confirmOverlay').classList.add('tw-popup-visible');
      document.getElementById('confirmPopup').classList.add('tw-popup-visible');
    };
    window.closeConfirm = function() {
      document.getElementById('confirmOverlay').classList.remove('tw-popup-visible');
      document.getElementById('confirmPopup').classList.remove('tw-popup-visible');
    };
    window.runConfirm = function() {
      closeConfirm();
      if (pendingToast) showToast(pendingToast, 'success');
      pendingToast = null;
    };
    // ============ Escape closes any open popup ============
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') { closeConfirm(); closeNewSurvey(); }
    });
    // ============ Arrival toasts (?deployed= / ?saved=) ============
    (function() {
      var params = new URLSearchParams(window.location.search);
      if (params.get('deployed') === '1') {
        var name = params.get('name');
        showToast(name ? '"' + name + '" sent for approval' : 'Survey sent for approval', 'success');
      } else if (params.get('saved') === '1') {
        showToast('Draft saved', 'success');
      }
    })();
    // ============ Live filtering: status pills + search (AND) ============
    var surveyActiveFilter = 'all';
    window.applySurveyFilters = function() {
      var search = document.getElementById('surveySearchInput').value.trim().toLowerCase();
      var rows = document.querySelectorAll('#surveysTableBody tr[data-status]');
      var visible = 0;
      rows.forEach(function(row) {
        var statusMatch = surveyActiveFilter === 'all' || row.dataset.status === surveyActiveFilter;
        var searchMatch = search === '' || row.dataset.name.indexOf(search) !== -1;
        var show = statusMatch && searchMatch;
        row.hidden = !show;
        if (show) visible++;
      });
      document.getElementById('surveysEmptyRow').hidden = visible !== 0;
      document.getElementById('surveyResultsCount').textContent = (visible === rows.length)
        ? 'Showing ' + rows.length + ' surveys'
        : 'Showing ' + visible + ' of ' + rows.length + ' surveys';
    };
    window.selectSurveyFilter = function(filter) {
      surveyActiveFilter = filter;
      document.querySelectorAll('#surveyFilterPills [data-filter]').forEach(function(pill) {
        var isActive = pill.dataset.filter === filter;
        pill.classList.toggle(pill.dataset.activeClass, isActive);
        pill.classList.toggle(pill.dataset.inactiveClass, !isActive);
        pill.setAttribute('aria-pressed', isActive.toString());
      });
      applySurveyFilters();
    };
    window.clearSurveyFilters = function() {
      document.getElementById('surveySearchInput').value = '';
      selectSurveyFilter('all');
    };
    // ============ New Survey chooser (in-page modal) ============
    var newSurveyReturnFocus = null;
    window.openNewSurvey = function(trigger) {
      newSurveyReturnFocus = trigger || document.getElementById('newSurveyTrigger');
      document.querySelectorAll('input[name="newSurveyChoice"]').forEach(function(r) { r.checked = false; });
      document.getElementById('newSurveyConfirm').disabled = true;
      var overlay = document.getElementById('newSurveyOverlay');
      var panel = document.getElementById('newSurveyPopup');
      overlay.classList.add('tw-popup-visible');
      panel.classList.add('tw-popup-visible');
      overlay.setAttribute('aria-hidden', 'false');
      panel.setAttribute('aria-hidden', 'false');
      panel.focus();
    };
    window.closeNewSurvey = function() {
      var overlay = document.getElementById('newSurveyOverlay');
      var panel = document.getElementById('newSurveyPopup');
      if (!panel || !panel.classList.contains('tw-popup-visible')) return;
      overlay.classList.remove('tw-popup-visible');
      panel.classList.remove('tw-popup-visible');
      overlay.setAttribute('aria-hidden', 'true');
      panel.setAttribute('aria-hidden', 'true');
      if (newSurveyReturnFocus && newSurveyReturnFocus.focus) newSurveyReturnFocus.focus();
    };
    window.onNewSurveyChoice = function() {
      document.getElementById('newSurveyConfirm').disabled =
        !document.querySelector('input[name="newSurveyChoice"]:checked');
    };
    window.confirmNewSurvey = function() {
      var sel = document.querySelector('input[name="newSurveyChoice"]:checked');
      if (!sel) return;
      window.location.href = '/lookbook/preview/projects/mat_surveys/new_survey?template=' + sel.value;
    };
  </script>
</div>