<div data-controller="sidebar tours-hub">
  <aside class="tw-sidebar">
    <!-- Logo -->
    <div class="tw-sidebar-logo">
      <a href="#" class="tw-sidebar-logo-link">
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M37.47 38L29.43 17.99H26.34L18.27 38H21.12L22.89 33.53H32.85L34.62 38H37.47ZM32.13 31.34H23.64L27.87 20.54L32.13 31.34Z" fill="white"/>
          <path d="M39 18V14H37V18H33V20H37V24H39V20H43V18H39Z" fill="#EC634B"/>
        </svg>
      </a>
    </div>
    <!-- Navigation -->
    <nav class="tw-sidebar-nav" role="navigation" aria-label="Main navigation">
      <!-- Insights -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="insights"
        data-label="Insights"
        aria-expanded="false">
        <i class="fa-light fa-chart-mixed tw-sidebar-icon"></i>
        <span class="tw:sr-only">Insights</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
      </button>
      <!-- Parents & Enquiries -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="parents"
        data-label="Parents & Enquiries"
        aria-expanded="false">
        <i class="fa-light fa-user-group tw-sidebar-icon"></i>
        <span class="tw:sr-only">Parents & Enquiries</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
      </button>
      <!-- Communications & Events -->
      <button type="button"
            class="tw-sidebar-item tw-active"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="communications"
        data-label="Communications & Events"
        aria-expanded="false">
        <i class="fa-light fa-comment-alt-lines tw-sidebar-icon"></i>
        <span class="tw:sr-only">Communications & Events</span>
      </button>
      <!-- Registered Students -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="students"
        data-label="Registered Students"
        aria-expanded="false">
        <i class="fa-light fa-users tw-sidebar-icon"></i>
        <span class="tw:sr-only">Registered Students</span>
      </button>
      <!-- Marketing -->
      <!-- <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="marketing"
            data-label="Marketing"
            aria-expanded="false">
      <svg class="tw-sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14.7461 2.38281C13.875 2.13281 12.9531 2 12 2C6.47656 2 2 6.47656 2 12C2 17.5234 6.47656 22 12 22C17.5234 22 22 17.5234 22 12C22 11.0469 21.8672 10.125 21.6172 9.25391L20.7266 10.2461C20.6836 10.293 20.6445 10.3359 20.5977 10.3789C20.6953 10.9062 20.7461 11.4453 20.7461 12C20.7461 16.832 16.8281 20.75 11.9961 20.75C7.16406 20.75 3.25 16.832 3.25 12C3.25 7.16797 7.16797 3.25 12 3.25C12.5547 3.25 13.0977 3.30078 13.6211 3.39844C13.6641 3.35547 13.707 3.3125 13.7539 3.26953L14.7461 2.38281ZM12.7266 5.79297C12.4883 5.76562 12.2461 5.75 12 5.75C8.54687 5.75 5.75 8.54687 5.75 12C5.75 15.4531 8.54687 18.25 12 18.25C15.4531 18.25 18.25 15.4531 18.25 12C18.25 11.7539 18.2344 11.5117 18.207 11.2734C18.1016 11.2656 17.9961 11.2539 17.8906 11.2383L16.9141 11.0742C16.9687 11.375 17 11.6836 17 12C17 14.7617 14.7617 17 12 17C9.23828 17 7 14.7617 7 12C7 9.23828 9.23828 7 12 7C12.3164 7 12.625 7.03125 12.9258 7.08594L12.7617 6.10937C12.7422 6.00391 12.7305 5.89844 12.7266 5.79297ZM15.3398 9.54687L18.0898 10.0039C18.7266 10.1094 19.3711 9.88281 19.8008 9.39844L21.5156 7.46875C21.9727 6.95703 21.7422 6.14453 21.0859 5.94922L18.7539 5.25L18.0508 2.91406C17.8555 2.25781 17.043 2.02734 16.5312 2.48437L14.6016 4.19922C14.1211 4.62891 13.8906 5.27344 13.9961 5.91016L14.4531 8.66016L11.5547 11.5586C11.3125 11.8008 11.3125 12.1992 11.5547 12.4414C11.7969 12.6836 12.1953 12.6836 12.4375 12.4414L15.3359 9.54297L15.3398 9.54687ZM16.4258 8.46094L18.4297 6.45703L20.2578 7.00391L18.8672 8.56641C18.7227 8.72656 18.5078 8.80469 18.2969 8.76953L16.4258 8.45703V8.46094ZM17.543 5.57422L15.5391 7.57813L15.2266 5.70703C15.1914 5.49609 15.2656 5.28125 15.4297 5.13672L16.9922 3.74609L17.5391 5.57422H17.543Z" fill="currentColor" stroke="none"/>
      </svg>
      <span class="tw:sr-only">Marketing</span>
      <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">128</span>
    </button> -->
      <!-- Enrolments -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="enrolments"
        data-label="Enrolments"
        aria-expanded="false">
        <i class="fa-light fa-file-alt tw-sidebar-icon"></i>
        <span class="tw:sr-only">Enrolments</span>
      </button>
      <!-- Applicaa Futures -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="applicaafutures"
        data-label="Applicaa Futures"
        aria-expanded="false">
        <i class="fa-light fa-graduation-cap tw-sidebar-icon"></i>
        <span class="tw:sr-only">Applicaa Futures</span>
      </button>
      <!-- Data -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="data"
        data-label="Data"
        aria-expanded="false">
        <i class="fa-light fa-cloud-upload tw-sidebar-icon"></i>
        <span class="tw:sr-only">Data</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">160</span>
      </button>
      <!-- Manage Users -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="manageusers"
        data-label="Manage Users"
        aria-expanded="false">
        <i class="fa-light fa-users-cog tw-sidebar-icon"></i>
        <span class="tw:sr-only">Manage Users</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">218</span>
      </button>
      <!-- Platform Essentials -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="essentials"
        data-label="Platform Essentials"
        aria-expanded="false">
        <i class="fa-light fa-bell tw-sidebar-icon"></i>
        <span class="tw:sr-only">Platform Essentials</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">90</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="settings"
        data-label="Settings"
        aria-expanded="false">
        <i class="fa-light fa-cogs tw-sidebar-icon"></i>
        <span class="tw:sr-only">Settings</span>
      </button>
    </div>
  </aside>
  <!-- Parents & Enquiries Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="parents"
     aria-label="Parents & Enquiries navigation">
    <div class="tw-sidebar-drawer-header">PARENTS & ENQUIRIES</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">Parents</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enquiries</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">LISTS</div>
    <nav class="tw-drawer-nav">
      <a href="/lookbook/preview/projects/lists/index"
       class="tw-drawer-item">
        <span class="tw-drawer-item-label">Lists</span>
      </a>
    </nav>
  </div>
  <!-- Insights Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="insights"
     aria-label="Insights navigation">
    <div class="tw-sidebar-drawer-header">INSIGHTS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Summary</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Pipeline</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Map view</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Feeder schools</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Events</span>
      </a>
    </nav>
  </div>
  <!-- Registered Students Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="students"
     aria-label="Registered Students navigation">
    <div class="tw-sidebar-drawer-header">REGISTERED STUDENTS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Incomplete</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Awaiting Reference
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Completed
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Declined</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Withdrawn</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Deadline Missed</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Skipped Payment</span>
      </a>
    </nav>
  </div>
  <!-- Enrolments Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="enrolments"
     aria-label="Enrolments navigation">
    <div class="tw-sidebar-drawer-header">BULK ENROLMENT</div>
    <nav class="tw-drawer-nav">
      <a href="/lookbook/preview/projects/enrolment/bulk_enrolment" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Bulk Enrolment</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">
      ENROLMENT
      <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive tw:normal-case"
          data-controller="demo"
          data-action="click->demo#show"
        data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
        data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
        data-demo-learn-more="https://helpdesk.applicaa.com/">
        <i class="fa-regular fa-clapperboard-play"></i>
        Demo
      </span>
    </div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Details to be checked</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Ready to Enrol</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolled</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Waiting</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Declined</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Activities</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">REPORT</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Report</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">POST ENROLMENT</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">CTF/File Request</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Transition Tool</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Sorting Hat</span>
      </a>
    </nav>
  </div>
  <!-- Applicaa Futures Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="applicaafutures"
     aria-label="Applicaa Futures navigation">
    <div class="tw-sidebar-drawer-header">APPLICAA FUTURES</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">One Reference</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Destination Tracker</span>
      </a>
    </nav>
  </div>
  <!-- Data Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="data"
     aria-label="Data navigation">
    <div class="tw-sidebar-drawer-header">DATA</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Import</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Export
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Uploaded Files</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          First Media Applications
          <span class="tw-badge tw-badge-danger tw-badge-sm">182</span>
        </span>
      </a>
    </nav>
  </div>
  <!-- Manage Users Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="manageusers"
     aria-label="Manage Users navigation">
    <div class="tw-sidebar-drawer-header">MANAGE USERS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Manually Add People</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Duplicate Students
          <span class="tw-badge tw-badge-danger tw-badge-sm">211</span>
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Duplicate Agencies
          <span class="tw-badge tw-badge-danger tw-badge-sm">7</span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Duplicate Contacts</span>
      </a>
    </nav>
  </div>
  <!-- Platform Essentials Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="essentials"
     aria-label="Platform Essentials navigation">
    <div class="tw-sidebar-drawer-header">PLATFORM ESSENTIALS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Applicaa Journey
          <span class="tw-badge tw-badge-danger tw-badge-sm">13</span>
        </span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Product Requests & Updates</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Feature Requests</a>
        <a href="#" class="tw-drawer-subitem">Road Map</a>
        <a href="#" class="tw-drawer-subitem">Vote</a>
        <a href="#" class="tw-drawer-subitem">Recent Updates</a>
      </div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Time Saved With Admissions+</span>
      </a>
    </nav>
  </div>
  <!-- Communications & Events Drawer -->
  <div class="tw-sidebar-drawer tw-open"
     data-sidebar-target="drawer"
     data-drawer-id="communications"
     aria-label="Communications & Events navigation">
    <div class="tw-sidebar-drawer-header">COMMUNICATIONS & EVENTS</div>
    <nav class="tw-drawer-nav">
      <!-- Communications Section (expandable) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Communications
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Manual Messages
        </a>
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Automated Messages
        </a>
        <a href="/lookbook/preview/projects/workflow/approvals" data-turbo="false" class="tw-drawer-subitem tw:flex tw:items-center">
          <i class="fa-regular fa-clipboard-check"></i>
          Approvals
          <span class="tw-badge tw-badge-danger tw-badge-sm tw:ml-auto">3</span>
        </a>
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Scheduled Messages
        </a>
        <a href="#" class="tw-drawer-subitem">Message Summary</a>
      </div>
      <!-- Meetings (single item) -->
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Meetings
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <!-- Tours (single item — links to the Tours prototype) -->
      <a href="/lookbook/preview/projects/tours/all_tours" class="tw-drawer-item tw-active">
        <span class="tw-drawer-item-label">Tours</span>
      </a>
      <!-- Events Section (expandable) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Events
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Event Calendar</a>
        <a href="#" class="tw-drawer-subitem">Event Guests</a>
        <a href="#" class="tw-drawer-subitem">Event Waitlists</a>
        <a href="#" class="tw-drawer-subitem">Event Forms</a>
      </div>
      <!-- Taster Day Section (expandable with secondary color) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Taster Day
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Taster Day Configuration</a>
        <a href="#" class="tw-drawer-subitem">Student Submissions & Timetables</a>
      </div>
      <div class="tw-sidebar-drawer-header tw:flex tw:items-center tw:gap-2">
        Help Desk <span class="tw-badge tw-badge-primary-subtle tw-badge-sm tw:normal-case tw:tracking-normal">New</span>
      </div>
      <a href="/lookbook/preview/projects/schools_helpdesk/helpdesk" data-turbo="false" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Tickets</span>
      </a>
      <a href="/lookbook/preview/projects/schools_helpdesk/knowledge" data-turbo="false" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Knowledge</span>
      </a>
      <a href="/lookbook/preview/projects/schools_helpdesk/settings" data-turbo="false" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Help Desk Settings</span>
      </a>
    </nav>
  </div>
  <!-- Marketing & Events Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="marketing"
     aria-label="Marketing & Events navigation">
    <div class="tw-sidebar-drawer-header">MARKETING & EVENTS</div>
    <nav class="tw-drawer-nav">
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Marketing Campaigns</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Campaigns</a>
        <a href="#" class="tw-drawer-subitem">Reports</a>
      </div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Workflows</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Emails</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Manual Emails</a>
        <a href="#" class="tw-drawer-subitem">Automated Emails</a>
        <a href="#" class="tw-drawer-subitem">Email Templates</a>
      </div>
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">Notifications</span>
      </a>
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">SMS</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Meeting</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Events</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Calendar</a>
        <a href="#" class="tw-drawer-subitem">Guests</a>
        <a href="#" class="tw-drawer-subitem">Waitlists</a>
        <a href="#" class="tw-drawer-subitem">Forms</a>
      </div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Taster Day</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Configurations</a>
        <a href="#" class="tw-drawer-subitem">Submissions & Timetables</a>
      </div>
    </nav>
  </div>
  <!-- Settings Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="settings"
     aria-label="Settings navigation">
    <div class="tw-sidebar-drawer-header">SETTINGS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Application Form</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Subject Options</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Form Settings</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">School Settings</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Settings</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Navigator</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Properties</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Security</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <div class="tw-sidebar-drawer-header tw:flex tw:items-center tw:gap-2">
        Emma <span class="tw-badge tw-badge-primary-subtle tw-badge-sm tw:normal-case tw:tracking-normal">New</span>
      </div>
      <a href="/lookbook/preview/projects/agent/emma_usage" data-turbo="false" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Usage & credits</span>
      </a>
      <a href="/lookbook/preview/projects/agent/activity_table" data-turbo="false" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Activity</span>
      </a>
      <span class="tw-drawer-item tw-disabled" aria-disabled="true">
        <span class="tw-drawer-item-label">Activity audit</span>
        <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw:normal-case tw:tracking-normal">Soon</span>
      </span>
      <span class="tw-drawer-item tw-disabled" aria-disabled="true">
        <span class="tw-drawer-item-label">How-to & guides</span>
        <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm tw:normal-case tw:tracking-normal">Soon</span>
      </span>
      <a href="/lookbook/preview/projects/drafts_archived/agent/emma_settings" data-turbo="false" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Emma settings</span>
      </a>
    </nav>
  </div>
  <header class="tw-topbar" role="banner">
    <div class="tw-topbar-left">
      <!-- Context Dropdown -->
      <div class="tw-dropdown tw-dropdown-borderless" data-controller="dropdown" data-dropdown-auto-highlight-value="true">
        <button class="tw-dropdown-trigger tw-topbar-dropdown-trigger"
              type="button"
              aria-haspopup="listbox"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
          <span class="tw-dropdown-label tw-dropdown-primary" data-dropdown-target="label">2024/2025 - Year 7 Main Entry</span>
          <svg class="tw-dropdown-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m2 5 6 6 6-6"/>
          </svg>
        </button>
        <div class="tw-dropdown-menu tw-dropdown-menu-wide tw-dropdown-menu-scrollable" role="listbox" data-dropdown-target="menu" tabindex="-1">
          <button class="tw-dropdown-item tw-active" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y7-main">
            <span class="tw-dropdown-item-text">2024/2025 - Year 7 Main Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y7-late">
            <span class="tw-dropdown-item-text">2024/2025 - Year 7 Late Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y8">
            <span class="tw-dropdown-item-text">2024/2025 - Year 8 Admissions</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y9">
            <span class="tw-dropdown-item-text">2024/2025 - Year 9 In-Year</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y7-main">
            <span class="tw-dropdown-item-text">2025/2026 - Year 7 Main Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y7-late">
            <span class="tw-dropdown-item-text">2025/2026 - Year 7 Late Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y8">
            <span class="tw-dropdown-item-text">2025/2026 - Year 8 Admissions</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y9">
            <span class="tw-dropdown-item-text">2025/2026 - Year 9 In-Year</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2026-y7-main">
            <span class="tw-dropdown-item-text">2026/2027 - Year 7 Main Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2026-y8">
            <span class="tw-dropdown-item-text">2026/2027 - Year 8 Admissions</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2023-y12">
            <span class="tw-dropdown-item-text">2023/2024 - Year 12 Sixth Form</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y12">
            <span class="tw-dropdown-item-text">2024/2025 - Year 12 Sixth Form</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
      <!-- Search -->
      <div class="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...">
        </div>
      </div>
    </div>
    <div class="tw-topbar-right">
      <!-- Action Buttons -->
      <button type="button" class="tw-btn tw-btn-soft-success tw-btn-multiline" 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-soft-primary tw-btn-multiline" 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-soft-primary tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Support & Feature Requests" data-tooltip-placement-value="bottom">
        <i class="fa-solid fa-comment-question tw-icon-16"></i>
        Support<br>
         & Requests
      </button>
      <div class="tw-topbar-action-icons">
        <!-- Notification Icon -->
        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-topbar-notification-btn" aria-label="Notifications" data-controller="tooltip" data-tooltip-content-value="Notification" data-tooltip-placement-value="bottom">
          <i class="fa-solid fa-bell tw-icon-16"></i>
        </button>
      </div>
      <div class="tw-topbar-divider"></div>
      <!-- User Avatar Dropdown -->
      <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown">
        <button type="button" class="tw-dropdown-trigger tw-topbar-avatar"
              aria-label="User menu"
              aria-haspopup="true"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
          <div class="tw-avatar tw-avatar-primary" role="img" aria-label="Jane Doe">
            <span>JD</span>
          </div>
        </button>
        <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
          <div class="tw-dropdown-header">John Doe</div>
          <div class="tw-dropdown-divider"></div>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-circle-sterling tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Referrals & billing</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-lock tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Password & security</span>
          </button>
          <div class="tw-dropdown-divider"></div>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-layer-group tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Multiple form</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-envelope tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Email preferences</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-right-from-bracket tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Logout</span>
          </button>
        </div>
      </div>
    </div>
  </header>
  <main class="tw-sidebar-topbar-content-offset tw:bg-background tw:min-h-screen">
    <div class="tw-container-fluid tw-page-container">
      <!-- Page Header -->
      <div class="tw-page-header tw:mb-4">
        <div class="tw-page-header-breadcrumb">
          <nav aria-label="Breadcrumb">
            <ol class="tw-breadcrumb">
              <li class="tw-breadcrumb-item">
                <a href="#" aria-label="Home"><i class="fa-regular fa-house tw-breadcrumb-item-icon"></i></a>
              </li>
              <li class="tw-breadcrumb-item"><a href="#">Communications & Events</a></li>
              <li class="tw-breadcrumb-item tw-active" aria-current="page">Tours</li>
            </ol>
          </nav>
        </div>
        <div class="tw-page-header-main">
          <div class="tw-page-header-title-group">
            <div>
              <h1 class="tw-page-header-title"><span class="tw:text-neutral-900">Tours</span></h1>
              <p class="tw:text-body-m tw:leading-body-m tw:text-muted tw:max-w-2xl tw:mt-1 tw:mb-0" data-tours-hub-target="pageSubtitle">Plan tours, taster days, assessments and interviews — share a public page or embed the booking form on your school site.</p>
            </div>
          </div>
          <div class="tw-page-header-actions">
            <button type="button" class="tw-btn tw-btn-secondary" data-action="click->tours-hub#openBulk">
              <i class="fa-regular fa-calendar-plus tw:mr-1"></i> Bulk schedule
            </button>
            <a href="/lookbook/preview/projects/tours/new_tour?start=1" class="tw-btn tw-btn-primary">
              <i class="fa-solid fa-plus tw:mr-1"></i> New tour
            </a>
          </div>
        </div>
        <!-- The three peer views are page-level navigation, so they live in the
             header's tabs slot. (They used to be a segmented control below the
             stat strip, under a second "Tours" heading that repeated the H1.) -->
        <div class="tw-page-header-tabs">
          <div class="tw-tabs" role="tablist" aria-label="Tours views">
            <button type="button" class="tw-tab tw-active" role="tab" id="hub-tab-types"
                    aria-selected="true" aria-controls="hub-panel-types" tabindex="0"
                    data-tours-hub-target="viewBtn"
                    data-action="click->tours-hub#selectView keydown->tours-hub#viewKeydown">
              <i class="fa-regular fa-grid-2 tw-tab-icon" aria-hidden="true"></i> Types
            </button>
            <button type="button" class="tw-tab" role="tab" id="hub-tab-calendar"
                    aria-selected="false" aria-controls="hub-panel-calendar" tabindex="-1"
                    data-tours-hub-target="viewBtn"
                    data-action="click->tours-hub#selectView keydown->tours-hub#viewKeydown">
              <i class="fa-regular fa-calendar tw-tab-icon" aria-hidden="true"></i> Calendar
            </button>
            <button type="button" class="tw-tab" role="tab" id="hub-tab-bookings"
                    aria-selected="false" aria-controls="hub-panel-bookings" tabindex="-1"
                    data-tours-hub-target="viewBtn"
                    data-action="click->tours-hub#selectView keydown->tours-hub#viewKeydown">
              <i class="fa-regular fa-list tw-tab-icon" aria-hidden="true"></i> Bookings
            </button>
          </div>
        </div>
      </div>
      <!-- ==================== A0 · Types — empty state ==================== -->
      <div class="tw:hidden" data-tours-hub-target="emptyWrap">
        <div class="tw-card">
          <div class="tw-card-body tw:text-center tw:py-16">
            <div class="tw:flex tw:justify-center tw:mb-4">
              <div class="tw-avatar tw-avatar-xl tw-avatar-primary"><i class="fa-regular fa-calendar-plus"></i></div>
            </div>
            <h2 class="tw-h4 tw:mb-2">No tours yet</h2>
            <p class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mb-6 tw:max-w-md tw:mx-auto">
              Create your first tour to start taking bookings. You'll set the format,
              availability and the emails parents receive — then publish a public booking
              page or embed it on your site.
            </p>
            <div class="tw:flex tw:justify-center tw:gap-2">
              <a href="/lookbook/preview/projects/tours/new_tour?start=1" class="tw-btn tw-btn-primary">
                <i class="fa-solid fa-plus tw:mr-1"></i> New tour
              </a>
              <button type="button" class="tw-btn tw-btn-secondary" data-action="click->tours-hub#seedExample">See an example</button>
            </div>
          </div>
        </div>
      </div>
      <div data-tours-hub-target="contentWrap">
        <!-- ==================== Stat tiles ==================== -->
        <div class="tw:grid tw:grid-cols-2 tw:lg:grid-cols-4 tw:gap-3 tw:mb-5" data-tours-hub-target="statTiles">
          <div class="tw-card tw-card-sm">
            <div class="tw-card-body tw:flex tw:items-center tw:justify-between tw:gap-2">
              <div>
                <p class="tw-overline">Active tours</p>
                <p class="tw-h3 tw:mb-0" data-tours-hub-target="statTypes">6</p>
              </div>
              <span class="tw:flex tw:items-center tw:justify-center tw:w-9 tw:h-9 tw:rounded-md tw:bg-primary-100 tw:shrink-0" aria-hidden="true"><i class="fa-regular fa-layer-group tw:text-primary-500"></i></span>
            </div>
          </div>
          <div class="tw-card tw-card-sm">
            <div class="tw-card-body tw:flex tw:items-center tw:justify-between tw:gap-2">
              <div>
                <p class="tw-overline">Bookings</p>
                <p class="tw-h3 tw:mb-0" data-tours-hub-target="statBooked">9</p>
              </div>
              <span class="tw:flex tw:items-center tw:justify-center tw:w-9 tw:h-9 tw:rounded-md tw:bg-primary-100 tw:shrink-0" aria-hidden="true"><i class="fa-regular fa-calendar-check tw:text-primary-500"></i></span>
            </div>
          </div>
          <div class="tw-card tw-card-sm">
            <div class="tw-card-body tw:flex tw:items-center tw:justify-between tw:gap-2">
              <div>
                <p class="tw-overline">Places available</p>
                <p class="tw-h3 tw:mb-0" data-tours-hub-target="statSlots">280</p>
              </div>
              <span class="tw:flex tw:items-center tw:justify-center tw:w-9 tw:h-9 tw:rounded-md tw:bg-primary-100 tw:shrink-0" aria-hidden="true"><i class="fa-regular fa-inbox tw:text-primary-500"></i></span>
            </div>
          </div>
          <div class="tw-card tw-card-sm">
            <div class="tw-card-body tw:flex tw:items-center tw:justify-between tw:gap-2">
              <div>
                <p class="tw-overline">Capacity filled</p>
                <p class="tw-h3 tw:mb-0" data-tours-hub-target="statFilled">3%</p>
              </div>
              <span class="tw:flex tw:items-center tw:justify-center tw:w-9 tw:h-9 tw:rounded-md tw:bg-primary-100 tw:shrink-0" aria-hidden="true"><i class="fa-regular fa-chart-pie tw:text-primary-500"></i></span>
            </div>
          </div>
        </div>
        <!-- Types-only toolbar: search + intake filter + status/format chips.
             Intake is a filter first — managing the school-level list is an item
             inside that same dropdown, so it no longer floats loose in this row.
             "Intake" is the product's word for this: the Events list filters on
             "All Intakes" and the event form labels the field "Apply for". -->
        <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-3 tw:mb-4" data-tours-hub-target="typesToolbar">
          <div class="tw:w-64">
            <div class="tw-input-group tw-input-group-sm 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 tw-form-control-sm" placeholder="Search by tour"
                     aria-label="Search by tour"
                     data-tours-hub-target="typeSearch" data-action="input->tours-hub#typeSearchChanged">
            </div>
          </div>
          <!-- Fixed width so the menu (which is w-full) is wide enough for the
               "Manage intakes…" row instead of truncating it. -->
          <div class="tw-dropdown tw-dropdown-sm tw:w-56" data-controller="dropdown">
            <button class="tw-dropdown-trigger" type="button" aria-haspopup="true" aria-expanded="false"
                    aria-label="Filter by intake"
                    data-dropdown-target="trigger"
                    data-action="click->dropdown#toggle keydown->dropdown#keydown">
              <i class="fa-regular fa-tag tw:text-muted tw:mr-1.5" aria-hidden="true"></i>
              <span class="tw-dropdown-label" data-tours-hub-target="catFilterLabel">All intakes</span>
              <i class="fa-regular fa-chevron-down tw-dropdown-chevron" aria-hidden="true"></i>
            </button>
            <div class="tw-dropdown-menu" role="menu" data-dropdown-target="menu" tabindex="-1"
                 data-tours-hub-target="catFilterMenu"></div>
          </div>
          <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-1.5 tw:ml-auto" role="group" aria-label="Filter tours">
            <button type="button" class="tw-tag tw-tag-pill tw-tag-interactive" aria-pressed="false"
                      data-filter="all" data-tours-hub-target="typeChip"
                      data-action="click->tours-hub#typeChipClicked">
              All
              <span class="tw:ml-0.5 tw:font-semibold tw:tabular-nums" data-chip-count>0</span>
            </button>
            <button type="button" class="tw-tag tw-tag-pill tw-tag-interactive" aria-pressed="false"
                      data-filter="open" data-tours-hub-target="typeChip"
                      data-action="click->tours-hub#typeChipClicked">
              Open
              <span class="tw:ml-0.5 tw:font-semibold tw:tabular-nums" data-chip-count>0</span>
            </button>
            <button type="button" class="tw-tag tw-tag-pill tw-tag-interactive" aria-pressed="false"
                      data-filter="closed" data-tours-hub-target="typeChip"
                      data-action="click->tours-hub#typeChipClicked">
              Closed
              <span class="tw:ml-0.5 tw:font-semibold tw:tabular-nums" data-chip-count>0</span>
            </button>
            <button type="button" class="tw-tag tw-tag-pill tw-tag-interactive" aria-pressed="false"
                      data-filter="online" data-tours-hub-target="typeChip"
                      data-action="click->tours-hub#typeChipClicked">
              Online
              <span class="tw:ml-0.5 tw:font-semibold tw:tabular-nums" data-chip-count>0</span>
            </button>
            <button type="button" class="tw-tag tw-tag-pill tw-tag-interactive" aria-pressed="false"
                      data-filter="inperson" data-tours-hub-target="typeChip"
                      data-action="click->tours-hub#typeChipClicked">
              In person
              <span class="tw:ml-0.5 tw:font-semibold tw:tabular-nums" data-chip-count>0</span>
            </button>
          </div>
        </div>
        <!-- ==================== Types view ==================== -->
        <div role="tabpanel" id="hub-panel-types" aria-labelledby="hub-tab-types" tabindex="0" data-tours-hub-target="typesPanel">
          <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:xl:grid-cols-3 tw:gap-4" data-tours-hub-target="typeGrid"></div>
        </div>
        <!-- ==================== Calendar view ==================== -->
        <div role="tabpanel" id="hub-panel-calendar" aria-labelledby="hub-tab-calendar" tabindex="0" class="tw:hidden" data-tours-hub-target="calendarPanel">
          <div class="tw-card">
            <div class="tw-card-body">
              <div class="tw:grid tw:grid-cols-1 tw:lg:grid-cols-3 tw:gap-6">
                <div class="tw:lg:col-span-2 tw:flex tw:flex-col">
                  <div class="tw:flex tw:flex-wrap tw:items-center tw:justify-between tw:gap-3 tw:mb-4">
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <span class="tw:text-body-s tw:leading-body-s tw:text-muted">Filter by type</span>
                      <div class="tw-dropdown" data-controller="dropdown">
                        <button class="tw-dropdown-trigger" type="button" aria-haspopup="true" aria-expanded="false"
                                data-dropdown-target="trigger"
                                data-action="click->dropdown#toggle keydown->dropdown#keydown">
                          <span class="tw:w-2 tw:h-2 tw:rounded-full tw:shrink-0 tw:bg-neutral-400" data-tours-hub-target="calFilterDot" aria-hidden="true"></span>
                          <span class="tw-dropdown-label" data-tours-hub-target="calFilterLabel">All types</span>
                          <i class="fa-regular fa-chevron-down tw-dropdown-chevron" aria-hidden="true"></i>
                        </button>
                        <div class="tw-dropdown-menu" role="menu" data-dropdown-target="menu" tabindex="-1" data-tours-hub-target="calFilterMenuItems"></div>
                      </div>
                      <div class="tw:w-44">
                        <select class="tw-form-select tw-form-select-sm" aria-label="Filter by target group"
                                data-tours-hub-target="calTgFilter" data-action="change->tours-hub#calTgFilterChanged">
                          <option value="all">All target groups</option>
                          <option value="Year 7 Entry">Year 7 Entry</option>
                          <option value="Year 8 Entry">Year 8 Entry</option>
                          <option value="Year 9 Entry">Year 9 Entry</option>
                          <option value="Sixth Form">Sixth Form</option>
                        </select>
                      </div>
                      <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw:invisible" data-tours-hub-target="calClearFilter"
                              data-action="click->tours-hub#calClearFilterClicked">Clear filter</button>
                    </div>
                    <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-2">
                      <div class="tw-btn-group tw-btn-group-segmented tw-btn-group-sm" role="group" aria-label="Calendar view">
                        <button type="button" class="tw-btn tw-active" aria-pressed="true"
                                data-tours-hub-target="calViewBtn" data-action="click->tours-hub#calViewMonth">Month</button>
                        <button type="button" class="tw-btn" aria-pressed="false"
                                data-tours-hub-target="calViewBtn" data-action="click->tours-hub#calViewWeek">Week</button>
                      </div>
                      <div class="tw:flex tw:items-center tw:gap-1">
                        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" aria-label="Previous" data-action="click->tours-hub#calPrev">
                          <i class="fa-regular fa-chevron-left"></i>
                        </button>
                        <span class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:min-w-28 tw:text-center" data-tours-hub-target="calLabel" aria-live="polite">May 2026</span>
                        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" aria-label="Next" data-action="click->tours-hub#calNext">
                          <i class="fa-regular fa-chevron-right"></i>
                        </button>
                      </div>
                    </div>
                  </div>
                  <div class="tw:flex tw:flex-col tw:flex-1" data-tours-hub-target="calGrid"></div>
                  <div class="tw:flex tw:flex-wrap tw:gap-x-4 tw:gap-y-1 tw:mt-3" data-tours-hub-target="calLegend" aria-label="Tour colours"></div>
                </div>
                <div class="tw:lg:border-l tw:lg:border-neutral-translucent-200 tw:lg:pl-6 tw:flex tw:flex-col">
                  <div class="tw:flex tw:items-center tw:justify-between tw:gap-2 tw:mb-4">
                    <h3 class="tw-h5 tw-card-title tw:text-primary-800 tw:mb-0" data-tours-hub-target="calOverviewLabel">May 2026 · overview</h3>
                    <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm" data-action="click->tours-hub#calClearFilterClicked">All types</button>
                  </div>
                  <div class="tw:grid tw:grid-cols-3 tw:gap-2">
                    <div class="tw:rounded-md tw:bg-neutral-100 tw:px-3 tw:py-2">
                      <p class="tw:text-indicator tw:leading-indicator tw:text-muted tw:mb-0.5">Sessions</p>
                      <p class="tw-h4 tw:mb-0" data-tours-hub-target="calOvSessions">0</p>
                    </div>
                    <div class="tw:rounded-md tw:bg-neutral-100 tw:px-3 tw:py-2">
                      <p class="tw:text-indicator tw:leading-indicator tw:text-muted tw:mb-0.5">Bookings</p>
                      <p class="tw-h4 tw:text-primary-700 tw:mb-0" data-tours-hub-target="calOvBookings">0</p>
                    </div>
                    <div class="tw:rounded-md tw:bg-neutral-100 tw:px-3 tw:py-2">
                      <p class="tw:text-indicator tw:leading-indicator tw:text-muted tw:mb-0.5">Filled</p>
                      <p class="tw-h4 tw:text-green-700 tw:mb-0" data-tours-hub-target="calOvFilled">0%</p>
                    </div>
                  </div>
                  <h3 class="tw-overline tw:mt-5 tw:mb-2">Bookings by type</h3>
                  <div data-tours-hub-target="calByType"></div>
                  <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mt-3 tw:mb-0">
                    <i class="fa-regular fa-arrow-trend-up tw:mr-1 tw:text-neutral-400" aria-hidden="true"></i>
                    <span data-tours-hub-target="calBusiest"></span>
                  </p>
                  <div class="tw:hidden tw:mt-4" data-tours-hub-target="calAlertWrap">
                    <div class="tw-inline-notification tw-inline-notification-compact tw-inline-notification-error" role="status">
                      <div class="tw-inline-notification-icon"><i class="fa-regular fa-circle-exclamation"></i></div>
                      <div class="tw-inline-notification-content">
                        <p class="tw-inline-notification-message tw:mb-0" data-tours-hub-target="calAlertText"></p>
                      </div>
                    </div>
                  </div>
                  <div class="tw:flex tw:items-center tw:justify-between tw:gap-2 tw:mt-5 tw:mb-2">
                    <h3 class="tw-overline tw:mb-0">Upcoming bookings</h3>
                    <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm" data-action="click->tours-hub#selectBookingsView">View all</button>
                  </div>
                  <div data-tours-hub-target="calUpcoming"></div>
                  <div class="tw:flex tw:gap-2 tw:mt-auto tw:pt-4 tw:border-t tw:border-neutral-translucent-200">
                    <button type="button" class="tw-btn tw-btn-primary tw:flex-1" data-action="click->tours-hub#openBulk">
                      <i class="fa-regular fa-calendar-plus tw:mr-1"></i> Bulk schedule
                    </button>
                    <button type="button" class="tw-btn tw-btn-secondary tw:flex-1" data-action="click->tours-hub#exportMonth">
                      <i class="fa-regular fa-file-export tw:mr-1"></i> Export month
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- ==================== Bookings view ==================== -->
        <div role="tabpanel" id="hub-panel-bookings" aria-labelledby="hub-tab-bookings" tabindex="0" class="tw:hidden" data-tours-hub-target="bookingsPanel">
          <div class="tw-data-table tw-card">
            <div class="tw:hidden" data-tours-hub-target="bkChipsWrap">
              <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-2 tw:px-4 tw:pt-3">
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-muted">Filters:</span>
                <span class="tw:flex tw:flex-wrap tw:gap-1.5" data-tours-hub-target="bkChips"></span>
                <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw:ml-auto" data-action="click->tours-hub#bkClearFilters">Clear</button>
              </div>
            </div>
            <div class="tw-data-table-toolbar tw:px-4">
              <div class="tw-data-table-toolbar-start tw:flex-1">
                <div class="tw:flex-1 tw:max-w-xs">
                  <div class="tw-input-group tw-input-group-sm 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 tw-form-control-sm" placeholder="Search by name or email"
                           aria-label="Search bookings by name or email"
                           data-tours-hub-target="bkSearch" data-action="input->tours-hub#bkFilterChanged">
                  </div>
                </div>
                <div class="tw:w-40">
                  <select class="tw-form-select tw-form-select-sm" aria-label="Filter by tour"
                          data-tours-hub-target="bkTypeFilter" data-action="change->tours-hub#bkFilterChanged">
                    <option value="all">All types</option>
                  </select>
                </div>
                <div class="tw:w-44">
                  <select class="tw-form-select tw-form-select-sm" aria-label="Filter by target group"
                          data-tours-hub-target="bkTgFilter" data-action="change->tours-hub#bkFilterChanged">
                    <option value="all">All target groups</option>
                    <option value="Year 7 Entry">Year 7 Entry</option>
                    <option value="Year 8 Entry">Year 8 Entry</option>
                    <option value="Year 9 Entry">Year 9 Entry</option>
                    <option value="Sixth Form">Sixth Form</option>
                  </select>
                </div>
                <div class="tw:w-36">
                  <select class="tw-form-select tw-form-select-sm" aria-label="Filter by stage"
                          data-tours-hub-target="bkStageFilter" data-action="change->tours-hub#bkFilterChanged">
                    <option value="all">All stages</option>
                  </select>
                </div>
                <div class="tw:w-36">
                  <select class="tw-form-select tw-form-select-sm" aria-label="Filter by status"
                          data-tours-hub-target="bkStatusFilter" data-action="change->tours-hub#bkFilterChanged">
                    <option value="all">All statuses</option>
                    <option value="confirmed">Confirmed</option>
                    <option value="awaiting">Awaiting</option>
                    <option value="attended">Attended</option>
                    <option value="noshow">No-show</option>
                    <option value="cancelled">Cancelled</option>
                  </select>
                </div>
              </div>
              <div class="tw-data-table-toolbar-end">
                <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm" data-action="click->tours-hub#bkRefresh">
                  <i class="fa-regular fa-rotate-right tw:mr-1"></i> Refresh
                </button>
              </div>
            </div>
            <!-- Loading -->
            <div class="tw:hidden" data-tours-hub-target="bkLoading">
              <div class="tw:px-6 tw:py-10 tw:text-center" role="status" aria-live="polite">
                <p class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mb-3">Loading bookings…</p>
                <div class="tw:max-w-xs tw:mx-auto">
                  <div class="tw-progress tw-progress-indeterminate" role="progressbar" aria-label="Loading bookings">
                    <div class="tw-progress-bar tw-progress-bar-primary"></div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Error -->
            <div class="tw:hidden" data-tours-hub-target="bkError">
              <div class="tw:px-6 tw:py-10 tw:text-center" role="alert">
                <div class="tw:flex tw:justify-center tw:mb-3">
                  <div class="tw-avatar tw-avatar-lg tw-avatar-red"><i class="fa-regular fa-cloud-exclamation"></i></div>
                </div>
                <h3 class="tw-h5 tw:text-danger tw:mb-1">Couldn't load bookings</h3>
                <p class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mb-4">Something went wrong while refreshing. Your data is safe — try again.</p>
                <button type="button" class="tw-btn tw-btn-primary tw-btn-sm" data-action="click->tours-hub#bkRetry">
                  <i class="fa-regular fa-rotate-right tw:mr-1"></i> Retry
                </button>
              </div>
            </div>
            <!-- True empty -->
            <div class="tw:hidden" data-tours-hub-target="bkEmpty">
              <div class="tw:px-6 tw:py-12 tw:text-center">
                <div class="tw:flex tw:justify-center tw:mb-3">
                  <div class="tw-avatar tw-avatar-lg tw-avatar-primary"><i class="fa-regular fa-calendar"></i></div>
                </div>
                <h3 class="tw-h5 tw:mb-1">No bookings yet</h3>
                <p class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mb-0 tw:max-w-md tw:mx-auto">
                  When parents book — or you invite leads and book on their behalf — they'll
                  appear here. Share the public link to start filling slots.
                </p>
              </div>
            </div>
            <!-- Filtered empty -->
            <div class="tw:hidden" data-tours-hub-target="bkFilteredEmpty">
              <div class="tw:px-6 tw:py-10 tw:text-center">
                <h3 class="tw-h5 tw:text-muted tw:mb-1">No bookings match</h3>
                <p class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mb-4">Try different filters, or clear them to see every booking.</p>
                <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm" data-action="click->tours-hub#bkClearFilters">Clear filters</button>
              </div>
            </div>
            <!-- Table -->
            <div data-tours-hub-target="bkTableWrap">
              <div class="tw-data-table-body tw-table-responsive">
                <table class="tw-table tw-table-hover">
                  <thead class="tw:bg-table-header">
                    <tr>
                      <th scope="col">Attendee</th>
                      <th scope="col">Tour</th>
                      <th scope="col">Target group</th>
                      <th scope="col">Date</th>
                      <th scope="col">Stage</th>
                      <th scope="col">Status</th>
                      <th scope="col">Source</th>
                      <th scope="col">Registered</th>
                      <th scope="col"><span class="tw:sr-only">Actions</span></th>
                    </tr>
                  </thead>
                  <tbody data-tours-hub-target="bkTbody"></tbody>
                </table>
              </div>
            </div>
            <div class="tw-data-table-footer tw:px-4">
              <span class="tw-data-table-results" data-tours-hub-target="bkResults" aria-live="polite">Showing 9 of 9 registrations</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <!-- ==================== Type drill-in drawer ==================== -->
  <div data-controller="drawer" data-tours-hub-target="typeDrawer">
    <div class="tw-drawer-backdrop" data-drawer-target="backdrop" data-action="click->drawer#close"></div>
    <div class="tw-drawer tw-drawer-lg" data-drawer-target="panel" role="dialog" aria-modal="true" aria-label="Tour details">
      <div class="tw-drawer-header">
        <h2 class="tw-drawer-title" data-tours-hub-target="typeDrawerTitle">Tour</h2>
        <div class="tw:flex tw:items-center tw:gap-1 tw:shrink-0">
          <span data-tours-hub-target="typeDrawerMenu"></span>
          <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" aria-label="Close" data-action="click->drawer#close">
            <i class="fa-regular fa-xmark"></i>
          </button>
        </div>
      </div>
      <div class="tw-drawer-body" data-tours-hub-target="typeDrawerBody"></div>
      <div class="tw-drawer-footer" data-tours-hub-target="typeDrawerFooter"></div>
    </div>
  </div>
  <!-- ==================== Booking detail drawer ==================== -->
  <div data-controller="drawer" data-tours-hub-target="bookingDrawer">
    <div class="tw-drawer-backdrop" data-drawer-target="backdrop" data-action="click->drawer#close"></div>
    <div class="tw-drawer" data-drawer-target="panel" role="dialog" aria-modal="true" aria-label="Booking details">
      <div class="tw-drawer-header">
        <h2 class="tw-drawer-title">Booking</h2>
        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" aria-label="Close" data-action="click->drawer#close">
          <i class="fa-regular fa-xmark"></i>
        </button>
      </div>
      <div class="tw-drawer-body" data-tours-hub-target="bookingDrawerBody"></div>
    </div>
  </div>
  <!-- ==================== 3a · Invite leads (pipeline filter) ==================== -->
  <div data-controller="popup" data-hub-popup="invite">
    <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
    <div class="tw-popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="hub-invite-title">
      <div class="tw-popup-header">
        <h2 class="tw-popup-header-title" id="hub-invite-title" data-tours-hub-target="inviteTypeName">Invite leads</h2>
        <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->popup#close"><i class="fa-regular fa-xmark"></i></button>
      </div>
      <div class="tw-popup-body">
        <div class="tw-form-group tw:mb-4">
          <label class="tw-form-label" for="hub-invite-pipeline">Who to invite</label>
          <select id="hub-invite-pipeline" class="tw-form-select" data-tours-hub-target="invitePipeline"></select>
          <p class="tw-form-text">We'll only invite parents whose lead matches this filter.</p>
        </div>
        <!-- Invitation email — the "Invitation to register" default from the Emails step -->
        <div class="tw-form-group tw:mb-0">
          <div class="tw:flex tw:items-center tw:justify-between tw:gap-2 tw:mb-1.5">
            <span class="tw-form-label tw:mb-0">Invitation email</span>
            <span class="tw:flex tw:items-center tw:gap-2">
              <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm">Using default</span>
              <a class="tw:text-body-xs tw:leading-body-xs tw:text-blue-600 tw:hover:underline" data-tours-hub-target="inviteEditLink" href="/lookbook/preview/projects/tours/new_tour?mode=edit">Edit in Emails</a>
            </span>
          </div>
          <div class="tw-card tw-card-flat">
            <div class="tw-card-body tw:p-3 tw:space-y-2">
              <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0"><span class="tw:font-semibold tw:text-neutral-700">From</span> Sunninghill Academy Admissions · <span class="tw:font-semibold tw:text-neutral-700">Reply-to</span> admissions@sunninghill.sch.uk</p>
              <p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:mb-0" data-tours-hub-target="inviteSubject">You're invited to book</p>
              <div class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:pt-2 tw:border-t tw:border-neutral-translucent-200 tw:space-y-2">
                <p class="tw:mb-0">Dear <span class="tw-merge-token tw-merge-token-sm">CONTACT_FIRST_NAME</span>,</p>
                <p class="tw:mb-0">We'd like to invite you to book for <span class="tw-merge-token tw-merge-token-sm">ENQUIRY_CHILD_FIRST_NAME</span>. Choose a time that suits you here: <span class="tw-merge-token tw-merge-token-sm">BOOKING_LINK</span></p>
                <p class="tw:mb-0">Kind regards,<br>
                  Admissions Team</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tw-popup-footer">
        <button type="button" class="tw-btn tw-btn-secondary" data-action="click->popup#close">Cancel</button>
        <button type="button" class="tw-btn tw-btn-primary" data-action="click->tours-hub#sendInvites">
          <i class="fa-regular fa-envelope tw:mr-1"></i> Send invite
        </button>
      </div>
    </div>
  </div>
  <!-- ==================== Embed code modal ==================== -->
  <div data-controller="popup" data-hub-popup="embed">
    <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
    <div class="tw-popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="hub-embed-title">
      <div class="tw-popup-header">
        <h2 class="tw-popup-header-title" id="hub-embed-title" data-tours-hub-target="embedTitle">Embed code</h2>
        <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->popup#close"><i class="fa-regular fa-xmark"></i></button>
      </div>
      <div class="tw-popup-body">
        <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-3">Paste this snippet into your school website to embed the booking form. Bookings sync straight back to Admissions+.</p>
        <div class="tw-form-group tw:mb-3">
          <label class="tw-form-label" for="hub-embed-code">Embed code</label>
          <textarea id="hub-embed-code" class="tw-form-control" rows="4" readonly data-tours-hub-target="embedCode"></textarea>
        </div>
        <div class="tw-form-group tw:mb-0">
          <label class="tw-form-label" for="hub-embed-link">Public booking link</label>
          <div class="tw:flex tw:gap-2" data-controller="clipboard">
            <input type="text" id="hub-embed-link" class="tw-form-control" readonly value="" data-tours-hub-target="embedLink" data-clipboard-target="source">
            <button type="button" class="tw-btn tw-btn-secondary tw:shrink-0"
                    data-action="click->clipboard#copySource" aria-label="Copy public booking link">
              <i class="fa-regular fa-copy tw:mr-1" data-clipboard-target="icon" aria-hidden="true"></i> Copy link
            </button>
            <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span>
          </div>
        </div>
      </div>
      <div class="tw-popup-footer" data-controller="clipboard" data-clipboard-source-value="#hub-embed-code">
        <button type="button" class="tw-btn tw-btn-secondary" data-action="click->popup#close">Close</button>
        <button type="button" class="tw-btn tw-btn-primary"
                data-action="click->clipboard#copySource" aria-label="Copy website embed code">
          <i class="fa-regular fa-copy tw:mr-1" data-clipboard-target="icon" aria-hidden="true"></i> Copy embed code
        </button>
        <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span>
      </div>
    </div>
  </div>
  <!-- ==================== Manage categories modal ==================== -->
  <div data-controller="popup" data-hub-popup="categories">
    <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
    <div class="tw-popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="hub-categories-title">
      <div class="tw-popup-header">
        <div>
          <h2 class="tw-popup-header-title" id="hub-categories-title">Intakes</h2>
          <p class="tw-popup-header-subtitle">One school-level list, shared by Tours and Events — the same list Events sets with “Apply for”.</p>
        </div>
        <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->popup#close"><i class="fa-regular fa-xmark"></i></button>
      </div>
      <div class="tw-popup-body">
        <!-- Show what an intake is, rather than describing it: this mirrors the
             first step parents actually see on the booking link. -->
        <div class="tw:rounded-lg tw:bg-neutral-translucent-100 tw:p-3 tw:mb-4">
          <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-2">
            <i class="fa-regular fa-eye tw:mr-1" aria-hidden="true"></i>
            On your booking link, parents choose what they're applying for — then see the tours and events for that intake.
          </p>
          <div class="tw:grid tw:grid-cols-2 tw:gap-2" data-tours-hub-target="catPreview"></div>
        </div>
        <h3 class="tw-h6 tw:text-muted tw:uppercase tw:mb-1">Your intakes</h3>
        <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-2">Click a name to rename it — the change applies everywhere it's used.</p>
        <div data-tours-hub-target="catList"></div>
        <div class="tw:border-t tw:border-neutral-translucent-200 tw:pt-3 tw:mt-3">
          <label class="tw-form-label tw-form-label-sm" for="hub-cat-new">Add an intake</label>
          <div class="tw:flex tw:gap-2">
            <input type="text" id="hub-cat-new" class="tw-form-control tw-form-control-sm" placeholder="e.g. Prep School"
                   data-tours-hub-target="catNewInput" data-action="keydown->tours-hub#catNewKeydown">
            <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm tw:shrink-0" data-action="click->tours-hub#addCategory">
              <i class="fa-solid fa-plus tw:mr-1"></i> Add
            </button>
          </div>
          <p class="tw-form-text tw:mt-2 tw:mb-0">A tour or event can be tagged to several of these — it then appears under each one for parents.</p>
        </div>
      </div>
      <div class="tw-popup-footer">
        <button type="button" class="tw-btn tw-btn-primary" data-action="click->popup#close">Done</button>
      </div>
    </div>
  </div>
  <!-- ==================== 3b · Book on behalf ==================== -->
  <div data-controller="popup" data-hub-popup="bob">
    <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
    <div class="tw-popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="hub-bob-title">
      <div class="tw-popup-header">
        <div>
          <h2 class="tw-popup-header-title" id="hub-bob-title">Book on behalf</h2>
          <p class="tw-popup-header-subtitle" data-tours-hub-target="bobTypeName">Individual tours</p>
        </div>
        <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->popup#close"><i class="fa-regular fa-xmark"></i></button>
      </div>
      <div data-tours-hub-target="bobStepDate">
        <div class="tw-popup-body">
          <div class="tw-inline-notification tw-inline-notification-compact tw-inline-notification-highlight tw:mb-3" role="note">
            <div class="tw-inline-notification-icon"><i class="fa-regular fa-phone"></i></div>
            <div class="tw-inline-notification-content">
              <p class="tw-inline-notification-message tw:mb-0">
                Phone booking — the family gets the same confirmation email as an online booking. Source is recorded as Phone.
              </p>
            </div>
          </div>
          <h3 class="tw-h6 tw:text-muted tw:uppercase tw:mb-2">Select a date</h3>
          <div data-tours-hub-target="bobDates"></div>
        </div>
      </div>
      <div class="tw:hidden" data-tours-hub-target="bobStepTime">
        <div class="tw-popup-body">
          <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw:mb-3" data-action="click->tours-hub#bobBackToDate">
            <i class="fa-regular fa-arrow-left tw:mr-1"></i> Back to dates
          </button>
          <h3 class="tw-h6 tw:text-muted tw:uppercase tw:mb-2">Select a time</h3>
          <div data-tours-hub-target="bobTimes"></div>
        </div>
      </div>
      <div class="tw:hidden" data-tours-hub-target="bobStepForm">
        <div class="tw-popup-body">
          <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw:mb-3" data-action="click->tours-hub#bobBackToTime">
            <i class="fa-regular fa-arrow-left tw:mr-1"></i> Back to times
          </button>
          <div class="tw-inline-notification tw-inline-notification-compact tw-inline-notification-highlight tw:mb-3" role="note">
            <div class="tw-inline-notification-icon"><i class="fa-regular fa-calendar-check"></i></div>
            <div class="tw-inline-notification-content">
              <p class="tw-inline-notification-message tw:mb-0" data-tours-hub-target="bobSummary"></p>
            </div>
          </div>
          <div class="tw-form-row tw:mb-3">
            <div class="tw-form-group tw-form-group-col-6">
              <label class="tw-form-label tw-form-label-required" for="hub-bob-parent">Parent name</label>
              <input type="text" id="hub-bob-parent" class="tw-form-control" placeholder="e.g. Helen Brooks" aria-required="true" data-tours-hub-target="bobParent">
            </div>
            <div class="tw-form-group tw-form-group-col-6">
              <label class="tw-form-label" for="hub-bob-email">Parent email</label>
              <input type="email" id="hub-bob-email" class="tw-form-control" placeholder="helen.brooks@example.com" data-tours-hub-target="bobEmail">
            </div>
          </div>
          <div class="tw-form-group tw:mb-3">
            <label class="tw-form-label" for="hub-bob-notes">Notes</label>
            <textarea id="hub-bob-notes" class="tw-form-control" rows="2" placeholder="e.g. Booked over the phone — asked about wraparound care" data-tours-hub-target="bobNotes"></textarea>
          </div>
          <div class="tw-form-check tw-form-switch">
            <input class="tw-form-check-input" type="checkbox" role="switch" id="hub-bob-confirm" checked data-tours-hub-target="bobConfirmToggle">
            <label class="tw-form-check-label" for="hub-bob-confirm">Send confirmation email</label>
          </div>
        </div>
        <div class="tw-popup-footer">
          <button type="button" class="tw-btn tw-btn-secondary" data-action="click->popup#close">Cancel</button>
          <button type="button" class="tw-btn tw-btn-primary" data-action="click->tours-hub#bobConfirm">Book this session</button>
        </div>
      </div>
      <div class="tw:hidden" data-tours-hub-target="bobStepDone">
        <div class="tw-popup-body tw:text-center tw:py-8">
          <div class="tw:flex tw:justify-center tw:mb-3">
            <div class="tw-avatar tw-avatar-lg tw-avatar-green"><i class="fa-regular fa-circle-check"></i></div>
          </div>
          <h3 class="tw-h5 tw:mb-1">Booking confirmed</h3>
          <p class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mb-0" data-tours-hub-target="bobDoneSummary"></p>
        </div>
        <div class="tw-popup-footer">
          <button type="button" class="tw-btn tw-btn-primary" data-action="click->tours-hub#bobDone">Done</button>
        </div>
      </div>
    </div>
  </div>
  <!-- ==================== 2b · Sync to external calendar (feed model) ==================== -->
  <div data-controller="popup" data-hub-popup="sync">
    <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
    <div class="tw-popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="hub-sync-title">
      <div class="tw-popup-header">
        <h2 class="tw-popup-header-title" id="hub-sync-title">Sync to your external calendar</h2>
        <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->popup#close"><i class="fa-regular fa-xmark"></i></button>
      </div>
      <div class="tw-popup-body">
        <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-4">
          Subscribe to a live feed of every confirmed booking. New bookings, reschedules
          and cancellations appear automatically — no manual updates needed.
        </p>
        <div class="tw-form-group tw:mb-4">
          <label class="tw-form-label" for="hub-sync-feed">Calendar feed URL</label>
          <div class="tw:flex tw:gap-2" data-controller="clipboard">
            <input type="text" id="hub-sync-feed" class="tw-form-control" readonly value="" data-tours-hub-target="syncFeedUrl" data-clipboard-target="source">
            <button type="button" class="tw-btn tw-btn-secondary tw:shrink-0"
                    data-action="click->clipboard#copySource" aria-label="Copy calendar feed URL">
              <i class="fa-regular fa-copy tw:mr-1" data-clipboard-target="icon" aria-hidden="true"></i> Copy
            </button>
            <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span>
          </div>
        </div>
        <div class="tw:grid tw:grid-cols-2 tw:gap-2 tw:mb-4">
          <button type="button" class="tw-btn tw-btn-secondary tw-btn-multiline tw:py-3" data-action="click->tours-hub#addToGoogle">
            <span class="tw:flex tw:flex-col tw:items-center tw:gap-1">
              <i class="fa-regular fa-calendar" aria-hidden="true"></i>
              <span>Add to Google</span>
            </span>
          </button>
          <button type="button" class="tw-btn tw-btn-secondary tw-btn-multiline tw:py-3" data-action="click->tours-hub#addToOutlook">
            <span class="tw:flex tw:flex-col tw:items-center tw:gap-1">
              <i class="fa-regular fa-calendar" aria-hidden="true"></i>
              <span>Add to Outlook</span>
            </span>
          </button>
        </div>
        <div class="tw-card tw-card-flat tw-card-sm">
          <div class="tw-card-body">
            <p class="tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:mb-1">Manual setup</p>
            <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mb-1"><strong>Google:</strong> Settings → Add calendar → From URL → paste the feed.</p>
            <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mb-0"><strong>Outlook:</strong> Add calendar → Subscribe from web → paste the feed.</p>
          </div>
        </div>
      </div>
      <div class="tw-popup-footer">
        <button type="button" class="tw-btn tw-btn-primary" data-action="click->popup#close">Close</button>
      </div>
    </div>
  </div>
  <!-- ==================== Close tour confirm ==================== -->
  <div data-controller="popup" data-hub-popup="close">
    <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
    <div class="tw-popup-panel tw-popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="hub-close-title">
      <div class="tw-popup-header">
        <h2 class="tw-popup-header-title" id="hub-close-title">Close this tour?</h2>
        <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->popup#close"><i class="fa-regular fa-xmark"></i></button>
      </div>
      <div class="tw-popup-body">
        <p class="tw:text-body-s tw:leading-body-s tw:mb-2">
          <strong data-tours-hub-target="closeTypeName">Individual tours</strong> will stop taking new bookings.
        </p>
        <p class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mb-0">
          The public page stays up and shows <em>"Bookings are currently closed"</em>. Existing bookings are kept and you can re-open at any time.
        </p>
      </div>
      <div class="tw-popup-footer">
        <button type="button" class="tw-btn tw-btn-tertiary" data-action="click->popup#close">Keep open</button>
        <button type="button" class="tw-btn tw-btn-danger" data-action="click->tours-hub#confirmClose">Close tour</button>
      </div>
    </div>
  </div>
  <!-- ==================== Delete type confirm ==================== -->
  <div data-controller="popup" data-hub-popup="delete">
    <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
    <div class="tw-popup-panel tw-popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="hub-delete-title">
      <div class="tw-popup-header">
        <h2 class="tw-popup-header-title" id="hub-delete-title">Delete "<span data-tours-hub-target="deleteTypeName">Individual tours</span>"?</h2>
        <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->popup#close"><i class="fa-regular fa-xmark"></i></button>
      </div>
      <div class="tw-popup-body">
        <p class="tw:text-body-s tw:leading-body-s tw:mb-3" data-tours-hub-target="deleteBookingsNote"></p>
        <div class="tw-form-check">
          <input class="tw-form-check-input" type="checkbox" id="hub-delete-notify" checked data-tours-hub-target="deleteNotify">
          <label class="tw-form-check-label" for="hub-delete-notify" data-tours-hub-target="deleteNotifyLabel">Notify the attendees that their booking is cancelled</label>
        </div>
      </div>
      <div class="tw-popup-footer">
        <button type="button" class="tw-btn tw-btn-secondary" data-action="click->popup#close">Keep type</button>
        <button type="button" class="tw-btn tw-btn-danger" data-action="click->tours-hub#confirmDelete">Delete & notify</button>
      </div>
    </div>
  </div>
  <!-- ==================== Reschedule ==================== -->
  <div data-controller="popup" data-hub-popup="reschedule">
    <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
    <div class="tw-popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="hub-res-title">
      <div class="tw-popup-header">
        <div>
          <h2 class="tw-popup-header-title" id="hub-res-title">Reschedule booking</h2>
          <p class="tw-popup-header-subtitle" data-tours-hub-target="resTitle"></p>
        </div>
        <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->popup#close"><i class="fa-regular fa-xmark"></i></button>
      </div>
      <div class="tw-popup-body">
        <p class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mb-3">
          Pick a new session — the old place reopens for other families straight away.
        </p>
        <div data-tours-hub-target="resOptions"></div>
      </div>
      <div class="tw-popup-footer">
        <button type="button" class="tw-btn tw-btn-secondary" data-action="click->popup#close">Cancel</button>
      </div>
    </div>
  </div>
  <!-- ==================== Cancel booking confirm ==================== -->
  <div data-controller="popup" data-hub-popup="cancel">
    <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
    <div class="tw-popup-panel tw-popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="hub-cancel-title">
      <div class="tw-popup-header">
        <div class="tw:flex tw:items-center tw:gap-2">
          <i class="fa-regular fa-triangle-exclamation tw:text-danger" aria-hidden="true"></i>
          <h2 class="tw-popup-header-title" id="hub-cancel-title">Cancel this booking?</h2>
        </div>
        <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->popup#close"><i class="fa-regular fa-xmark"></i></button>
      </div>
      <div class="tw-popup-body">
        <p class="tw:text-body-s tw:leading-body-s tw:mb-0" data-tours-hub-target="cancelBody"></p>
      </div>
      <div class="tw-popup-footer">
        <button type="button" class="tw-btn tw-btn-primary" data-action="click->popup#close">Keep booking</button>
        <button type="button" class="tw-btn tw-btn-danger" data-action="click->tours-hub#confirmCancelBooking">Cancel booking</button>
      </div>
    </div>
  </div>
  <!-- ==================== Message parent ==================== -->
  <div data-controller="popup" data-hub-popup="message">
    <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
    <div class="tw-popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="hub-msg-title">
      <div class="tw-popup-header">
        <div>
          <h2 class="tw-popup-header-title" id="hub-msg-title">Message parent</h2>
          <p class="tw-popup-header-subtitle" data-tours-hub-target="msgRecipient"></p>
        </div>
        <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->popup#close"><i class="fa-regular fa-xmark"></i></button>
      </div>
      <div class="tw-popup-body">
        <div class="tw-form-group tw:mb-3">
          <label class="tw-form-label" for="hub-msg-subject">Subject</label>
          <input type="text" id="hub-msg-subject" class="tw-form-control" value="About your upcoming visit">
        </div>
        <div class="tw-form-group tw:mb-0">
          <span class="tw-form-label">Message</span>
          <div class="tw-rte tw-rte-sm">
            <div class="tw-rte-toolbar" role="toolbar" aria-label="Formatting options">
              <div class="tw-rte-toolbar-group" role="group" aria-label="Text formatting">
                <button class="tw-rte-toolbar-btn" type="button" aria-label="Bold" aria-pressed="false"><i class="fa-regular fa-bold"></i></button>
                <button class="tw-rte-toolbar-btn" type="button" aria-label="Italic" aria-pressed="false"><i class="fa-regular fa-italic"></i></button>
                <button class="tw-rte-toolbar-btn" type="button" aria-label="Insert link"><i class="fa-regular fa-link"></i></button>
              </div>
            </div>
            <div class="tw-rte-content" contenteditable="true" role="textbox" aria-multiline="true" aria-label="Message body" data-placeholder="Write your message…"></div>
          </div>
        </div>
      </div>
      <div class="tw-popup-footer">
        <button type="button" class="tw-btn tw-btn-secondary" data-action="click->popup#close">Cancel</button>
        <button type="button" class="tw-btn tw-btn-primary" data-action="click->tours-hub#sendMessage">
          <i class="fa-regular fa-paper-plane tw:mr-1"></i> Send
        </button>
      </div>
    </div>
  </div>
  <!-- ==================== 2a · Bulk schedule ==================== -->
  <div data-controller="popup" data-hub-popup="bulk">
    <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
    <div class="tw-popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="hub-bulk-title">
      <div class="tw-popup-header">
        <h2 class="tw-popup-header-title" id="hub-bulk-title">Bulk schedule sessions</h2>
        <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->popup#close"><i class="fa-regular fa-xmark"></i></button>
      </div>
      <div class="tw-popup-body">
        <div class="tw-form-group tw:mb-3">
          <label class="tw-form-label tw-form-label-required" for="hub-bulk-type">Tour</label>
          <select id="hub-bulk-type" class="tw-form-select" aria-required="true"
                  data-tours-hub-target="bulkType" data-action="change->tours-hub#bulkChanged"></select>
        </div>
        <div class="tw-form-group tw:mb-3">
          <span class="tw-form-label">Repeat on</span>
          <div class="tw:flex tw:flex-wrap tw:gap-1.5" role="group" aria-label="Repeat on days">
            <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" aria-pressed="true"
                      data-day="1" data-tours-hub-target="bulkDay"
                      data-action="click->tours-hub#bulkDayToggle">Mon</button>
            <button type="button" class="tw-btn tw-btn-sm tw-btn-secondary" aria-pressed="false"
                      data-day="2" data-tours-hub-target="bulkDay"
                      data-action="click->tours-hub#bulkDayToggle">Tue</button>
            <button type="button" class="tw-btn tw-btn-sm tw-btn-primary" aria-pressed="true"
                      data-day="3" data-tours-hub-target="bulkDay"
                      data-action="click->tours-hub#bulkDayToggle">Wed</button>
            <button type="button" class="tw-btn tw-btn-sm tw-btn-secondary" aria-pressed="false"
                      data-day="4" data-tours-hub-target="bulkDay"
                      data-action="click->tours-hub#bulkDayToggle">Thu</button>
            <button type="button" class="tw-btn tw-btn-sm tw-btn-secondary" aria-pressed="false"
                      data-day="5" data-tours-hub-target="bulkDay"
                      data-action="click->tours-hub#bulkDayToggle">Fri</button>
          </div>
        </div>
        <div class="tw-form-row tw:mb-3">
          <div class="tw-form-group tw-form-group-col-4">
            <label class="tw-form-label" for="hub-bulk-start">Start</label>
            <input type="time" id="hub-bulk-start" class="tw-form-control" value="10:00"
                   data-tours-hub-target="bulkStart" data-action="change->tours-hub#bulkChanged">
          </div>
          <div class="tw-form-group tw-form-group-col-4">
            <label class="tw-form-label" for="hub-bulk-end">End</label>
            <input type="time" id="hub-bulk-end" class="tw-form-control" value="11:00"
                   data-tours-hub-target="bulkEnd" data-action="change->tours-hub#bulkChanged">
          </div>
          <div class="tw-form-group tw-form-group-col-4">
            <label class="tw-form-label" for="hub-bulk-cap">Capacity</label>
            <input type="number" id="hub-bulk-cap" min="1" class="tw-form-control" value="2"
                   data-tours-hub-target="bulkCapacity" data-action="change->tours-hub#bulkChanged">
          </div>
        </div>
        <div class="tw-form-row tw:mb-3">
          <div class="tw-form-group tw-form-group-col-6">
            <label for="hub-bulk-from" class="tw-form-label">
              From date
            </label>
            <div class="tw-date-picker "
     data-controller="date-picker"
     data-action="keydown->date-picker#keydown date-picker:change->tours-hub#bulkChanged"
              data-date-picker-teleport-value="true"
              >
              <div class="tw-input-group tw-has-icon-end">
                <input type="text"
           id="hub-bulk-from"
           class="tw-form-control"
           placeholder="dd/mm/yyyy"
           autocomplete="off"
           role="combobox"
           aria-expanded="false"
           
           
           
           data-value="2026-05-11"
           
           data-date-picker-target="input"
           data-tours-hub-target="bulkFrom" 
           data-action="click->date-picker#toggle input->date-picker#typed">
                <i class="tw-input-group-icon tw-input-group-icon-end tw-input-group-icon-clickable fa-regular fa-calendar"
         data-action="click->date-picker#toggle"
                  aria-hidden="true"></i>
              </div>
              <div class="tw-date-picker-panel" data-date-picker-target="panel" role="dialog"
       aria-label="From date">
                <div class="tw-date-picker-header">
                  <button type="button" class="tw-date-picker-nav" aria-label="Previous month"
              data-action="click->date-picker#prevMonth">
                    <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
                  </button>
                  <span class="tw-date-picker-title" data-date-picker-target="title" aria-live="polite"></span>
                  <button type="button" class="tw-date-picker-nav" aria-label="Next month"
              data-action="click->date-picker#nextMonth">
                    <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
                  </button>
                </div>
                <div class="tw-date-picker-grid" role="grid" data-date-picker-target="grid"></div>
                <div class="tw-date-picker-footer">
                  <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm"
              data-action="click->date-picker#today">Today</button>
                  <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm"
              data-action="click->date-picker#clear">Clear</button>
                </div>
              </div>
            </div>
          </div>
          <div class="tw-form-group tw-form-group-col-6">
            <label for="hub-bulk-to" class="tw-form-label">
              To date
            </label>
            <div class="tw-date-picker "
     data-controller="date-picker"
     data-action="keydown->date-picker#keydown date-picker:change->tours-hub#bulkChanged"
              data-date-picker-teleport-value="true"
              >
              <div class="tw-input-group tw-has-icon-end">
                <input type="text"
           id="hub-bulk-to"
           class="tw-form-control"
           placeholder="dd/mm/yyyy"
           autocomplete="off"
           role="combobox"
           aria-expanded="false"
           
           
           
           data-value="2026-07-17"
           
           data-date-picker-target="input"
           data-tours-hub-target="bulkTo" 
           data-action="click->date-picker#toggle input->date-picker#typed">
                <i class="tw-input-group-icon tw-input-group-icon-end tw-input-group-icon-clickable fa-regular fa-calendar"
         data-action="click->date-picker#toggle"
                  aria-hidden="true"></i>
              </div>
              <div class="tw-date-picker-panel" data-date-picker-target="panel" role="dialog"
       aria-label="To date">
                <div class="tw-date-picker-header">
                  <button type="button" class="tw-date-picker-nav" aria-label="Previous month"
              data-action="click->date-picker#prevMonth">
                    <i class="fa-solid fa-chevron-left" aria-hidden="true"></i>
                  </button>
                  <span class="tw-date-picker-title" data-date-picker-target="title" aria-live="polite"></span>
                  <button type="button" class="tw-date-picker-nav" aria-label="Next month"
              data-action="click->date-picker#nextMonth">
                    <i class="fa-solid fa-chevron-right" aria-hidden="true"></i>
                  </button>
                </div>
                <div class="tw-date-picker-grid" role="grid" data-date-picker-target="grid"></div>
                <div class="tw-date-picker-footer">
                  <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm"
              data-action="click->date-picker#today">Today</button>
                  <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm"
              data-action="click->date-picker#clear">Clear</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tw-inline-notification tw-inline-notification-compact tw-inline-notification-highlight" role="status" aria-live="polite">
          <div class="tw-inline-notification-icon"><i class="fa-regular fa-calendar-plus"></i></div>
          <div class="tw-inline-notification-content">
            <p class="tw-inline-notification-message tw:mb-0" data-tours-hub-target="bulkPreview"></p>
          </div>
        </div>
        <div class="tw:hidden tw:mt-2" data-tours-hub-target="bulkFeedback">
          <p class="tw-invalid-feedback">Check the details — you need a type, at least one day, times, capacity and a valid date range.</p>
        </div>
      </div>
      <div class="tw-popup-footer">
        <button type="button" class="tw-btn tw-btn-secondary" data-action="click->popup#close">Cancel</button>
        <button type="button" class="tw-btn tw-btn-primary" data-tours-hub-target="bulkCta" data-action="click->tours-hub#confirmBulk">Create sessions</button>
      </div>
    </div>
  </div>
  <!-- ==================== Day drill-in ==================== -->
  <div data-controller="popup" data-hub-popup="day">
    <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
    <div class="tw-popup-panel tw-popup-lg" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="hub-day-title">
      <div class="tw-popup-header">
        <h2 class="tw-popup-header-title" id="hub-day-title" data-tours-hub-target="dayPopupTitle">Day</h2>
        <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->popup#close"><i class="fa-regular fa-xmark"></i></button>
      </div>
      <div class="tw-popup-body" data-tours-hub-target="dayPopupBody"></div>
      <div class="tw-popup-footer">
        <button type="button" class="tw-btn tw-btn-primary" data-action="click->popup#close">Done</button>
      </div>
    </div>
  </div>
  <!-- Toast region -->
  <div data-controller="toast">
    <div class="tw-toast-container" data-tours-hub-target="toastContainer"></div>
  </div>
  <!-- Parent "Preview booking page" modal — opened from a tour's ⋮ menu -->
  <div data-controller="tours-preview" data-tours-preview-target="root" class="tw:hidden tw:fixed tw:inset-0 tw:z-[1100]">
    <div class="tw:absolute tw:inset-0 tw:bg-neutral-900/50" aria-hidden="true"></div>
    <div class="tw:absolute tw:inset-0 tw:overflow-y-auto" data-action="click->tours-preview#backdropClose">
      <div class="tw:max-w-[760px] tw:mx-auto tw:my-8 tw:px-4" data-tours-preview-target="modalWrap">
        <div class="tw-card tw-card-elevated tw:flex tw:flex-col tw:overflow-hidden tw:max-h-[85vh]" role="dialog" aria-modal="true" aria-label="Preview booking page">
          <!-- Modal header (staff chrome) -->
          <div class="tw-card-header tw:shrink-0 tw:flex tw:items-center tw:justify-between tw:gap-3">
            <span class="tw:flex tw:items-center tw:gap-2 tw:min-w-0">
              <i class="fa-regular fa-eye tw:text-neutral-400" aria-hidden="true"></i>
              <span class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:truncate">Preview booking page</span>
              <span class="tw-badge tw-badge-primary-subtle tw-badge-sm tw:shrink-0">Exactly what parents see</span>
            </span>
            <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" aria-label="Close preview"
                  data-preview-close data-action="click->tours-preview#close">
              <i class="fa-regular fa-xmark"></i>
            </button>
          </div>
          <!-- Staff "Previewing as" toolbar — only shown for multi-target-group tours -->
          <div class="tw:hidden tw:shrink-0 tw:flex tw:items-center tw:gap-2 tw:px-4 tw:py-2 tw:bg-neutral-100 tw:border-b tw:border-neutral-translucent-200"
             data-tours-preview-target="previewAsBar">
            <i class="fa-regular fa-user-gear tw:text-neutral-600" aria-hidden="true"></i>
            <label class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mb-0" for="pv-preview-as">Previewing as a parent of</label>
            <div class="tw:w-44">
              <select id="pv-preview-as" class="tw-form-select tw-form-select-sm"
                    data-tours-preview-target="previewAsSelect" data-action="change->tours-preview#changePreviewGroup"></select>
            </div>
          </div>
          <!-- Walkthrough progress (staff chrome) — pinned above the scrolling body.
             Tinted band groups it with the "Previewing as" bar as the staff zone,
             separated from the parent-preview content below by the divider. -->
          <div class="tw:shrink-0 tw:px-4 tw:pt-3 tw:pb-2 tw:border-b tw:border-neutral-translucent-200">
            <div class="tw:flex tw:gap-1.5 tw:mb-2" data-tours-preview-target="wtProgress" aria-hidden="true"></div>
            <p class="tw:flex tw:items-center tw:gap-2 tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mb-0">
              <i class="fa-regular fa-eye tw:shrink-0" aria-hidden="true"></i>
              <span data-tours-preview-target="wtStepLabel">Step 1 of 5 · Choose intake</span>
            </p>
          </div>
          <!-- Parent content is fully interactive so the preview reflects real
             selections: picking an intake / session / time and typing details
             all flow through to the summary and confirmation. The footer Back/Next
             remains a staff convenience for stepping without clicking. -->
          <div class="tw-card-body tw:flex-1 tw:min-h-0 tw:overflow-y-auto">
            <div>
              <!-- ========== Choose an intake ========== -->
              <div data-tours-preview-target="categoryWrap">
                <div class="tw:flex tw:items-center tw:gap-3 tw:mb-1">
                  <span class="tw-avatar tw-avatar-lg tw-avatar-square tw-avatar-primary tw:shrink-0" aria-hidden="true">SA</span>
                  <div class="tw:min-w-0">
                    <p class="tw-h6 tw:text-primary-700 tw:uppercase tw:mb-0">Sunninghill Academy</p>
                    <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mb-0">Book a visit</p>
                  </div>
                </div>
                <h2 class="tw-h2 tw:mt-3 tw:mb-1">What would you like to explore?</h2>
                <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-4">Choose the area you're interested in and we'll only show you the relevant tours, taster days and events.</p>
                <div class="tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:gap-3" data-tours-preview-target="categoryList"></div>
                <p class="tw:text-center tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mt-4 tw:mb-0">
                  No account required. We'll email a confirmation — and text a reminder if you add a mobile.
                </p>
              </div>
              <!-- ========== Choose a session (tours + events in the intake) ========== -->
              <div class="tw:hidden" data-tours-preview-target="discoveryWrap">
                <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw:mb-3" data-action="click->tours-preview#backToCategories">
                  <i class="fa-regular fa-arrow-left tw:mr-1"></i> Change area
                </button>
                <p class="tw-h6 tw:text-primary-700 tw:uppercase tw:mb-0.5">Sunninghill Academy</p>
                <h2 class="tw-h2 tw:mb-1" data-tours-preview-target="discoveryHeading">Sixth Form tours and events</h2>
                <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-4" data-tours-preview-target="discoverySub">3 options available. Pick one to choose a date and time.</p>
                <div data-tours-preview-target="discoveryList"></div>
                <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mt-1 tw:mb-0" data-tours-preview-target="discoveryFoot">Showing Sixth Form only.</p>
              </div>
              <!-- ========== Date & time flow — two-pane scheduler ========== -->
              <div class="tw:hidden" data-tours-preview-target="flowWrap">
                <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw:mb-4" data-action="click->tours-preview#backToDiscovery">
                  <i class="fa-regular fa-arrow-left tw:mr-1"></i> Change session
                </button>
                <div class="tw:grid tw:gap-5 tw:md:grid-cols-3">
                  <!-- Left — meeting info + mini month calendar -->
                  <div class="tw:md:col-span-1 tw:bg-neutral-translucent-100 tw:rounded-lg tw:p-4">
                    <p class="tw-h6 tw:text-neutral-700 tw:uppercase tw:mb-1">Sunninghill Academy</p>
                    <h2 class="tw-h3 tw:mb-2" data-tours-preview-target="typeName">Individual tours</h2>
                    <div class="tw:mb-4" data-tours-preview-target="typeMeta"></div>
                    <div class="tw:hidden tw:mb-3" data-tours-preview-target="recurringNote">
                      <div class="tw-card tw-card-positive tw-card-sm">
                        <div class="tw-card-body tw:flex tw:items-start tw:gap-2">
                          <i class="fa-regular fa-repeat tw:text-green-600 tw:mt-0.5" aria-hidden="true"></i>
                          <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:mb-0">
                            Only the next available date is shown. Once it fills, the following one appears automatically.
                          </p>
                        </div>
                      </div>
                    </div>
                    <div class="tw:hidden tw:mb-3" data-tours-preview-target="fullNote">
                      <div class="tw-inline-notification tw-inline-notification-compact tw-inline-notification-warning" role="status">
                        <div class="tw-inline-notification-icon"><i class="fa-regular fa-circle-info"></i></div>
                        <div class="tw-inline-notification-content">
                          <p class="tw-inline-notification-message tw:mb-0" data-tours-preview-target="fullNoteText"></p>
                        </div>
                      </div>
                    </div>
                    <div class="tw:flex tw:items-center tw:justify-between tw:gap-2 tw:mb-2">
                      <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" aria-label="Previous month" data-action="click->tours-preview#calPrev">
                        <i class="fa-regular fa-chevron-left"></i>
                      </button>
                      <span class="tw:text-body-s tw:leading-body-s tw:font-semibold" data-tours-preview-target="calLabel" aria-live="polite">May 2026</span>
                      <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" aria-label="Next month" data-action="click->tours-preview#calNext">
                        <i class="fa-regular fa-chevron-right"></i>
                      </button>
                    </div>
                    <div data-tours-preview-target="calGrid"></div>
                    <div class="tw:flex tw:justify-center tw:gap-4 tw:mt-2">
                      <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-indicator tw:leading-indicator tw:text-neutral-700">
                        <span class="tw:w-1.5 tw:h-1.5 tw:rounded-full tw:bg-green-500" aria-hidden="true"></span>Available
                      </span>
                      <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-indicator tw:leading-indicator tw:text-neutral-700">
                        <span class="tw:w-1.5 tw:h-1.5 tw:rounded-full tw:bg-red-400" aria-hidden="true"></span>Fully booked
                      </span>
                    </div>
                  </div>
                  <!-- Right — day-columns of time slots -->
                  <div class="tw:md:col-span-2">
                    <div class="tw:flex tw:items-center tw:justify-between tw:gap-2 tw:mb-3">
                      <span class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-700">Choose a time</span>
                      <span class="tw:flex tw:gap-1">
                        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" aria-label="Earlier days" data-tours-preview-target="winPrevBtn" data-action="click->tours-preview#winPrev">
                          <i class="fa-regular fa-chevron-left"></i>
                        </button>
                        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-btn-sm" aria-label="Later days" data-tours-preview-target="winNextBtn" data-action="click->tours-preview#winNext">
                          <i class="fa-regular fa-chevron-right"></i>
                        </button>
                      </span>
                    </div>
                    <div class="tw:hidden tw:mb-3" data-tours-preview-target="justTakenNote">
                      <div class="tw-inline-notification tw-inline-notification-compact tw-inline-notification-warning" role="alert">
                        <div class="tw-inline-notification-icon"><i class="fa-regular fa-triangle-exclamation"></i></div>
                        <div class="tw-inline-notification-content">
                          <p class="tw-inline-notification-message tw:mb-0" data-taken-text>Sorry, that time was just taken. Please choose another time.</p>
                        </div>
                      </div>
                    </div>
                    <div data-tours-preview-target="dayColumns"></div>
                    <button type="button" class="tw-btn tw-btn-primary tw-btn-block tw:mt-4" disabled
                        data-tours-preview-target="confirmSlotBtn" data-action="click->tours-preview#confirmBooking">
                      Confirm booking
                    </button>
                    <p class="tw:text-center tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mt-3 tw:mb-0">
                      No account required. We'll email a confirmation.
                    </p>
                  </div>
                </div>
              </div>
              <!-- ========== Your details ========== -->
              <div class="tw:hidden" data-tours-preview-target="detailsWrap">
                <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw:mb-2" data-action="click->tours-preview#backToSessions">
                  <i class="fa-regular fa-arrow-left tw:mr-1"></i> Back
                </button>
                <h3 class="tw-h5 tw:mb-1">Your details</h3>
                <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-3">Tell us who's coming, then pick a date and time that suits you.</p>
                <div class="tw:rounded-lg tw:bg-neutral-translucent-100 tw:p-4 tw:mb-4">
                  <div class="tw-info-grid tw-info-grid-sm" data-tours-preview-target="detailsSummary"></div>
                </div>
                <div class="tw-form-row tw:mb-1">
                  <div class="tw-form-group tw-form-group-col-6">
                    <label class="tw-form-label tw-form-label-required" for="pv-fname">First name</label>
                    <input type="text" id="pv-fname" class="tw-form-control" aria-required="true" autocomplete="given-name" data-tours-preview-target="pFirstName">
                  </div>
                  <div class="tw-form-group tw-form-group-col-6">
                    <label class="tw-form-label tw-form-label-required" for="pv-lname">Last name</label>
                    <input type="text" id="pv-lname" class="tw-form-control" aria-required="true" autocomplete="family-name" data-tours-preview-target="pLastName">
                  </div>
                </div>
                <p class="tw-form-text tw:mb-3">Parent or carer.</p>
                <div class="tw-form-group tw:mb-3">
                  <label class="tw-form-label tw-form-label-required" for="pv-email">Email</label>
                  <input type="email" id="pv-email" class="tw-form-control" aria-required="true" data-tours-preview-target="pEmail">
                </div>
                <div data-tours-preview-target="childrenWrap"></div>
                <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm tw:mb-4" data-action="click->tours-preview#addChild">
                  <i class="fa-solid fa-plus tw:mr-1"></i> Add another child
                </button>
                <!-- Tour-specific questions (wizard step 4) — plain parent-facing fields -->
                <div data-tours-preview-target="questionsWrap"></div>
                <div class="tw:hidden tw:mb-3" data-tours-preview-target="formError">
                  <p class="tw-invalid-feedback">Please fill in the highlighted fields.</p>
                </div>
                <button type="button" class="tw-btn tw-btn-primary tw-btn-block" data-action="click->tours-preview#submitDetails">
                  Continue to date & time
                </button>
                <p class="tw:text-center tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mt-3 tw:mb-0">
                  We'll only use these details for your booking.
                </p>
              </div>
              <!-- ========== Confirmation ========== -->
              <div class="tw:hidden" data-tours-preview-target="confirmWrap">
                <div class="tw:text-center tw:mb-3">
                  <div class="tw:flex tw:justify-center tw:mb-2">
                    <div class="tw-avatar tw-avatar-lg tw-avatar-green"><i class="fa-regular fa-circle-check"></i></div>
                  </div>
                  <h2 class="tw-h4 tw:mb-1">You're booked in</h2>
                  <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mb-0">
                    Booking reference <strong data-tours-preview-target="confRef">SA-2731</strong>
                  </p>
                </div>
                <div class="tw:rounded-lg tw:bg-neutral-translucent-100 tw:p-4 tw:mb-4">
                  <div class="tw-info-grid tw-info-grid-sm" data-tours-preview-target="confSummary"></div>
                </div>
                <div class="tw:flex tw:flex-col tw:gap-2">
                  <button type="button" class="tw-btn tw-btn-secondary" data-action="click->tours-preview#downloadIcs">
                    <i class="fa-regular fa-calendar-plus tw:mr-1"></i> Add to calendar (.ics)
                  </button>
                  <button type="button" class="tw-btn tw-btn-tertiary" data-action="click->tours-preview#openManage">
                    Manage booking
                  </button>
                </div>
                <p class="tw:text-center tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mt-3 tw:mb-0">
                  No account required — manage your booking from the link in your email.
                </p>
              </div>
              <!-- ========== Manage booking ========== -->
              <div class="tw:hidden" data-tours-preview-target="manageWrap">
                <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw:mb-2" data-action="click->tours-preview#backToConfirmation">
                  <i class="fa-regular fa-arrow-left tw:mr-1"></i> Back
                </button>
                <h2 class="tw-h4 tw:mb-1">Manage your booking</h2>
                <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-4" data-tours-preview-target="manageSummary"></p>
                <div class="tw:flex tw:flex-col tw:gap-2 tw:mb-3">
                  <button type="button" class="tw-btn tw-btn-secondary" data-action="click->tours-preview#manageReschedule">
                    <i class="fa-regular fa-calendar-pen tw:mr-1"></i> Reschedule
                  </button>
                  <button type="button" class="tw-btn tw-btn-secondary" data-action="click->tours-preview#manageCancelAsk">
                    <i class="fa-regular fa-ban tw:mr-1"></i> Cancel booking
                  </button>
                </div>
                <div class="tw:hidden" data-tours-preview-target="cancelConfirm">
                  <div class="tw-card tw-card-negative tw-card-sm">
                    <div class="tw-card-body">
                      <p class="tw:text-body-s tw:leading-body-s tw:font-medium tw:mb-2">Cancel this booking?</p>
                      <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-600 tw:mb-3">Your place will be released for another family. You can book again any time.</p>
                      <div class="tw:flex tw:gap-2">
                        <button type="button" class="tw-btn tw-btn-danger tw-btn-sm" data-action="click->tours-preview#manageCancelConfirm">Yes, cancel it</button>
                        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm" data-action="click->tours-preview#manageCancelKeep">Keep my booking</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- ========== Cancelled ========== -->
              <div class="tw:hidden" data-tours-preview-target="cancelledWrap">
                <div class="tw:text-center tw:py-4">
                  <div class="tw:flex tw:justify-center tw:mb-3">
                    <div class="tw-avatar tw-avatar-lg tw-avatar-red"><i class="fa-regular fa-calendar-xmark"></i></div>
                  </div>
                  <h2 class="tw-h4 tw:mb-2">Booking cancelled</h2>
                  <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:mb-4">
                    Your place has been released and you'll get an email confirming the cancellation.
                  </p>
                  <button type="button" class="tw-btn tw-btn-primary" data-action="click->tours-preview#bookAgain">Book another time</button>
                </div>
              </div>
              <!-- ========== Bookings closed ========== -->
              <div class="tw:hidden" data-tours-preview-target="closedWrap">
                <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw:mb-2" data-action="click->tours-preview#backToDiscovery">
                  <i class="fa-regular fa-arrow-left tw:mr-1"></i> All sessions
                </button>
                <p class="tw-h6 tw:text-neutral-600 tw:uppercase tw:mb-1">Sunninghill Academy</p>
                <h2 class="tw-h3 tw:mb-3" data-tours-preview-target="closedTypeName">Year 11 Mock Interviews</h2>
                <div class="tw-inline-notification tw-inline-notification-compact tw-inline-notification-info" role="status">
                  <div class="tw-inline-notification-icon"><i class="fa-regular fa-circle-info"></i></div>
                  <div class="tw-inline-notification-content">
                    <p class="tw-inline-notification-message tw:mb-0">
                      Bookings are currently closed. Please check back later or contact admissions.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- Preview walkthrough footer — staff navigation. Top divider separates it
             from the parent-preview content above (DS card-footer treatment). -->
          <div class="tw-card-footer tw:shrink-0 tw:border-t tw:border-neutral-translucent-200 tw:flex tw:items-center tw:justify-between tw:gap-3">
            <span class="tw:flex tw:items-center tw:gap-1.5 tw:text-body-xs tw:leading-body-xs tw:text-neutral-600">
              <i class="fa-regular fa-eye tw:shrink-0" aria-hidden="true"></i> Staff step-through
            </span>
            <span class="tw:flex tw:items-center tw:gap-2 tw:shrink-0">
              <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm" data-tours-preview-target="wtBackBtn" data-action="click->tours-preview#wtBack">
                <i class="fa-regular fa-arrow-left tw:mr-1"></i> Back
              </button>
              <button type="button" class="tw-btn tw-btn-primary tw-btn-sm" data-tours-preview-target="wtNextBtn" data-action="click->tours-preview#wtNext">
                Next <i class="fa-regular fa-arrow-right tw:ml-1"></i>
              </button>
            </span>
          </div>
        </div>
      </div>
    </div>
    <!-- Toast region -->
    <div data-controller="toast">
      <div class="tw-toast-container" data-tours-preview-target="toastContainer"></div>
    </div>
  </div>
</div>