<div data-controller="sidebar tours-wizard">
  <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-page-header-borderless tw:mb-2">
        <div class="tw-page-header-breadcrumb">
          <nav aria-label="Breadcrumb">
            <ol class="tw-breadcrumb">
              <li class="tw-breadcrumb-item">
                <a href="#" 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"><a href="/lookbook/preview/projects/tours/all_tours">Tours</a></li>
              <li class="tw-breadcrumb-item tw-active" aria-current="page" data-tours-wizard-target="crumbLeaf">New tour</li>
            </ol>
          </nav>
        </div>
        <div class="tw-page-header-main">
          <div data-tours-wizard-target="backCrumb">
            <a href="/lookbook/preview/projects/tours/all_tours" class="tw-page-header-back" aria-label="Back to Tours">
              <i class="fa-solid fa-chevron-left tw-page-header-back-icon" aria-hidden="true"></i>
            </a>
          </div>
          <div class="tw-page-header-title-group">
            <div>
              <h1 class="tw-page-header-title"><span class="tw:text-neutral-900" data-tours-wizard-target="pageTitle">Create new tour</span></h1>
              <p class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mt-1 tw:mb-0" data-tours-wizard-target="pageSubtitle">New tour · In person</p>
            </div>
          </div>
          <div class="tw-page-header-actions">
            <span class="tw:hidden" data-tours-wizard-target="draftBadge">
              <span class="tw-badge tw-badge-secondary-subtle">
                <i class="fa-regular fa-floppy-disk tw:mr-1"></i>Draft saved
              </span>
            </span>
            <span class="tw:hidden" data-tours-wizard-target="statusBadgeWrap">
              <span class="tw-badge tw-badge-success-subtle" data-tours-wizard-target="statusBadge">Open for bookings</span>
            </span>
            <span class="tw:hidden" data-tours-wizard-target="modeBadgeWrap">
              <span class="tw-badge tw-badge-secondary-subtle" data-tours-wizard-target="modeBadge">One-off (not recurring)</span>
            </span>
          </div>
        </div>
      </div>
      <!-- ============================================
           Wizard (create) / Tabs (Manage type edit)
           ============================================ -->
      <div data-tours-wizard-target="wizardWrap">
        <!-- Create mode: steps header -->
        <div data-tours-wizard-target="stepsHeader">
          <div class="tw:flex tw:items-start tw:mb-6 tw:px-2" role="tablist" aria-label="Tour set-up steps">
            <button type="button" class="tw:flex tw:flex-col tw:items-center tw:gap-1.5 tw:bg-transparent tw:border-0 tw:p-0 tw:cursor-pointer tw:-mx-1"
                          role="tab" aria-selected="true" tabindex="0"
                          data-tours-wizard-target="step" data-action="click->tours-wizard#goToStep keydown->tours-wizard#stepKeys">
              <span class="tw:flex tw:items-center tw:justify-center tw:w-7 tw:h-7 tw:rounded-full tw:border-2 tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:bg-neutral-0 tw:border-primary-500 tw:text-primary-600" data-step-ind>1</span>
              <span class="tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:text-primary-700" data-step-lbl>Details</span>
            </button>
            <span class="tw:flex-1 tw:h-0.5 tw:bg-neutral-translucent-200 tw:mt-3.5" data-tours-wizard-target="stepLine" aria-hidden="true"></span>
            <button type="button" class="tw:flex tw:flex-col tw:items-center tw:gap-1.5 tw:bg-transparent tw:border-0 tw:p-0 tw:cursor-pointer tw:-mx-1"
                          role="tab" aria-selected="false" tabindex="-1"
                          data-tours-wizard-target="step" data-action="click->tours-wizard#goToStep keydown->tours-wizard#stepKeys">
              <span class="tw:flex tw:items-center tw:justify-center tw:w-7 tw:h-7 tw:rounded-full tw:border-2 tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:bg-neutral-100 tw:border-neutral-translucent-200 tw:text-muted" data-step-ind>2</span>
              <span class="tw:text-body-xs tw:leading-body-xs tw:font-medium tw:text-muted" data-step-lbl>Timing</span>
            </button>
            <span class="tw:flex-1 tw:h-0.5 tw:bg-neutral-translucent-200 tw:mt-3.5" data-tours-wizard-target="stepLine" aria-hidden="true"></span>
            <button type="button" class="tw:flex tw:flex-col tw:items-center tw:gap-1.5 tw:bg-transparent tw:border-0 tw:p-0 tw:cursor-pointer tw:-mx-1"
                          role="tab" aria-selected="false" tabindex="-1"
                          data-tours-wizard-target="step" data-action="click->tours-wizard#goToStep keydown->tours-wizard#stepKeys">
              <span class="tw:flex tw:items-center tw:justify-center tw:w-7 tw:h-7 tw:rounded-full tw:border-2 tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:bg-neutral-100 tw:border-neutral-translucent-200 tw:text-muted" data-step-ind>3</span>
              <span class="tw:text-body-xs tw:leading-body-xs tw:font-medium tw:text-muted" data-step-lbl>Sessions</span>
            </button>
            <span class="tw:flex-1 tw:h-0.5 tw:bg-neutral-translucent-200 tw:mt-3.5" data-tours-wizard-target="stepLine" aria-hidden="true"></span>
            <button type="button" class="tw:flex tw:flex-col tw:items-center tw:gap-1.5 tw:bg-transparent tw:border-0 tw:p-0 tw:cursor-pointer tw:-mx-1"
                          role="tab" aria-selected="false" tabindex="-1"
                          data-tours-wizard-target="step" data-action="click->tours-wizard#goToStep keydown->tours-wizard#stepKeys">
              <span class="tw:flex tw:items-center tw:justify-center tw:w-7 tw:h-7 tw:rounded-full tw:border-2 tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:bg-neutral-100 tw:border-neutral-translucent-200 tw:text-muted" data-step-ind>4</span>
              <span class="tw:text-body-xs tw:leading-body-xs tw:font-medium tw:text-muted" data-step-lbl>Questions</span>
            </button>
            <span class="tw:flex-1 tw:h-0.5 tw:bg-neutral-translucent-200 tw:mt-3.5" data-tours-wizard-target="stepLine" aria-hidden="true"></span>
            <button type="button" class="tw:flex tw:flex-col tw:items-center tw:gap-1.5 tw:bg-transparent tw:border-0 tw:p-0 tw:cursor-pointer tw:-mx-1"
                          role="tab" aria-selected="false" tabindex="-1"
                          data-tours-wizard-target="step" data-action="click->tours-wizard#goToStep keydown->tours-wizard#stepKeys">
              <span class="tw:flex tw:items-center tw:justify-center tw:w-7 tw:h-7 tw:rounded-full tw:border-2 tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:bg-neutral-100 tw:border-neutral-translucent-200 tw:text-muted" data-step-ind>5</span>
              <span class="tw:text-body-xs tw:leading-body-xs tw:font-medium tw:text-muted" data-step-lbl>Reminders</span>
            </button>
            <span class="tw:flex-1 tw:h-0.5 tw:bg-neutral-translucent-200 tw:mt-3.5" data-tours-wizard-target="stepLine" aria-hidden="true"></span>
            <button type="button" class="tw:flex tw:flex-col tw:items-center tw:gap-1.5 tw:bg-transparent tw:border-0 tw:p-0 tw:cursor-pointer tw:-mx-1"
                          role="tab" aria-selected="false" tabindex="-1"
                          data-tours-wizard-target="step" data-action="click->tours-wizard#goToStep keydown->tours-wizard#stepKeys">
              <span class="tw:flex tw:items-center tw:justify-center tw:w-7 tw:h-7 tw:rounded-full tw:border-2 tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:bg-neutral-100 tw:border-neutral-translucent-200 tw:text-muted" data-step-ind>6</span>
              <span class="tw:text-body-xs tw:leading-body-xs tw:font-medium tw:text-muted" data-step-lbl>Share & embed</span>
            </button>
          </div>
        </div>
        <!-- Edit mode: free tabs -->
        <div class="tw:hidden" data-tours-wizard-target="tabsHeader">
          <div class="tw-tabs tw:mb-5" role="tablist" aria-label="Manage tour">
            <button type="button" class="tw-tab tw-active" role="tab" aria-selected="true" tabindex="0"
                          data-tours-wizard-target="tab" data-action="click->tours-wizard#selectTab keydown->tours-wizard#tabKeys">Details</button>
            <button type="button" class="tw-tab" role="tab" aria-selected="false" tabindex="-1"
                          data-tours-wizard-target="tab" data-action="click->tours-wizard#selectTab keydown->tours-wizard#tabKeys">Timing</button>
            <button type="button" class="tw-tab" role="tab" aria-selected="false" tabindex="-1"
                          data-tours-wizard-target="tab" data-action="click->tours-wizard#selectTab keydown->tours-wizard#tabKeys">Sessions</button>
            <button type="button" class="tw-tab" role="tab" aria-selected="false" tabindex="-1"
                          data-tours-wizard-target="tab" data-action="click->tours-wizard#selectTab keydown->tours-wizard#tabKeys">Questions</button>
            <button type="button" class="tw-tab" role="tab" aria-selected="false" tabindex="-1"
                          data-tours-wizard-target="tab" data-action="click->tours-wizard#selectTab keydown->tours-wizard#tabKeys">Reminders</button>
            <button type="button" class="tw-tab" role="tab" aria-selected="false" tabindex="-1"
                          data-tours-wizard-target="tab" data-action="click->tours-wizard#selectTab keydown->tours-wizard#tabKeys">Share & embed</button>
          </div>
        </div>
        <div class="tw-steps-content">
          <!-- ==================== B1 · Details ==================== -->
          <div class="tw-steps-panel tw-active" role="tabpanel" aria-label="Details" data-tours-wizard-target="panel">
            <div class="tw-card tw:mb-4">
              <div class="tw-card-header">
                <div>
                  <h3 class="tw-h4 tw-card-title tw:mb-0">Tour details</h3>
                  <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mt-0.5 tw:mb-0">What this tour is called, where it happens, and how parents will meet you.</p>
                </div>
              </div>
              <div class="tw-card-body">
                <!-- Name + Apply for share a row ("what it's called" / "who it's
                     for"), so no half-row sits empty. Description keeps a full
                     row because it's a textarea; the location pair below is
                     always two columns (Physical location swaps for Meeting
                     platform when the type is Online). -->
                <div class="tw-form-row tw:mb-4">
                  <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                    <label class="tw-form-label tw-form-label-required" for="mw-name">Tour name</label>
                    <input type="text" id="mw-name" class="tw-form-control" placeholder="e.g. Individual tours"
                           aria-required="true" aria-describedby="mw-name-error"
                           data-tours-wizard-target="nameInput"
                           data-action="input->tours-wizard#nameChanged">
                    <p class="tw-form-text">Shown to parents on the booking page.</p>
                    <div id="mw-name-error" class="tw:hidden" data-tours-wizard-target="nameFeedback">
                      <p class="tw-invalid-feedback">Give the tour a name — parents see it on the booking page.</p>
                    </div>
                  </div>
                  <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                    <span class="tw-form-label" id="mw-category-label">Apply for</span>
                    <!-- Multi-select (decision A: staff tag many, parents pick one),
                         matching the Events event form's "Apply for" token field.
                         Check rows are rendered from the shared intake list
                         (controllers/tours_intakes) so an intake added in All tours
                         is selectable here without a code change. -->
                    <div class="tw-dropdown tw-dropdown-block" data-controller="dropdown"
                         data-dropdown-multiple-value="true">
                      <button class="tw-dropdown-trigger" type="button" id="mw-category"
                              aria-haspopup="listbox" aria-expanded="false" aria-labelledby="mw-category-label mw-category"
                              data-dropdown-target="trigger"
                              data-action="click->dropdown#toggle keydown->dropdown#keydown">
                        <span class="tw-dropdown-label" data-dropdown-target="label" data-tours-wizard-target="categoryLabel">All intakes</span>
                        <i class="fa-regular fa-chevron-down tw-dropdown-chevron" aria-hidden="true"></i>
                      </button>
                      <div class="tw-dropdown-menu" role="listbox" aria-multiselectable="true"
                           data-dropdown-target="menu" tabindex="-1"
                           data-tours-wizard-target="categoryMenu"></div>
                    </div>
                    <p class="tw-form-text">Which intakes this tour appears under on the parent booking link — pick more than one if it serves several. Shared with Events; manage the list from All tours.</p>
                  </div>
                </div>
                <div class="tw-form-group">
                  <label class="tw-form-label" for="mw-desc">Description</label>
                  <textarea id="mw-desc" rows="2" class="tw-form-control" placeholder="e.g. Rolling 1:1 tours for prospective families — book a time that suits you."
                            data-tours-wizard-target="descInput" data-action="input->tours-wizard#descChanged"></textarea>
                  <p class="tw-form-text">A short line shown on the tour card and the parent booking page.</p>
                </div>
                <div class="tw-form-row tw:mb-4">
                  <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                    <label class="tw-form-label" for="mw-loctype">Location type</label>
                    <select id="mw-loctype" class="tw-form-select" data-tours-wizard-target="locTypeSelect" data-action="change->tours-wizard#locTypeChanged">
                      <option value="inperson">In person</option>
                      <option value="online">Online</option>
                    </select>
                  </div>
                  <div class="tw-form-group tw-form-group-col-6 tw:mb-0" data-tours-wizard-target="physicalWrap">
                    <label class="tw-form-label" for="mw-physical">Physical location</label>
                    <input type="text" id="mw-physical" class="tw-form-control" placeholder="e.g. Primary - 8 Park Dr"
                           data-tours-wizard-target="physicalInput" data-action="input->tours-wizard#physicalChanged">
                  </div>
                  <div class="tw-form-group tw-form-group-col-6 tw:hidden tw:mb-0" data-tours-wizard-target="platformWrap">
                    <label class="tw-form-label" for="mw-platform">Meeting platform</label>
                    <select id="mw-platform" class="tw-form-select" data-tours-wizard-target="platformSelect" data-action="change->tours-wizard#platformChanged">
                      <option value="google">Google Meet</option>
                      <option value="teams">Microsoft Teams</option>
                      <option value="zoom">Zoom</option>
                    </select>
                  </div>
                </div>
                <!-- Linked online accounts (conditional — online only) -->
                <div class="tw:hidden tw:mb-4" data-tours-wizard-target="onlineAccountsWrap">
                  <div class="tw-card tw-card-flat">
                    <div class="tw-card-body">
                      <p class="tw:text-body-s tw:leading-body-s tw:mb-3">
                        <strong>Linked online accounts</strong>
                        <span class="tw:text-muted"> — connect once to auto-create joining links.</span>
                      </p>
                      <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-3 tw:gap-2">
                        <!-- Google Meet -->
                        <div class="tw-card tw-card-sm tw-card-positive" data-provider="google" data-connected="true" data-tours-wizard-target="accountRow">
                          <div class="tw-card-body tw:flex tw:items-center tw:justify-between tw:gap-2">
                            <span class="tw:flex tw:items-center tw:gap-2 tw:min-w-0">
                              <span class="tw:shrink-0 tw:inline-flex" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24"><rect width="24" height="24" rx="5" fill="#ffffff" stroke="#e8eaed"></rect><rect x="5" y="8" width="8.5" height="8" rx="1.5" fill="#00832d"></rect><path d="M13.5 10.4l4.2-2.3v7.8l-4.2-2.3z" fill="#2684fc"></path></svg></span>
                              <span class="tw:min-w-0">
                                <span class="tw:block tw:text-body-s tw:leading-body-s tw:font-medium tw:truncate">Google Meet</span>
                                <span class="tw:block tw:text-indicator tw:leading-indicator tw:text-green-700 tw:font-medium" data-acc-status><i class="fa-solid fa-circle-check tw:mr-1" aria-hidden="true"></i>Connected</span>
                              </span>
                            </span>
                            <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm" data-action="click->tours-wizard#toggleAccount">Disconnect</button>
                          </div>
                        </div>
                        <!-- Microsoft Teams -->
                        <div class="tw-card tw-card-sm" data-provider="teams" data-connected="false" data-tours-wizard-target="accountRow">
                          <div class="tw-card-body tw:flex tw:items-center tw:justify-between tw:gap-2">
                            <span class="tw:flex tw:items-center tw:gap-2 tw:min-w-0">
                              <span class="tw:shrink-0 tw:inline-flex" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24"><rect width="24" height="24" rx="5" fill="#5b5fc7"></rect><circle cx="15.3" cy="8.2" r="2" fill="#ffffff" opacity="0.95"></circle><path d="M7 9.5h8v1.6h-3.1V17h-1.8v-5.9H7z" fill="#ffffff"></path></svg></span>
                              <span class="tw:min-w-0">
                                <span class="tw:block tw:text-body-s tw:leading-body-s tw:font-medium tw:truncate">Microsoft Teams</span>
                                <span class="tw:block tw:text-indicator tw:leading-indicator tw:text-muted" data-acc-status><i class="fa-regular fa-circle tw:mr-1" aria-hidden="true"></i>Not connected</span>
                              </span>
                            </span>
                            <button type="button" class="tw-btn tw-btn-primary tw-btn-sm" data-action="click->tours-wizard#toggleAccount">Connect</button>
                          </div>
                        </div>
                        <!-- Zoom -->
                        <div class="tw-card tw-card-sm" data-provider="zoom" data-connected="false" data-tours-wizard-target="accountRow">
                          <div class="tw-card-body tw:flex tw:items-center tw:justify-between tw:gap-2">
                            <span class="tw:flex tw:items-center tw:gap-2 tw:min-w-0">
                              <span class="tw:shrink-0 tw:inline-flex" aria-hidden="true"><svg viewBox="0 0 24 24" width="24" height="24"><rect width="24" height="24" rx="5" fill="#2d8cff"></rect><rect x="5.5" y="8.5" width="8" height="7" rx="1.6" fill="#ffffff"></rect><path d="M13.5 10.7l4-2v6.6l-4-2z" fill="#ffffff"></path></svg></span>
                              <span class="tw:min-w-0">
                                <span class="tw:block tw:text-body-s tw:leading-body-s tw:font-medium tw:truncate">Zoom</span>
                                <span class="tw:block tw:text-indicator tw:leading-indicator tw:text-muted" data-acc-status><i class="fa-regular fa-circle tw:mr-1" aria-hidden="true"></i>Not connected</span>
                              </span>
                            </span>
                            <button type="button" class="tw-btn tw-btn-primary tw-btn-sm" data-action="click->tours-wizard#toggleAccount">Connect</button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Connect-account OAuth popup (simulated) -->
                <div class="tw-popup-overlay tw-popup-center" data-tours-wizard-target="connectPopup" role="dialog" aria-modal="true" aria-labelledby="mw-connect-title">
                  <div class="tw-popup-panel tw-popup-sm">
                    <div class="tw-popup-header">
                      <span class="tw-popup-header-title tw:flex tw:items-center tw:gap-2">
                        <span data-tours-wizard-target="connectPopupLogo" class="tw:inline-flex" aria-hidden="true"></span>
                        <span id="mw-connect-title" data-tours-wizard-target="connectPopupTitle">Connect account</span>
                      </span>
                      <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->tours-wizard#closeConnectPopup"><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-0" data-tours-wizard-target="connectPopupDesc">
                        You'll sign in to auto-create joining links for every booked session.
                      </p>
                    </div>
                    <div class="tw-popup-footer">
                      <button type="button" class="tw-btn tw-btn-tertiary" data-action="click->tours-wizard#closeConnectPopup">Cancel</button>
                      <button type="button" class="tw-btn tw-btn-primary" data-tours-wizard-target="connectAuthorizeBtn" data-action="click->tours-wizard#authorizeConnect">Authorize</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tw-card">
              <div class="tw-card-header">
                <div>
                  <h3 class="tw-h4 tw-card-title tw:mb-0">Visibility & pipeline automation</h3>
                  <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mt-0.5 tw:mb-0">Who can book this tour, and what happens to a lead when they register.</p>
                </div>
              </div>
              <div class="tw-card-body">
                <p class="tw-h6 tw:text-muted tw:uppercase tw:mb-2">Who can book</p>
                <div class="tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-2 tw:mb-4">
                  <label class="tw-card tw-card-selectable-radio" data-tours-wizard-target="visCard">
                    <span class="tw-card-body tw:flex tw:items-center tw:gap-3">
                      <i class="fa-regular fa-users tw:text-primary-500" aria-hidden="true"></i>
                      <span class="tw:flex-1">
                        <span class="tw:block tw:text-body-s tw:leading-body-s tw:font-semibold">Public bookings</span>
                        <span class="tw:block tw:text-body-xs tw:leading-body-xs tw:text-muted">Anyone with the link or embed can book.</span>
                      </span>
                      <input type="radio" name="mw-visibility" value="public" class="tw-form-check-input" checked
                             aria-label="Public bookings"
                             data-tours-wizard-target="visRadio" data-action="change->tours-wizard#visibilityChanged">
                    </span>
                  </label>
                  <label class="tw-card tw-card-selectable-radio" data-tours-wizard-target="visCard">
                    <span class="tw-card-body tw:flex tw:items-center tw:gap-3">
                      <i class="fa-regular fa-lock tw:text-primary-500" aria-hidden="true"></i>
                      <span class="tw:flex-1">
                        <span class="tw:block tw:text-body-s tw:leading-body-s tw:font-semibold">Private bookings</span>
                        <span class="tw:block tw:text-body-xs tw:leading-body-xs tw:text-muted">Invite only — send the link directly.</span>
                      </span>
                      <input type="radio" name="mw-visibility" value="private" class="tw-form-check-input"
                             aria-label="Private bookings"
                             data-tours-wizard-target="visRadio" data-action="change->tours-wizard#visibilityChanged">
                    </span>
                  </label>
                </div>
                <p class="tw-h6 tw:text-muted tw:uppercase tw:mb-2">When a parent registers</p>
                <div class="tw-form-group">
                  <div class="tw-form-check tw-form-switch">
                    <input class="tw-form-check-input" type="checkbox" id="mw-moveleads" role="switch" checked
                           data-tours-wizard-target="moveLeadsSwitch" data-action="change->tours-wizard#moveLeadsChanged">
                    <label class="tw-form-check-label" for="mw-moveleads">Move leads forward in pipeline when they submit the form</label>
                  </div>
                  <p class="tw-form-text">Registrations are automatically moved into the chosen admissions stage.</p>
                </div>
                <div class="tw-form-group">
                  <label class="tw-form-label" for="mw-stage">Then move to stage</label>
                  <select id="mw-stage" class="tw-form-select" data-tours-wizard-target="stageSelect" data-action="change->tours-wizard#stageChanged">
                    <option>Enquiry / Visit Booked</option>
                    <option>Enquiry / Visited</option>
                    <option>Applied</option>
                  </select>
                </div>
                <div class="tw-form-group tw:mb-0">
                  <label class="tw-form-label">Notify on registration</label>
                  <div class="tw-tag-input" data-controller="tag-input" data-action="click->tag-input#focus">
                    <div class="tw-tag-input-tags">
                      <span class="tw-tag tw-tag-primary-subtle" data-tag-input-target="tag" data-value="Aiden Carter">
                        Aiden Carter
                        <button class="tw-tag-close" type="button" aria-label="Remove Aiden Carter" data-action="click->tag-input#removeTag"><i class="fa-regular fa-xmark"></i></button>
                      </span>
                      <span class="tw-tag tw-tag-primary-subtle" data-tag-input-target="tag" data-value="Priya Shah">
                        Priya Shah
                        <button class="tw-tag-close" type="button" aria-label="Remove Priya Shah" data-action="click->tag-input#removeTag"><i class="fa-regular fa-xmark"></i></button>
                      </span>
                      <input class="tw-tag-input-field" type="text" placeholder="Add a colleague…"
                             data-tag-input-target="input" data-action="keydown->tag-input#keydown" aria-label="Add a colleague">
                    </div>
                  </div>
                  <p class="tw-form-text">These users get an email on each registration.</p>
                </div>
              </div>
            </div>
          </div>
          <!-- ==================== B2 · Timing ==================== -->
          <div class="tw-steps-panel" role="tabpanel" aria-label="Timing" data-tours-wizard-target="panel">
            <div class="tw-card tw:mb-4">
              <div class="tw-card-header">
                <div>
                  <h3 class="tw-h4 tw-card-title tw:mb-0">Default times & capacity</h3>
                </div>
              </div>
              <div class="tw-card-body">
                <div class="tw-form-row tw:mb-4">
                  <div class="tw-form-group tw-form-group-col-4 tw:mb-0">
                    <label class="tw-form-label" for="mw-def-start">Default start</label>
                    <input type="time" id="mw-def-start" class="tw-form-control" value="10:00"
                           data-tours-wizard-target="defaultStart" data-action="change->tours-wizard#defaultsChanged">
                  </div>
                  <div class="tw-form-group tw-form-group-col-4 tw:mb-0">
                    <label class="tw-form-label" for="mw-def-end">Default end</label>
                    <input type="time" id="mw-def-end" class="tw-form-control" value="11:00"
                           data-tours-wizard-target="defaultEnd" data-action="change->tours-wizard#defaultsChanged">
                  </div>
                  <div class="tw-form-group tw-form-group-col-4 tw:mb-0">
                    <label class="tw-form-label" for="mw-capacity">Capacity per slot</label>
                    <input type="number" id="mw-capacity" min="1" class="tw-form-control" value="2"
                           data-tours-wizard-target="capacityInput" data-action="change->tours-wizard#defaultsChanged">
                  </div>
                </div>
                <div class="tw-form-group tw:mb-4">
                  <div class="tw-form-check tw-form-switch">
                    <input class="tw-form-check-input" type="checkbox" id="mw-recurring" role="switch"
                           data-tours-wizard-target="recurringSwitch" data-action="change->tours-wizard#recurringToggled">
                    <label class="tw-form-check-label" for="mw-recurring">Recurring tour — show parents the next available date only</label>
                  </div>
                  <p class="tw-form-text">
                    When ON, the public booking page only displays the very next date that still has space. As soon as
                    that date is fully booked, the following available date takes its place — no manual rotation needed.
                    Ideal for ongoing weekly tours, rolling interviews and Google Meet drop-ins.
                  </p>
                </div>
                <div class="tw-form-group tw:mb-4">
                  <label class="tw-form-label" for="mw-cutoff">Booking cut-off</label>
                  <select id="mw-cutoff" class="tw-form-select tw:max-w-xs" data-tours-wizard-target="cutoffSelect" data-action="change->tours-wizard#defaultsChanged">
                    <option value="2h">2 hours before the session</option>
                    <option value="24h" selected>24 hours before the session</option>
                    <option value="48h">48 hours before the session</option>
                  </select>
                  <p class="tw-form-text">Parents can't book closer to the start than this.</p>
                </div>
              </div>
            </div>
            <!-- Recurring weekly schedules -->
            <div class="tw:hidden" data-tours-wizard-target="seriesSection">
              <div class="tw-card">
                <div class="tw-card-header">
                  <div>
                    <h3 class="tw-h4 tw-card-title tw:mb-0">Recurring weekly schedules</h3>
                    <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mt-0.5 tw:mb-0">Repeat the same day & time each week between two dates — sessions are generated onto the calendar automatically.</p>
                  </div>
                </div>
                <div class="tw-card-body">
                  <!-- Empty -->
                  <div class="tw:hidden" data-tours-wizard-target="seriesEmpty">
                    <div class="tw-card tw-card-flat">
                      <div class="tw-card-body tw:text-center tw:py-8">
                        <i class="fa-regular fa-repeat tw:text-neutral-400 tw:mb-2" aria-hidden="true"></i>
                        <p class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mb-3">
                          No recurring series yet<br>
                          Add a weekly series and sessions are generated onto the calendar automatically.
                        </p>
                        <button type="button" class="tw-btn tw-btn-primary" data-action="click->tours-wizard#addSeries">
                          <i class="fa-solid fa-plus tw:mr-1"></i> Add a weekly series
                        </button>
                      </div>
                    </div>
                  </div>
                  <!-- Series list -->
                  <div class="tw:hidden" data-tours-wizard-target="seriesListWrap">
                    <div data-tours-wizard-target="seriesList"></div>
                    <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm tw:mb-3" data-action="click->tours-wizard#addSeries">
                      <i class="fa-solid fa-plus tw:mr-1"></i> Add a weekly series
                    </button>
                  </div>
                  <!-- Adding / editing form -->
                  <div class="tw:hidden" data-tours-wizard-target="seriesForm">
                    <div class="tw-card tw-card-flat">
                      <div class="tw-card-body">
                        <h4 class="tw-h5 tw:mb-3">Add a weekly series</h4>
                        <div class="tw-form-group">
                          <label class="tw-form-label tw-form-label-optional" for="mw-series-name">Series name</label>
                          <input type="text" id="mw-series-name" class="tw-form-control" placeholder="e.g. Summer term tours"
                                 data-tours-wizard-target="seriesName">
                        </div>
                        <div class="tw-form-group">
                          <span class="tw-form-label">Repeats on</span>
                          <div class="tw:flex tw:flex-wrap tw:gap-1.5" role="group" aria-label="Repeats on days">
                            <button type="button" class="tw-btn tw-btn-sm tw-btn-secondary" aria-pressed="false" data-day-name="Mon"
                                      data-tours-wizard-target="seriesDay"
                                      data-action="click->tours-wizard#seriesDayToggle">Mon</button>
                            <button type="button" class="tw-btn tw-btn-sm tw-btn-secondary" aria-pressed="false" data-day-name="Tue"
                                      data-tours-wizard-target="seriesDay"
                                      data-action="click->tours-wizard#seriesDayToggle">Tue</button>
                            <button type="button" class="tw-btn tw-btn-sm tw-btn-secondary" aria-pressed="false" data-day-name="Wed"
                                      data-tours-wizard-target="seriesDay"
                                      data-action="click->tours-wizard#seriesDayToggle">Wed</button>
                            <button type="button" class="tw-btn tw-btn-sm tw-btn-secondary" aria-pressed="false" data-day-name="Thu"
                                      data-tours-wizard-target="seriesDay"
                                      data-action="click->tours-wizard#seriesDayToggle">Thu</button>
                            <button type="button" class="tw-btn tw-btn-sm tw-btn-secondary" aria-pressed="false" data-day-name="Fri"
                                      data-tours-wizard-target="seriesDay"
                                      data-action="click->tours-wizard#seriesDayToggle">Fri</button>
                            <button type="button" class="tw-btn tw-btn-sm tw-btn-secondary" aria-pressed="false" data-day-name="Sat"
                                      data-tours-wizard-target="seriesDay"
                                      data-action="click->tours-wizard#seriesDayToggle">Sat</button>
                            <button type="button" class="tw-btn tw-btn-sm tw-btn-secondary" aria-pressed="false" data-day-name="Sun"
                                      data-tours-wizard-target="seriesDay"
                                      data-action="click->tours-wizard#seriesDayToggle">Sun</button>
                          </div>
                        </div>
                        <div class="tw-form-row tw:mb-4">
                          <div class="tw-form-group tw-form-group-col-4 tw:mb-0">
                            <label class="tw-form-label" for="mw-series-start">Start time</label>
                            <input type="time" id="mw-series-start" class="tw-form-control" value="09:00" data-tours-wizard-target="seriesStart">
                          </div>
                          <div class="tw-form-group tw-form-group-col-4 tw:mb-0">
                            <label class="tw-form-label" for="mw-series-end">End time</label>
                            <input type="time" id="mw-series-end" class="tw-form-control" value="10:00" data-tours-wizard-target="seriesEnd">
                          </div>
                          <div class="tw-form-group tw-form-group-col-4 tw:mb-0">
                            <label class="tw-form-label" for="mw-series-places">Places</label>
                            <input type="number" id="mw-series-places" min="1" class="tw-form-control" value="4" data-tours-wizard-target="seriesPlaces">
                          </div>
                        </div>
                        <div class="tw-form-row tw:mb-4">
                          <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                            <label class="tw-form-label" for="mw-series-from">Start date</label>
                            <input type="date" id="mw-series-from" class="tw-form-control" data-tours-wizard-target="seriesFrom">
                          </div>
                          <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                            <label class="tw-form-label" for="mw-series-to">End date</label>
                            <input type="date" id="mw-series-to" class="tw-form-control" data-tours-wizard-target="seriesTo">
                          </div>
                        </div>
                        <div class="tw:hidden tw:mb-3" data-tours-wizard-target="seriesFeedback">
                          <p class="tw-invalid-feedback">Pick at least one day, times, and a valid start–end date range.</p>
                        </div>
                        <div class="tw:flex tw:items-center tw:justify-between tw:gap-3">
                          <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">
                            <i class="fa-regular fa-circle-info tw:mr-1" aria-hidden="true"></i>
                            Different dates some weeks? Add the series, then drag any session on the calendar to duplicate it.
                          </p>
                          <div class="tw:flex tw:gap-2 tw:shrink-0">
                            <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm" data-action="click->tours-wizard#cancelSeries">Cancel</button>
                            <button type="button" class="tw-btn tw-btn-primary tw-btn-sm" data-action="click->tours-wizard#saveSeries">
                              <i class="fa-solid fa-plus tw:mr-1"></i> Add series
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- ==================== B3 · Sessions ==================== -->
          <div class="tw-steps-panel" role="tabpanel" aria-label="Sessions" data-tours-wizard-target="panel">
            <div class="tw-card">
              <div class="tw-card-header tw:flex tw:flex-wrap tw:items-center tw:justify-between tw:gap-2">
                <div>
                  <h3 class="tw-h4 tw-card-title tw:mb-0">Scheduled sessions</h3>
                  <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mt-0.5 tw:mb-0">Add or duplicate dates and time slots. Publish when ready to make visible to parents.</p>
                </div>
                <button type="button" class="tw-btn tw-btn-primary" data-action="click->tours-wizard#addRow">
                  <i class="fa-solid fa-plus tw:mr-1"></i> Add session
                </button>
              </div>
              <div class="tw-card-body">
                <!-- Empty -->
                <div data-tours-wizard-target="sessionsEmpty">
                  <div class="tw-card tw-card-flat">
                    <div class="tw-card-body tw:text-center tw:py-10">
                      <i class="fa-regular fa-calendar-plus tw:text-neutral-400 tw:mb-2" aria-hidden="true"></i>
                      <p class="tw:text-body-s tw:leading-body-s tw:font-medium tw:mb-1">No sessions yet</p>
                      <p class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mb-0 tw:max-w-md tw:mx-auto">
                        Add a row to the table below, or generate sessions from a recurring series
                        in the Timing step. At least one session is required before you can publish.
                      </p>
                    </div>
                  </div>
                </div>
                <!-- Table -->
                <div class="tw:hidden" data-tours-wizard-target="sessionsTableWrap">
                  <div class="tw-inline-notification tw-inline-notification-compact tw-inline-notification-info tw:mb-3" role="note">
                    <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">Parents only see the sessions that match their child's target group.</p>
                    </div>
                  </div>
                  <div class="tw-table-responsive">
                    <table class="tw-table tw-table-sm">
                      <thead class="tw:bg-table-header">
                        <tr>
                          <th scope="col">Date</th>
                          <th scope="col">Time</th>
                          <th scope="col">Capacity</th>
                          <th scope="col"><span class="tw:sr-only">Actions</span></th>
                        </tr>
                      </thead>
                      <tbody data-tours-wizard-target="sessionsTbody"></tbody>
                    </table>
                  </div>
                </div>
                <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mt-3 tw:mb-0">
                  <i class="fa-regular fa-square-check tw:mr-1" aria-hidden="true"></i>
                  <span data-tours-wizard-target="sessionsFootNote">0 sessions · add at least one to publish.</span>
                </p>
              </div>
            </div>
          </div>
          <!-- ==================== B4 · Questions ==================== -->
          <div class="tw-steps-panel" role="tabpanel" aria-label="Questions" data-tours-wizard-target="panel">
            <!-- 2a · Booking form questions — guided (locked) + custom, one card -->
            <div class="tw-card">
              <div class="tw-card-header tw:flex tw:items-center tw:justify-between tw:gap-3">
                <div>
                  <h3 class="tw-h4 tw-card-title tw:mb-0">Booking form questions</h3>
                  <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mt-0.5 tw:mb-0">The guided fields are collected automatically on every booking. Add your own custom questions with “Add question”.</p>
                </div>
                <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm" data-action="click->tours-wizard#addQuestion">
                  <i class="fa-solid fa-plus tw:mr-1"></i> Add question
                </button>
              </div>
              <div class="tw-card-body">
                <div class="tw-table-responsive">
                  <table class="tw-table tw-table-sm">
                    <thead class="tw:bg-table-header">
                      <tr>
                        <th scope="col">Question</th>
                        <th scope="col">Type</th>
                        <th scope="col">Required</th>
                        <th scope="col"><span class="tw:sr-only">Actions</span></th>
                      </tr>
                    </thead>
                    <tbody data-tours-wizard-target="questionsTbody"></tbody>
                  </table>
                </div>
                <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">These appear on the parent booking page under “A few more details”.</p>
              </div>
            </div>
          </div>
          <!-- ==================== B5 · Reminders (email + SMS) ==================== -->
          <div class="tw-steps-panel" role="tabpanel" aria-label="Reminders" data-tours-wizard-target="panel">
            <div class="tw-card tw:mb-4">
              <div class="tw-card-header">
                <div>
                  <h3 class="tw-h4 tw-card-title tw:mb-0">Reminder channels</h3>
                  <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mt-0.5 tw:mb-0">How families are reminded before their visit.</p>
                </div>
              </div>
              <div class="tw-card-body">
                <div class="tw:flex tw:items-center tw:justify-between tw:gap-3 tw:py-2 tw:border-b tw:border-neutral-translucent-200">
                  <div class="tw:flex tw:items-center tw:gap-2.5">
                    <i class="fa-regular fa-envelope tw:text-primary-600 tw:w-5 tw:text-center" aria-hidden="true"></i>
                    <div>
                      <p class="tw:text-body-s tw:leading-body-s tw:font-medium tw:mb-0">Email</p>
                      <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">Always on — the default confirmation & reminder channel.</p>
                    </div>
                  </div>
                  <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm">Required</span>
                </div>
                <div class="tw:flex tw:items-center tw:justify-between tw:gap-3 tw:py-2">
                  <div class="tw:flex tw:items-center tw:gap-2.5">
                    <i class="fa-regular fa-comment tw:text-primary-600 tw:w-5 tw:text-center" aria-hidden="true"></i>
                    <div>
                      <p class="tw:text-body-s tw:leading-body-s tw:font-medium tw:mb-0">SMS text reminder</p>
                      <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0">Sent to families who give a mobile number.</p>
                    </div>
                  </div>
                  <div class="tw:flex tw:items-center tw:gap-3">
                    <div class="tw:w-40">
                      <select class="tw-form-select tw-form-select-sm" aria-label="SMS reminder timing">
                        <option>24 hours before</option>
                        <option>2 hours before</option>
                        <option>On the morning</option>
                      </select>
                    </div>
                    <span class="tw-form-switch"><input type="checkbox" class="tw-form-check-input" role="switch" aria-label="Enable SMS reminders"></span>
                  </div>
                </div>
                <div class="tw-inline-notification tw-inline-notification-compact tw-inline-notification-warning tw:mt-3" role="note">
                  <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">SMS reminders are charged per message.</p>
                  </div>
                </div>
                <div class="tw-inline-notification tw-inline-notification-compact tw-inline-notification-success tw:mt-2" role="note">
                  <div class="tw-inline-notification-icon"><i class="fa-regular fa-chart-line"></i></div>
                  <div class="tw-inline-notification-content">
                    <p class="tw-inline-notification-message tw:mb-0">Families are far more likely to see a text than an email, so SMS reminders help more of them turn up and reply.</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="tw-card">
              <div class="tw-card-header">
                <div>
                  <h3 class="tw-h4 tw-card-title tw:mb-0">Email templates</h3>
                </div>
              </div>
              <div class="tw-card-body">
                <div class="tw:grid tw:grid-cols-1 tw:lg:grid-cols-4 tw:gap-6">
                  <!-- Template picker -->
                  <div class="tw:lg:border-r tw:lg:border-neutral-translucent-200 tw:lg:pr-6">
                    <p class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:mb-1">Choose a template</p>
                    <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-3">
                      Pick which email to edit. Each has a sensible default — keep it or customise.
                    </p>
                    <div role="tablist" aria-label="Email templates" data-tours-wizard-target="tplList"></div>
                  </div>
                  <!-- Editor -->
                  <div class="tw:lg:col-span-3">
                    <div class="tw:flex tw:items-start tw:justify-between tw:gap-3 tw:mb-1">
                      <div>
                        <p class="tw-h6 tw:text-muted tw:uppercase tw:mb-1">Edit email content</p>
                        <p class="tw:text-body-m tw:leading-body-m tw:font-semibold tw:mb-0">
                          <span data-tours-wizard-target="tplName">Invitation to register</span>
                          <span class="tw-badge tw-badge-sm tw-badge-secondary-subtle tw:ml-2" data-tours-wizard-target="tplBadge">Using default</span>
                        </p>
                        <p class="tw:text-body-xs tw:leading-body-xs tw:text-muted tw:mb-0" data-tours-wizard-target="tplPurpose"></p>
                      </div>
                      <span class="tw:hidden tw:shrink-0" data-tours-wizard-target="tplReset">
                        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm" data-action="click->tours-wizard#resetTemplate">
                          <i class="fa-regular fa-rotate-left tw:mr-1"></i> Reset to default
                        </button>
                      </span>
                    </div>
                    <div class="tw-form-row tw:mb-4 tw:mt-3">
                      <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                        <label class="tw-form-label" for="mw-email-from">From name</label>
                        <input type="text" id="mw-email-from" class="tw-form-control"
                               data-tours-wizard-target="emailFrom" data-action="input->tours-wizard#emailEdited">
                      </div>
                      <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                        <label class="tw-form-label" for="mw-email-replyto">Reply-to email</label>
                        <input type="email" id="mw-email-replyto" class="tw-form-control"
                               data-tours-wizard-target="emailReplyTo" data-action="input->tours-wizard#emailEdited">
                      </div>
                    </div>
                    <div class="tw-form-group">
                      <label class="tw-form-label tw-form-label-required" for="mw-email-subject">Subject</label>
                      <input type="text" id="mw-email-subject" class="tw-form-control" aria-required="true"
                             data-tours-wizard-target="emailSubject" data-action="input->tours-wizard#emailEdited">
                    </div>
                    <div class="tw-form-group">
                      <label class="tw-form-label" for="mw-email-token">Mail merge field</label>
                      <p class="tw-form-text tw:mt-0 tw:mb-2">Use personalisation tokens to mail-merge personalised content into each email.</p>
                      <div class="tw:flex tw:gap-2">
                        <select id="mw-email-token" class="tw-form-select" data-tours-wizard-target="tokenSelect">
                          <option value="">Type here to select token…</option>
                        </select>
                        <button type="button" class="tw-btn tw-btn-primary tw:shrink-0" data-action="click->tours-wizard#insertToken">
                          <i class="fa-solid fa-plus tw:mr-1"></i> Insert field
                        </button>
                      </div>
                    </div>
                    <div class="tw-form-group tw:mb-0">
                      <label class="tw-form-label tw-form-label-required">Content</label>
                      <div class="tw-rte">
                        <div class="tw-rte-toolbar" role="toolbar" aria-label="Formatting options">
                          <div class="tw-rte-toolbar-group" role="group" aria-label="Block format">
                            <button class="tw-rte-toolbar-select" type="button">
                              Paragraph <i class="fa-solid fa-chevron-down tw-rte-toolbar-select-chevron"></i>
                            </button>
                          </div>
                          <div class="tw-rte-toolbar-group" role="group" aria-label="Text formatting">
                            <button class="tw-rte-toolbar-btn" type="button" aria-label="Bold" aria-pressed="false"><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="Underline" aria-pressed="false"><i class="fa-regular fa-underline"></i></button>
                          </div>
                          <div class="tw-rte-toolbar-group" role="group" aria-label="Alignment">
                            <button class="tw-rte-toolbar-btn tw-active" type="button" aria-label="Align left" aria-pressed="true"><i class="fa-regular fa-align-left"></i></button>
                            <button class="tw-rte-toolbar-btn" type="button" aria-label="Align center" aria-pressed="false"><i class="fa-regular fa-align-center"></i></button>
                          </div>
                          <div class="tw-rte-toolbar-group" role="group" aria-label="Insert">
                            <button class="tw-rte-toolbar-btn" type="button" aria-label="Strikethrough"><i class="fa-regular fa-strikethrough"></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="Email body"
                             data-tours-wizard-target="emailBody" data-action="input->tours-wizard#emailEdited"></div>
                        <div class="tw-rte-footer">Please press Shift + Enter for a new line</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- ==================== B5 · Share & embed ==================== -->
          <div class="tw-steps-panel" role="tabpanel" aria-label="Share and embed" data-tours-wizard-target="panel">
            <!-- Creating state -->
            <div class="tw:hidden" data-tours-wizard-target="shareCreating">
              <div class="tw-card tw-card-flat">
                <div class="tw-card-body tw:text-center tw:py-10">
                  <p class="tw:text-body-s tw:leading-body-s tw:text-muted tw:mb-3">Creating your booking page…</p>
                  <div class="tw:max-w-xs tw:mx-auto">
                    <div class="tw-progress tw-progress-indeterminate" role="progressbar" aria-label="Creating booking page">
                      <div class="tw-progress-bar tw-progress-bar-primary"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Ready state -->
            <div data-tours-wizard-target="shareReady">
              <div class="tw-inline-notification tw-inline-notification-compact tw-inline-notification-highlight tw:mb-4" role="note">
                <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">
                    Your tour is built. Share the public link, embed it on your site, or sync bookings
                    to your calendar — then create it. You can revisit all of this later from <strong>Manage type</strong>.
                  </p>
                </div>
              </div>
              <div class="tw-card">
                <div class="tw-card-header">
                  <h3 class="tw-h4 tw-card-title tw:mb-0">Share & embed</h3>
                </div>
                <div class="tw-card-body">
                  <div class="tw-form-group tw:mb-4">
                    <label class="tw-form-label" for="mw-share-link">Public booking link</label>
                    <div class="tw:flex tw:gap-2" data-controller="clipboard">
                      <input type="text" id="mw-share-link" class="tw-form-control" readonly value=""
                             data-tours-wizard-target="linkInput" data-clipboard-target="source">
                      <button type="button" class="tw-btn tw-btn-secondary tw-btn-icon tw:shrink-0" aria-label="Copy public booking link"
                              data-tours-wizard-target="copyLinkBtn" data-action="click->clipboard#copySource">
                        <i class="fa-regular fa-copy" data-clipboard-target="icon" aria-hidden="true"></i>
                      </button>
                      <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span>
                    </div>
                    <p class="tw-form-text">Share this on a "Book a tour" page or send it directly to parents. No account required.</p>
                  </div>
                  <div class="tw-form-group tw:mb-4 tw:pt-4 tw:border-t tw:border-neutral-translucent-200">
                    <span class="tw-form-label">Embed on your website</span>
                    <div class="tw-form-row tw:mb-2">
                      <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                        <label class="tw-form-label tw-form-label-sm" for="mw-embed-w">Width</label>
                        <input type="text" id="mw-embed-w" class="tw-form-control tw-form-control-sm" value="100%"
                               data-tours-wizard-target="embedWidth" data-action="input->tours-wizard#embedChanged">
                      </div>
                      <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                        <label class="tw-form-label tw-form-label-sm" for="mw-embed-h">Height (px)</label>
                        <input type="text" id="mw-embed-h" class="tw-form-control tw-form-control-sm" value="640"
                               data-tours-wizard-target="embedHeight" data-action="input->tours-wizard#embedChanged">
                      </div>
                    </div>
                    <div class="tw-card tw-card-flat tw-card-sm">
                      <div class="tw-card-body tw:flex tw:items-start tw:justify-between tw:gap-2" data-controller="clipboard">
                        <pre class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:whitespace-pre-wrap tw:break-all tw:mb-0"><code data-tours-wizard-target="embedCode" data-clipboard-target="source"></code></pre>
                        <button type="button" class="tw-btn tw-btn-secondary tw-btn-icon tw-btn-sm tw:shrink-0" aria-label="Copy embed code"
                                data-action="click->clipboard#copySource">
                          <i class="fa-regular fa-copy" data-clipboard-target="icon" aria-hidden="true"></i>
                        </button>
                        <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span>
                      </div>
                    </div>
                    <p class="tw-form-text">Paste this iframe into any HTML page (e.g. WordPress, Squarespace, Wix) to embed the booking form on your school site.</p>
                  </div>
                  <div class="tw-form-group tw:mb-0 tw:pt-4 tw:border-t tw:border-neutral-translucent-200">
                    <label class="tw-form-label" for="mw-sync-url">Calendar sync URL</label>
                    <div class="tw:flex tw:gap-2" data-controller="clipboard">
                      <input type="text" id="mw-sync-url" class="tw-form-control" readonly value=""
                             data-tours-wizard-target="syncUrl" data-clipboard-target="source">
                      <button type="button" class="tw-btn tw-btn-secondary tw-btn-icon tw:shrink-0" aria-label="Copy calendar sync URL"
                              data-action="click->clipboard#copySource">
                        <i class="fa-regular fa-copy" data-clipboard-target="icon" aria-hidden="true"></i>
                      </button>
                      <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span>
                    </div>
                    <p class="tw-form-text">Add this URL to Google Calendar or Outlook to receive every confirmed booking in your own calendar.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Wizard footer — DS fixed action bar (matches Create New Survey/Event) -->
        <div data-tours-wizard-target="footer">
          <div class="tw-action-bar">
            <div class="tw-action-bar-start">
              <button type="button" class="tw-btn tw-btn-secondary" disabled data-tours-wizard-target="backBtn" data-action="click->tours-wizard#back">
                <i class="fa-regular fa-arrow-left tw:mr-1"></i> Previous
              </button>
            </div>
            <div class="tw-action-bar-end">
              <span class="tw:text-body-xs tw:leading-body-xs tw:text-danger tw:hidden" data-tours-wizard-target="gateNote">
                Add at least one session before you can publish.
              </span>
              <button type="button" class="tw-btn tw-btn-secondary" data-tours-wizard-target="saveDraftBtn" data-action="click->tours-wizard#saveDraft">
                Save as draft
              </button>
              <span data-tours-wizard-target="nextWrap">
                <button type="button" class="tw-btn tw-btn-primary" data-tours-wizard-target="nextBtn" data-action="click->tours-wizard#next">
                  Next <i class="fa-regular fa-arrow-right tw:ml-1"></i>
                </button>
              </span>
              <span class="tw:hidden" data-tours-wizard-target="createWrap">
                <button type="button" class="tw-btn tw-btn-primary" data-tours-wizard-target="createBtn" data-action="click->tours-wizard#createType">
                  <span data-tours-wizard-target="createBtnLabel">Create tour <i class="fa-regular fa-arrow-right tw:ml-1"></i></span>
                </button>
              </span>
            </div>
          </div>
        </div>
        <!-- Edit-mode action bar -->
        <div class="tw:hidden" data-tours-wizard-target="editBar">
          <div class="tw-action-bar">
            <div class="tw-action-bar-start"></div>
            <div class="tw-action-bar-end">
              <a href="/lookbook/preview/projects/tours/all_tours" class="tw-btn tw-btn-secondary">
                <i class="fa-regular fa-eye tw:mr-1"></i> Preview booking page
              </a>
              <button type="button" class="tw-btn tw-btn-primary" data-action="click->tours-wizard#saveChanges">Save changes</button>
            </div>
          </div>
        </div>
      </div>
      <!-- ============================================
           Success (created)
           ============================================ -->
      <div class="tw:hidden" data-tours-wizard-target="successWrap">
        <div class="tw-card">
          <div class="tw-card-body tw:text-center tw:py-12">
            <div class="tw:flex tw:justify-center tw:mb-4">
              <div class="tw-avatar tw-avatar-xl tw-avatar-green"><i class="fa-regular fa-circle-check"></i></div>
            </div>
            <h2 class="tw-h3 tw:mb-1">Tour created</h2>
            <p class="tw:text-body-m tw:leading-body-m tw:mb-6 tw:max-w-lg tw:mx-auto">
              <strong data-tours-wizard-target="successName">Individual tours</strong>
              <span class="tw:text-neutral-600" data-tours-wizard-target="successMeta"> is now live. Parents can book it from the public link or your embedded form. You'll be notified each time someone registers.</span>
            </p>
            <input type="hidden" id="mw-success-link" value="" data-tours-wizard-target="successLink">
            <div class="tw:flex tw:justify-center tw:gap-2">
              <span data-controller="clipboard" data-clipboard-source-value="#mw-success-link">
                <button type="button" class="tw-btn tw-btn-secondary" data-action="click->clipboard#copy"
                  aria-label="Copy public booking link">
                  <i class="fa-regular fa-copy tw:mr-1" data-clipboard-target="icon" aria-hidden="true"></i> Copy public link
                </button>
                <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span>
              </span>
              <a href="/lookbook/preview/projects/tours/all_tours" class="tw-btn tw-btn-primary">Go to Tours page</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <!-- Toast region — utility-composed container so toasts clear the fixed action bar
       (DS gap: tw-toast-container pins bottom-4 and collides with tw-action-bar) -->
  <div data-controller="toast">
    <div class="tw:fixed tw:bottom-24 tw:left-1/2 tw:-translate-x-1/2 tw:flex tw:flex-col-reverse tw:gap-3 tw:pointer-events-none tw:z-50"
         data-tours-wizard-target="toastContainer"></div>
  </div>
</div>