<div class="tw:flex tw:min-h-screen tw:bg-background">
  <!-- ============================================
       MAT+ Sidebar (text-based, ~240px)
       ============================================ -->
  <aside class="tw:fixed tw:inset-y-0 tw:left-0 tw:w-60 tw:bg-primary tw:flex tw:flex-col tw:z-50" aria-label="MAT+ sidebar">
    <!-- Logo (h-16 = 64px to match topbar) -->
    <div class="tw:flex tw:items-center tw:gap-3 tw:px-5 tw:h-16 tw:border-b tw:border-primary-400/30 tw:shrink-0">
      <div class="tw:w-9 tw:h-9 tw:rounded-lg tw:bg-neutral-0/20 tw:flex tw:items-center tw:justify-center tw:text-neutral-0 fw-bold tw:text-body-s tw:leading-body-s tw:shrink-0">A+</div>
      <div>
        <div class="fw-semibold tw:text-body-s tw:leading-body-s tw:text-neutral-0">MAT Management+</div>
        <div class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-0/70">Interactive Demo</div>
      </div>
    </div>
    <!-- Navigation -->
    <nav class="tw:flex-1 tw:overflow-y-auto tw:py-3" aria-label="MAT+ navigation">
      <!-- MAIN section -->
      <div class="tw:px-5 tw:py-2 tw:text-indicator tw:leading-indicator fw-semibold tw:text-neutral-0/70 tw:uppercase tw:tracking-wider">Main</div>
      <a href="#" class="tw:flex tw:items-center tw:gap-3 tw:px-5 tw:py-2.5 tw:text-body-s tw:leading-body-s tw:text-neutral-0/80 tw:hover:bg-neutral-0/10 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-neutral-0/50 tw:focus-visible:rounded-lg tw:transition-colors tw:duration-150">
        <i class="fa-regular fa-chart-line tw:w-5 tw:text-center"></i>
        <span>Insights</span>
      </a>
      <a href="#" class="tw:flex tw:items-center tw:gap-3 tw:px-5 tw:py-2.5 tw:text-body-s tw:leading-body-s tw:text-neutral-0/80 tw:hover:bg-neutral-0/10 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-neutral-0/50 tw:focus-visible:rounded-lg tw:transition-colors tw:duration-150">
        <i class="fa-regular fa-address-book tw:w-5 tw:text-center"></i>
        <span>Contact and Enquiries</span>
      </a>
      <!-- Active item -->
      <a href="#" class="tw:flex tw:items-center tw:gap-3 tw:mx-3 tw:px-3 tw:py-2.5 tw:text-body-s tw:leading-body-s tw:rounded-lg tw:bg-neutral-0/20 tw:text-neutral-0 fw-medium tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-neutral-0/50" aria-current="page">
        <i class="fa-regular fa-calendar-days tw:w-5 tw:text-center"></i>
        <span>Events</span>
      </a>
      <!-- COMMUNICATIONS section -->
      <div class="tw:px-5 tw:pt-5 tw:pb-2 tw:text-indicator tw:leading-indicator fw-semibold tw:text-neutral-0/70 tw:uppercase tw:tracking-wider">Communications</div>
      <a href="#" class="tw:flex tw:items-center tw:gap-3 tw:px-5 tw:py-2.5 tw:text-body-s tw:leading-body-s tw:text-neutral-0/80 tw:hover:bg-neutral-0/10 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-neutral-0/50 tw:focus-visible:rounded-lg tw:transition-colors tw:duration-150">
        <i class="fa-regular fa-file-lines tw:w-5 tw:text-center"></i>
        <span>Forms & Surveys</span>
      </a>
      <a href="#" class="tw:flex tw:items-center tw:gap-3 tw:px-5 tw:py-2.5 tw:text-body-s tw:leading-body-s tw:text-neutral-0/80 tw:hover:bg-neutral-0/10 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-neutral-0/50 tw:focus-visible:rounded-lg tw:transition-colors tw:duration-150">
        <i class="fa-regular fa-envelope tw:w-5 tw:text-center"></i>
        <span>Comms Templates</span>
      </a>
      <!-- ADMISSIONS section -->
      <div class="tw:px-5 tw:pt-5 tw:pb-2 tw:text-indicator tw:leading-indicator fw-semibold tw:text-neutral-0/70 tw:uppercase tw:tracking-wider">Admissions</div>
      <a href="#" class="tw:flex tw:items-center tw:gap-3 tw:px-5 tw:py-2.5 tw:text-body-s tw:leading-body-s tw:text-neutral-0/80 tw:hover:bg-neutral-0/10 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-neutral-0/50 tw:focus-visible:rounded-lg tw:transition-colors tw:duration-150">
        <i class="fa-regular fa-building-columns tw:w-5 tw:text-center"></i>
        <span>Centralised Admissions</span>
      </a>
      <a href="#" class="tw:flex tw:items-center tw:gap-3 tw:px-5 tw:py-2.5 tw:text-body-s tw:leading-body-s tw:text-neutral-0/80 tw:hover:bg-neutral-0/10 tw:focus-visible:outline-none tw:focus-visible:ring-2 tw:focus-visible:ring-neutral-0/50 tw:focus-visible:rounded-lg tw:transition-colors tw:duration-150">
        <i class="fa-regular fa-users-gear tw:w-5 tw:text-center"></i>
        <span>Team Management</span>
      </a>
    </nav>
  </aside>
  <!-- ============================================
       Main Content Area (offset by sidebar)
       ============================================ -->
  <div class="tw:ml-60 tw:flex-1 tw:min-w-0 tw:flex tw:flex-col">
    <!-- ============================================
         MAT+ Topbar
         ============================================ -->
    <header class="tw:sticky tw:top-0 tw:z-40 tw:flex tw:items-center tw:justify-between tw:h-16 tw:px-6 tw:bg-neutral-0 tw:border-b tw:border-neutral-200" role="banner">
      <!-- Left: Trust identity -->
      <div class="tw:flex tw:items-center tw:gap-3">
        <div class="tw:w-10 tw:h-10 tw:rounded-lg tw:bg-neutral-100 tw:flex tw:items-center tw:justify-center tw:text-neutral-400 tw:shrink-0">
          <i class="fa-regular fa-building tw:text-lg" aria-hidden="true"></i>
        </div>
        <div>
          <div class="fw-bold tw:text-body-m tw:leading-body-m tw:text-neutral-900">Demo School Trust</div>
          <div class="tw:hidden tw:md:block tw:text-body-xs tw:leading-body-xs text-muted">39 Schools • 4 Regions • 30,000+ Students</div>
        </div>
      </div>
      <!-- Right: Search + action buttons + notifications + avatar -->
      <div class="tw-topbar-right">
        <!-- Search -->
        <div class="tw:hidden tw:lg:flex tw-topbar-search">
          <div class="tw-input-group tw-has-icon-start">
            <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i>
            <input type="search" class="tw-form-control" placeholder="Search for events, settings..." aria-label="Search">
          </div>
        </div>
        <!-- Action Buttons -->
        <button type="button" class="tw-btn tw-btn-outline-success tw-btn-multiline tw:hidden tw:xl:inline-flex" data-controller="tooltip" data-tooltip-content-value="Referral Program" data-tooltip-placement-value="bottom">
          <i class="fa-solid fa-gift tw-icon-16"></i>
          Refer<br>
           & Save
        </button>
        <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline tw:hidden tw:xl:inline-flex" data-controller="tooltip" data-tooltip-content-value="Discuss Ideas & Submit Feature Requests" data-tooltip-placement-value="bottom">
          <i class="fa-solid fa-users tw-icon-16"></i>
          Applicaa<br>
           Community
        </button>
        <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline tw:hidden tw:xl:inline-flex" data-controller="tooltip" data-tooltip-content-value="Support & Feature Requests" data-tooltip-placement-value="bottom">
          <i class="fa-solid fa-comment-question tw-icon-16"></i>
          Support<br>
           & Requests
        </button>
        <div class="tw-topbar-action-icons">
          <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-topbar-notification-btn" aria-label="Notifications" data-controller="tooltip" data-tooltip-content-value="Notification" data-tooltip-placement-value="bottom">
            <i class="fa-solid fa-bell tw-icon-16"></i>
          </button>
        </div>
        <div class="tw-topbar-divider"></div>
        <!-- User Avatar Dropdown -->
        <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown">
          <button type="button" class="tw-dropdown-trigger tw-topbar-avatar"
                  aria-label="User menu"
                  aria-haspopup="true"
                  aria-expanded="false"
                  data-dropdown-target="trigger"
                  data-action="click->dropdown#toggle keydown->dropdown#keydown">
            <div class="tw-avatar tw-avatar-primary" role="img" aria-label="Jane Doe">
              <span>JD</span>
            </div>
          </button>
          <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
            <div class="tw-dropdown-header">John Doe</div>
            <div class="tw-dropdown-divider"></div>
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <i class="fa-regular fa-circle-sterling tw-dropdown-item-icon"></i>
              <span class="tw-dropdown-item-text">Referrals & billing</span>
            </button>
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <i class="fa-regular fa-lock tw-dropdown-item-icon"></i>
              <span class="tw-dropdown-item-text">Password & security</span>
            </button>
            <div class="tw-dropdown-divider"></div>
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <i class="fa-regular fa-layer-group tw-dropdown-item-icon"></i>
              <span class="tw-dropdown-item-text">Multiple form</span>
            </button>
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <i class="fa-regular fa-envelope tw-dropdown-item-icon"></i>
              <span class="tw-dropdown-item-text">Email preferences</span>
            </button>
            <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
              <i class="fa-regular fa-right-from-bracket tw-dropdown-item-icon"></i>
              <span class="tw-dropdown-item-text">Logout</span>
            </button>
          </div>
        </div>
      </div>
    </header>
    <!-- ============================================
         Page Content — Create New Event Wizard
         ============================================ -->
    <main class="tw:flex-1 tw:min-w-0 tw:bg-background tw:flex tw:flex-col">
      <div class="tw-container-fluid tw:pb-6">
        <!-- New Ticket Popup -->
        <div id="newTicketPopupController" data-controller="popup" class="tw:contents">
          <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
          <div class="tw-popup-panel tw-popup-lg" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="newTicketPopupTitle">
            <div class="tw-popup-header">
              <h3 class="tw-popup-header-title" id="newTicketPopupTitle">New Ticket</h3>
              <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->popup#close"><i class="fa-regular fa-xmark"></i></button>
            </div>
            <div class="tw-popup-body">
              <div class="tw-form-group">
                <label class="tw-form-label tw-form-label-required">Ticket name</label>
                <input type="text" class="tw-form-control" placeholder="e.g. General Admission, VIP...">
              </div>
              <div id="popupDateTimeFields" class="tw:hidden">
                <div class="tw-form-row">
                  <div class="tw-form-group tw-form-group-col-6">
                    <label class="tw-form-label tw-form-label-required">Start date</label>
                    <input type="date" class="tw-form-control" value="2026-04-15">
                  </div>
                  <div class="tw-form-group tw-form-group-col-6">
                    <label class="tw-form-label tw-form-label-required">Start time</label>
                    <input type="time" class="tw-form-control" value="09:00">
                  </div>
                </div>
                <div class="tw-form-row">
                  <div class="tw-form-group tw-form-group-col-6">
                    <label class="tw-form-label">End date</label>
                    <input type="date" class="tw-form-control" value="2026-04-15">
                  </div>
                  <div class="tw-form-group tw-form-group-col-6">
                    <label class="tw-form-label tw-form-label-required">End time</label>
                    <input type="time" class="tw-form-control" value="17:00">
                  </div>
                </div>
              </div>
              <div class="tw-form-group">
                <label class="tw-form-label tw-form-label-required">Available quantity</label>
                <input type="number" class="tw-form-control" value="100">
              </div>
              <div class="tw-form-row">
                <div class="tw-form-group tw-form-group-col-6">
                  <label class="tw-form-label tw-form-label-required">Min quantity per booking</label>
                  <input type="number" class="tw-form-control" value="1">
                </div>
                <div class="tw-form-group tw-form-group-col-6">
                  <label class="tw-form-label tw-form-label-required">Max quantity per booking</label>
                  <input type="number" class="tw-form-control" value="10">
                </div>
              </div>
              <div class="tw-form-group">
                <label class="tw-form-label">Description</label>
                <textarea class="tw-form-control" rows="3" placeholder="Add more details to your ticket like sponsors, or featured guests..."></textarea>
              </div>
              <div class="tw-form-group">
                <label class="tw-form-label">Fully booked message</label>
                <input type="text" class="tw-form-control" value="No more tickets are available. Please contact us!">
              </div>
              <div class="tw-form-check">
                <input type="checkbox" id="addDisplayRemaining" class="tw-form-check-input" checked>
                <label for="addDisplayRemaining" class="tw-form-check-label">Display number of tickets remaining</label>
              </div>
            </div>
            <div class="tw-popup-footer">
              <button type="button" class="tw-btn tw-btn-secondary" data-action="click->popup#close">Cancel</button>
              <button type="button" class="tw-btn tw-btn-primary" onclick="addTicketAndClose()">Save</button>
            </div>
          </div>
          <button id="triggerNewTicketPopup" class="tw:hidden" data-action="click->popup#show" aria-hidden="true"></button>
        </div>
        <!-- Page Header — DS-aligned (.tw-page-header) -->
        <div class="tw-page-header tw-page-header-borderless">
          <div class="tw-page-header-main">
            <a href="#" class="tw-page-header-back" aria-label="Back to Events" onclick="event.preventDefault();">
              <i class="fa-solid fa-chevron-left tw-page-header-back-icon"></i>
            </a>
            <div class="tw-page-header-title-group">
              <h1 class="tw-page-header-title">Create New Event</h1>
              <span class="tw-page-header-subtitle">Configure your event settings</span>
            </div>
          </div>
        </div>
        <div class="tw-steps" id="addEventSteps" data-controller="steps" data-steps-index-value="0" data-steps-linear-value="false">
          <!-- Sentinel for JS-based sticky steps header -->
          <div id="stepsHeaderSentinel"></div>
          <!-- Horizontal step indicators -->
          <div class="tw-steps-header" id="stepsHeaderEl" role="tablist">
            <div class="tw-step tw-active" role="tab" aria-selected="true" tabindex="0" data-steps-target="step" data-action="click->steps#goTo keydown->steps#keydown">
              <div class="tw-step-indicator">1</div>
              <div class="tw-step-label">Event Details</div>
            </div>
            <div class="tw-step" role="tab" aria-selected="false" tabindex="-1" data-steps-target="step" data-action="click->steps#goTo keydown->steps#keydown">
              <div class="tw-step-indicator">2</div>
              <div class="tw-step-label">Tickets & Capacity</div>
            </div>
            <div class="tw-step" role="tab" aria-selected="false" tabindex="-1" data-steps-target="step" data-action="click->steps#goTo keydown->steps#keydown">
              <div class="tw-step-indicator">3</div>
              <div class="tw-step-label">Visibility</div>
            </div>
            <div class="tw-step" role="tab" aria-selected="false" tabindex="-1" data-steps-target="step" data-action="click->steps#goTo keydown->steps#keydown">
              <div class="tw-step-indicator">4</div>
              <div class="tw-step-label">Email & Questions</div>
            </div>
            <div class="tw-step" role="tab" aria-selected="false" tabindex="-1" data-steps-target="step" data-action="click->steps#goTo keydown->steps#keydown">
              <div class="tw-step-indicator">5</div>
              <div class="tw-step-label">Registration Pipeline</div>
            </div>
            <div class="tw-step" role="tab" aria-selected="false" tabindex="-1" data-steps-target="step" data-action="click->steps#goTo keydown->steps#keydown">
              <div class="tw-step-indicator">6</div>
              <div class="tw-step-label">Review & Save</div>
            </div>
          </div>
          <!-- Step Content Panels -->
          <div class="tw-steps-content tw:pb-20">
            <!-- ==================== Step 1: Event Details ==================== -->
            <div class="tw-steps-panel tw-active" role="tabpanel" data-steps-target="panel">
              <div class="tw-card">
                <div class="tw-card-header">
                  <h3 class="tw-h4 tw-card-title tw:mb-0">Event Details</h3>
                </div>
                <div class="tw-card-body">
                  <div class="tw-form-row">
                    <div class="tw-form-group tw-form-group-col-6">
                      <label for="addEventName" class="tw-form-label tw-form-label-required">Event Name</label>
                      <input type="text" id="addEventName" class="tw-form-control" placeholder="e.g., Open Evening" aria-required="true">
                      <div class="tw-form-text tw:mt-1">This will be visible to parents on the registration page</div>
                    </div>
                    <div class="tw-form-group tw-form-group-col-6">
                      <label for="addEventType" class="tw-form-label tw-form-label-required">Event Type</label>
                      <select id="addEventType" class="tw-form-select">
                        <option value="">Select event type</option>
                        <option>Open Evening</option>
                        <option>Open Morning</option>
                        <option>Open Day</option>
                        <option>School Tour</option>
                        <option>Stay & Play</option>
                        <option>Taster Day</option>
                        <option>Info Evening</option>
                        <option>Virtual Event</option>
                      </select>
                      <div class="tw-form-text tw:mt-1">Choose the category that best describes this event</div>
                    </div>
                  </div>
                  <div class="tw-form-row">
                    <div class="tw-form-group tw-form-group-col-6">
                      <label class="tw-form-label tw-form-label-required">Start Date & Time</label>
                      <div class="tw:flex tw:gap-2">
                        <input type="date" class="tw-form-control" value="2025-01-25" aria-required="true" aria-label="Start date">
                        <input type="time" class="tw-form-control" value="17:00" aria-required="true" aria-label="Start time">
                      </div>
                    </div>
                    <div class="tw-form-group tw-form-group-col-6">
                      <label class="tw-form-label tw-form-label-required">End Date & Time</label>
                      <div class="tw:flex tw:gap-2">
                        <input type="date" class="tw-form-control" value="2025-01-25" aria-required="true" aria-label="End date">
                        <input type="time" class="tw-form-control" value="19:00" aria-required="true" aria-label="End time">
                      </div>
                    </div>
                  </div>
                  <div class="tw-form-group">
                    <label for="addEventLocation" class="tw-form-label tw-form-label-optional">Location</label>
                    <input type="text" id="addEventLocation" class="tw-form-control" placeholder="e.g., Main Hall, Building A">
                  </div>
                  <div class="tw-form-group">
                    <label class="tw-form-label tw-form-label-optional">Description</label>
                    <div class="tw-rte">
                      <div class="tw-rte-toolbar">
                        <div class="tw-rte-toolbar-group">
                          <button class="tw-rte-toolbar-btn" type="button" aria-label="Bold"><i class="fa-solid fa-bold"></i></button>
                          <button class="tw-rte-toolbar-btn" type="button" aria-label="Italic"><i class="fa-solid fa-italic"></i></button>
                          <button class="tw-rte-toolbar-btn" type="button" aria-label="Align"><i class="fa-solid fa-align-left"></i></button>
                        </div>
                      </div>
                      <div class="tw-rte-content" contenteditable="true">
                        <p>We warmly invite you to our Open Evening to tour facilities, meet staff and learn about our curriculum.</p>
                      </div>
                    </div>
                  </div>
                  <div class="tw-form-group">
                    <label class="tw-form-label tw-form-label-optional">Event Image</label>
                    <div class="tw-file-upload" data-controller="file-upload">
                      <div class="tw-file-upload-dropzone" data-file-upload-target="dropzone" data-action="click->file-upload#openFilePicker dragover->file-upload#dragOver dragleave->file-upload#dragLeave drop->file-upload#drop">
                        <input type="file" class="tw:hidden" accept="image/*" data-file-upload-target="input" data-action="change->file-upload#handleFiles">
                        <div class="tw-file-upload-dropzone-icon"><i class="fa-regular fa-cloud-arrow-up"></i></div>
                        <div class="tw-file-upload-dropzone-text">
                          <span class="tw:text-primary fw-semibold">Click to upload</span> or drag and drop
                        </div>
                        <div class="tw-file-upload-dropzone-hint">PNG, JPG or GIF (max. 2MB, recommended 1200×630px)</div>
                      </div>
                      <div class="tw-file-upload-list" data-file-upload-target="fileList"></div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Staff Notifications — separate card -->
              <div class="tw-card tw:mt-4">
                <div class="tw-card-header">
                  <h3 class="tw-h4 tw-card-title tw:mb-0">Staff Notifications</h3>
                </div>
                <div class="tw-card-body">
                  <p class="text-muted tw:mb-3">Select which staff roles to notify when this event is published.</p>
                  <div class="tw-form-check">
                    <input type="checkbox" id="addNotifyKeyContact" class="tw-form-check-input" checked>
                    <label for="addNotifyKeyContact" class="tw-form-check-label">Key contact at each school<span class="tw-form-text tw:block tw:mt-1">Primary point of contact for event coordination</span></label>
                  </div>
                  <div class="tw-form-check">
                    <input type="checkbox" id="addNotifyMarketing" class="tw-form-check-input" checked>
                    <label for="addNotifyMarketing" class="tw-form-check-label">Marketing contact at each school<span class="tw-form-text tw:block tw:mt-1">Responsible for event promotion and communications</span></label>
                  </div>
                  <div class="tw-form-check">
                    <input type="checkbox" id="addNotifyAdmissions" class="tw-form-check-input">
                    <label for="addNotifyAdmissions" class="tw-form-check-label">Admissions lead at each school<span class="tw-form-text tw:block tw:mt-1">Manages applicant enquiries and registrations</span></label>
                  </div>
                  <p class="tw-form-text tw:mt-2">Staff will also be notified when events are cancelled or rescheduled.</p>
                </div>
              </div>
              <!-- Registration Notifications — separate card -->
              <div class="tw-card tw:mt-4">
                <div class="tw-card-header">
                  <h3 class="tw-h4 tw-card-title tw:mb-0">Registration Notifications</h3>
                </div>
                <div class="tw-card-body">
                  <div class="tw-form-group">
                    <label class="tw-form-label">Notify staff when a registration is received</label>
                    <div class="tw:relative">
                      <div class="tw-tag-input" id="s1RegNotifyInput" data-controller="tag-input"
                             data-action="click->tag-input#focus" onclick="toggleRegNotifyDropdown(true)">
                        <div class="tw-tag-input-tags">
                          <span class="tw-tag" data-tag-input-target="tag" data-value="events@demoacademy.org">
                            events@demoacademy.org
                            <button class="tw-tag-close" type="button" aria-label="Remove events@demoacademy.org"
                                      data-action="click->tag-input#removeTag">
                              <i class="fa-regular fa-xmark"></i>
                            </button>
                          </span>
                          <span class="tw-tag" data-tag-input-target="tag" data-value="admissions@demoacademy.org">
                            admissions@demoacademy.org
                            <button class="tw-tag-close" type="button" aria-label="Remove admissions@demoacademy.org"
                                      data-action="click->tag-input#removeTag">
                              <i class="fa-regular fa-xmark"></i>
                            </button>
                          </span>
                          <input class="tw-tag-input-field" type="text" placeholder="Select email addresses"
                                   data-tag-input-target="input"
                                   data-action="keydown->tag-input#keydown"
                          aria-label="Add email address"
                          onfocus="toggleRegNotifyDropdown(true)"
                          oninput="filterRegNotifyDropdown(this.value)">
                        </div>
                        <div class="tw-tag-input-chevron">
                          <i class="fa-regular fa-chevron-down"></i>
                        </div>
                      </div>
                      <div id="s1RegNotifyDropdown" class="tw-dropdown-menu tw-dropdown-menu-scrollable tw:w-full" role="listbox">
                        <button type="button" class="tw-dropdown-item" role="option" onclick="addRegNotifyEmail(this, 'abcdef@test.com')">abcdef@test.com</button>
                        <button type="button" class="tw-dropdown-item" role="option" onclick="addRegNotifyEmail(this, 'andy@dummyemail.com')">andy@dummyemail.com</button>
                        <button type="button" class="tw-dropdown-item" role="option" onclick="addRegNotifyEmail(this, 'bf01@eastburyschool.co.uk')">bf01@eastburyschool.co.uk</button>
                        <button type="button" class="tw-dropdown-item" role="option" onclick="addRegNotifyEmail(this, 'buihuy.vn90@gmail.com')">buihuy.vn90@gmail.com</button>
                        <button type="button" class="tw-dropdown-item" role="option" onclick="addRegNotifyEmail(this, 'buihuytlhp@gmail.com')">buihuytlhp@gmail.com</button>
                        <button type="button" class="tw-dropdown-item" role="option" onclick="addRegNotifyEmail(this, 'cesc1102@gmail.com')">cesc1102@gmail.com</button>
                        <button type="button" class="tw-dropdown-item" role="option" onclick="addRegNotifyEmail(this, 'cuongnm53@gmail.com')">cuongnm53@gmail.com</button>
                        <button type="button" class="tw-dropdown-item" role="option" onclick="addRegNotifyEmail(this, 'hanhtt.301095@gmail.com')">hanhtt.301095@gmail.com</button>
                      </div>
                    </div>
                    <div class="tw-form-text tw:mt-1">Select one or more staff members to receive registration notifications for this event</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- ==================== Step 2: Tickets & Capacity ==================== -->
            <div class="tw-steps-panel" role="tabpanel" data-steps-target="panel">
              <div class="tw-card">
                <div class="tw-card-header">
                  <h3 class="tw-h4 tw-card-title tw:mb-0">Tickets & Capacity</h3>
                </div>
                <div class="tw-card-body">
                  <div class="tw-form-row">
                    <div class="tw-form-group tw-form-group-col-6">
                      <label for="addMaxAttendees" class="tw-form-label tw-form-label-required">Maximum Attendees</label>
                      <input type="number" id="addMaxAttendees" class="tw-form-control" value="120" aria-required="true">
                      <div class="tw-form-text tw:mt-1">Set to 0 for unlimited capacity</div>
                    </div>
                    <div class="tw-form-group tw-form-group-col-6">
                      <label for="addPerRegLimit" class="tw-form-label tw-form-label-optional">Per-Registration Limit</label>
                      <div class="tw:flex tw:items-center tw:gap-2">
                        <input type="number" id="addPerRegLimit" class="tw-form-control" value="4">
                        <i class="fa-regular fa-circle-info tw:text-blue-500 tw:cursor-help" data-controller="tooltip" data-tooltip-content-value="To allow an unlimited number of attendees per registration, please set this value to 0" data-tooltip-placement-value="top" tabindex="0"></i>
                      </div>
                      <div class="tw-form-text tw:mt-1">Max guests per registration</div>
                    </div>
                  </div>
                  <div class="tw-form-section">
                    <h4 class="tw-form-section-title">Registration</h4>
                    <div class="tw-form-check">
                      <input type="checkbox" id="addSelfRegistration" class="tw-form-check-input" checked>
                      <label for="addSelfRegistration" class="tw-form-check-label">Allow self-registration
                        <i class="fa-regular fa-circle-info tw:text-blue-500 tw:cursor-help tw:ml-1" data-controller="tooltip" data-tooltip-content-value="Tick to allow known users to register themselves using the public URL link for this event" data-tooltip-placement-value="top" tabindex="0"></i>
                        <span class="tw-form-text tw:block tw:mt-1">Allow known users to register themselves using the public URL link for this event</span></label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tw-card tw:mt-4">
                <div class="tw-card-header">
                  <h3 class="tw-h4 tw-card-title tw:mb-0">Ticket Types</h3>
                </div>
                <div class="tw-card-body">
                  <div class="tw-form-switch tw:mb-3">
                    <input type="checkbox" id="addMultipleTickets" class="tw-form-check-input" onchange="toggleSection(this, 'ticketTypesConfig')">
                    <label for="addMultipleTickets" class="tw-form-check-label">Enable multiple ticket types
                      <i class="fa-regular fa-circle-info tw:text-blue-500 tw:cursor-help tw:ml-1" data-controller="tooltip" data-tooltip-content-value="Tick if the event will have more than one ticket or if you want to add details to the default ticket" data-tooltip-placement-value="top" tabindex="0"></i>
                    </label>
                  </div>
                  <div id="ticketTypesConfig" class="tw:hidden">
                    <div class="tw-form-check tw:mb-3">
                      <input type="checkbox" id="ticketsOwnDateTime" class="tw-form-check-input" onchange="toggleTicketTimeCols()">
                      <label for="ticketsOwnDateTime" class="tw-form-check-label">
                        Tickets have their own date & time
                        <i class="fa-regular fa-circle-info tw:text-blue-500 tw:cursor-help tw:ml-1" data-controller="tooltip" data-tooltip-content-value="Leave this unticked for tickets to use the same date and time as the main event. Tick if tickets will have their own date and time (within the range specified in the main event)" data-tooltip-placement-value="top" tabindex="0"></i>
                      </label>
                    </div>
                    <div class="tw-table-responsive tw:mb-3">
                      <table class="tw-table tw-table-bordered" id="ticketTypesTable">
                        <thead>
                          <tr>
                            <th>Name</th>
                            <th class="ticket-time-col tw:hidden tw:w-36">Start</th>
                            <th class="ticket-time-col tw:hidden tw:w-36">End</th>
                            <th class="tw:w-28">Quantity</th>
                            <th class="tw-table-cell-actions"></th>
                          </tr>
                        </thead>
                        <tbody id="ticketTypesBody">
                          <tr>
                            <td>General Admission</td>
                            <td class="ticket-time-col tw:hidden">15/04/2026 09:00</td>
                            <td class="ticket-time-col tw:hidden">15/04/2026 17:00</td>
                            <td>Unlimited</td>
                            <td class="tw-table-cell-actions">
                              <button type="button" class="tw-btn tw-btn-icon tw-btn-sm tw-btn-danger" aria-label="Remove ticket type"><i class="fa-regular fa-trash-can"></i></button>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm" id="addTicketTypeBtn" onclick="document.getElementById('triggerNewTicketPopup').click()"><i class="fa-regular fa-plus tw:mr-1"></i> Add Ticket Type</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- ==================== Step 3: Visibility ==================== -->
            <div class="tw-steps-panel" role="tabpanel" data-steps-target="panel">
              <div class="tw:space-y-4">
                <!-- Card 1: Application Forms -->
                <div class="tw-card">
                  <div class="tw-card-body">
                    <h3 class="tw-form-section-title">Which forms does this event relate to?</h3>
                    <div class="tw-form-group">
                      <label class="tw-form-label">Apply for <span class="text-danger">*</span></label>
                      <div class="tw:relative">
                        <div class="tw-tag-input" id="s3ApplyForInput" data-controller="tag-input" data-action="click->tag-input#focus" onclick="toggleApplyForDropdown(true)">
                          <div class="tw-tag-input-tags">
                            <span class="tw-tag tw-tag-secondary-soft" data-tag-input-target="tag" data-value="Year 7 Main Entry 2025/2026">
                              Year 7 Main Entry 2025/2026
                              <button type="button" class="tw-tag-close" aria-label="Remove Year 7 Main Entry 2025/2026" data-action="click->tag-input#removeTag" onclick="onApplyForTagRemoved()"><i class="fa-regular fa-xmark"></i></button>
                            </span>
                            <input type="text" class="tw-tag-input-field" placeholder="Select application form"
                                     data-tag-input-target="input"
                                     data-action="keydown->tag-input#keydown"
                            aria-label="Add an application form"
                            onfocus="toggleApplyForDropdown(true)"
                            oninput="filterApplyForDropdown(this.value)">
                          </div>
                          <span class="tw-tag-input-chevron"><i class="fa-regular fa-chevron-down"></i></span>
                        </div>
                        <!-- Dropdown options list -->
                        <div id="s3ApplyForDropdown" class="tw-dropdown-menu tw-dropdown-menu-scrollable tw:w-full" role="listbox">
                          <button type="button" class="tw-dropdown-item" role="option" onclick="addApplyForForm(this, 'Year 7 (2026/2027, Year 7 Data Collection)')">Year 7 (2026/2027, Year 7 Data Collection)</button>
                          <button type="button" class="tw-dropdown-item" role="option" onclick="addApplyForForm(this, 'Y9 Options GA (2026/2027, GCSE Options Choices)')">Y9 Options GA (2026/2027, GCSE Options Choices)</button>
                          <button type="button" class="tw-dropdown-item" role="option" onclick="addApplyForForm(this, 'Sixth Form Application (2026/2027, Sixth Form Application)')">Sixth Form Application (2026/2027, Sixth Form Application)</button>
                          <button type="button" class="tw-dropdown-item" role="option" onclick="addApplyForForm(this, 'Test - Joyce (2026/2027, Sixth Form Application)')">Test - Joyce (2026/2027, Sixth Form Application)</button>
                          <button type="button" class="tw-dropdown-item" role="option" onclick="addApplyForForm(this, 'Data+ (2025/2026, Data Collection)')">Data+ (2025/2026, Data Collection)</button>
                          <button type="button" class="tw-dropdown-item" role="option" onclick="addApplyForForm(this, '111122 (2023/2024, 2024/2025, Year 7 Data Collection)')">111122 (2023/2024, 2024/2025, Year 7 Data Collection)</button>
                          <button type="button" class="tw-dropdown-item" role="option" onclick="addApplyForForm(this, 'Year 7 Test Marianne (2025/2026, Year 7 Data Collection)')">Year 7 Test Marianne (2025/2026, Year 7 Data Collection)</button>
                          <button type="button" class="tw-dropdown-item" role="option" onclick="addApplyForForm(this, 'Year 7 with SIF (2026/2027, Faith School SI Collection)')">Year 7 with SIF (2026/2027, Faith School SI Collection)</button>
                        </div>
                      </div>
                      <div class="tw-form-text tw:mt-1">Select which application forms this event will appear on</div>
                    </div>
                    <!-- ApplicaaOne checkbox — shown when Year 12/Sixth Form is selected -->
                    <div id="s3ApplicaaOneRow" class="tw:mt-3" style="display:none;">
                      <div class="tw-form-check">
                        <input type="checkbox" id="s3PublishApplicaaOne" class="tw-form-check-input">
                        <label for="s3PublishApplicaaOne" class="tw-form-check-label">
                          This is a public event, publish this event to <a href="https://applicaaone.com/public_events" target="_blank" class="tw:text-blue-500 tw:underline fw-semibold">ApplicaaOne</a>
                          <i class="fa-regular fa-circle-info tw:text-blue-500 tw:cursor-help tw:ml-1" data-controller="tooltip" data-tooltip-content-value="Maximise the reach of your event to local applicants by publishing it on ApplicaaOne." data-tooltip-placement-value="top" tabindex="0"></i>
                        </label>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Card 2: Show the event form -->
                <div class="tw-card">
                  <div class="tw-card-body">
                    <h3 class="tw-form-section-title">Show the event form</h3>
                    <div class="tw:grid tw:grid-cols-2 tw:gap-6">
                      <!-- Left column: location checkboxes -->
                      <div class="tw:space-y-2">
                        <div class="tw-form-check">
                          <input type="checkbox" id="addShowLogin" class="tw-form-check-input" checked>
                          <label for="addShowLogin" class="tw-form-check-label">Login page for related forms</label>
                        </div>
                        <div class="tw-form-check">
                          <input type="checkbox" id="addShowStudent" class="tw-form-check-input" checked>
                          <label for="addShowStudent" class="tw-form-check-label">Student homepage</label>
                        </div>
                        <div class="tw-form-check">
                          <input type="checkbox" id="addShowEnquiry" class="tw-form-check-input" checked>
                          <label for="addShowEnquiry" class="tw-form-check-label">Enquiry form</label>
                        </div>
                      </div>
                      <!-- Right column: parent homepage radios -->
                      <div class="tw:space-y-2">
                        <div class="tw-form-check">
                          <input type="radio" name="addParentHomepage" id="addParentAll" class="tw-form-check-input" value="all" checked>
                          <label for="addParentAll" class="tw-form-check-label">Parent's homepage for all parents</label>
                        </div>
                        <div class="tw-form-check">
                          <input type="radio" name="addParentHomepage" id="addParentByForm" class="tw-form-check-input" value="byform">
                          <label for="addParentByForm" class="tw-form-check-label">Parent's homepage based on application form</label>
                        </div>
                        <!-- Conditional: visible when "based on application form" selected -->
                        <div id="parentFormOptions" class="tw:hidden tw:ml-6 tw:space-y-2">
                          <div class="tw-form-check">
                            <input type="checkbox" id="addParentChildForm" class="tw-form-check-input">
                            <label for="addParentChildForm" class="tw-form-check-label">Parent's homepage based on the child's application form
                              <i class="fa-regular fa-circle-info tw:text-blue-500 tw:cursor-help tw:ml-1" data-controller="tooltip" data-tooltip-content-value="This only shows the event on the parent home page if the child has an application for any of the forms tagged below" data-tooltip-placement-value="top" tabindex="0"></i>
                            </label>
                          </div>
                          <div class="tw-form-check">
                            <input type="checkbox" id="addParentEnquiryForm" class="tw-form-check-input">
                            <label for="addParentEnquiryForm" class="tw-form-check-label">Parent's homepage based on enquiry child's suggested form
                              <i class="fa-regular fa-circle-info tw:text-blue-500 tw:cursor-help tw:ml-1" data-controller="tooltip" data-tooltip-content-value="This only shows the event on the parent home page if the child has a suggested form for any of the forms tagged below" data-tooltip-placement-value="top" tabindex="0"></i>
                            </label>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Card 3: Show popup for the event on -->
                <div class="tw-card">
                  <div class="tw-card-body">
                    <h3 class="tw-form-section-title">Show popup for the event on</h3>
                    <div class="tw:space-y-2">
                      <div class="tw-form-check">
                        <input type="checkbox" id="addPopupLogin" class="tw-form-check-input">
                        <label for="addPopupLogin" class="tw-form-check-label">Login page</label>
                      </div>
                      <div class="tw-form-check">
                        <input type="checkbox" id="addPopupStudent" class="tw-form-check-input">
                        <label for="addPopupStudent" class="tw-form-check-label">Student homepage</label>
                      </div>
                      <div class="tw-form-check">
                        <input type="checkbox" id="addPopupParent" class="tw-form-check-input">
                        <label for="addPopupParent" class="tw-form-check-label">Parent homepage</label>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Card 4: Registration Close -->
                <div class="tw-card">
                  <div class="tw-card-body">
                    <h3 class="tw-form-section-title">Registration Close</h3>
                    <div class="tw:space-y-2 tw:mb-2">
                      <div class="tw-form-check">
                        <input type="radio" name="addRegClose" id="addRegCloseEvent" class="tw-form-check-input" value="event" checked>
                        <label for="addRegCloseEvent" class="tw-form-check-label">On Event Date</label>
                      </div>
                      <div class="tw-form-check">
                        <input type="radio" name="addRegClose" id="addRegCloseCustom" class="tw-form-check-input" value="custom">
                        <label for="addRegCloseCustom" class="tw-form-check-label">Custom Date</label>
                      </div>
                    </div>
                    <div id="regCloseCustomDate" class="tw:hidden tw:ml-8 tw:mt-2">
                      <div class="tw-form-group">
                        <label for="addRegCloseDate" class="tw-form-label">Close Registration Date</label>
                        <input type="date" id="addRegCloseDate" class="tw-form-control tw:w-60">
                      </div>
                    </div>
                    <div class="tw-form-text tw:mt-1">When should registration close for this event?</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- ==================== Step 4: Email & Questions ==================== -->
            <div class="tw-steps-panel" role="tabpanel" data-steps-target="panel">
              <div class="tw:space-y-4">
                <!-- Card 1: Prospective Pupil -->
                <div class="tw-card">
                  <div class="tw-card-body">
                    <h3 class="tw-form-section-title">Prospective Pupil</h3>
                    <div class="tw-form-check">
                      <input type="checkbox" id="s4ProspectiveMandatory" class="tw-form-check-input" checked>
                      <label for="s4ProspectiveMandatory" class="tw-form-check-label">Mandatory</label>
                    </div>
                    <div class="tw-form-text tw:mt-1">Controls whether the prospective pupil question is mandatory when a parent applies</div>
                  </div>
                </div>
                <!-- Card 2: Automated Email -->
                <div class="tw-card">
                  <div class="tw-card-body">
                    <h3 class="tw-form-section-title">Automated Email</h3>
                    <!-- Warning notice -->
                    <div class="tw-inline-notification tw-inline-notification-warning tw:mb-4">
                      <div class="tw-inline-notification-icon"><i class="fa-regular fa-triangle-exclamation"></i></div>
                      <div class="tw-inline-notification-content">
                        <div class="tw-inline-notification-message">Changes to this email template only affect this event. To update the master template, go to <a href="#" class="tw:underline">Communications > Email Templates</a>.</div>
                      </div>
                    </div>
                    <!-- Checkbox A: Send automated email -->
                    <div class="tw-form-check tw:mb-3" id="s4RowA">
                      <input type="checkbox" id="s4CheckA" class="tw-form-check-input">
                      <label for="s4CheckA" class="tw-form-check-label">Send automated event confirmation email to event registrants
                        <i class="fa-regular fa-circle-info tw:text-blue-500 tw:cursor-help tw:ml-1" data-controller="tooltip" data-tooltip-content-value="This email will be sent to the person who registers for the event" data-tooltip-placement-value="top" tabindex="0"></i>
                      </label>
                    </div>
                    <!-- Checkbox B: Different template for existing users (hidden until A checked) -->
                    <div class="tw-form-check tw:mb-4 tw:hidden" id="s4RowB">
                      <input type="checkbox" id="s4CheckB" class="tw-form-check-input">
                      <label for="s4CheckB" class="tw-form-check-label">Use a <strong>different</strong> template for existing Applicaa users</label>
                    </div>
                    <!-- Email template area (hidden until A checked) -->
                    <div id="s4EmailArea" class="tw:hidden">
                      <!-- Tab bar -->
                      <div class="tw-tabs tw:mb-4" id="s4EmailTabs">
                        <button type="button" class="tw-tab tw-active" id="s4EmailTabAll" data-s4-email-tab="all">All registrants</button>
                        <button type="button" class="tw-tab tw:hidden" id="s4EmailTabExisting" data-s4-email-tab="existing">Existing Applicaa users <span class="tw-badge tw-badge-success-subtle tw:ml-1">Different template</span></button>
                      </div>
                      <!-- Panel: All registrants / Newcomers -->
                      <div id="s4EmailPanelAll" class="s4-email-panel">
                        <div id="s4AudienceLabelAll" class="tw:hidden tw:mb-3">
                          <span class="tw-badge tw-badge-primary-subtle">Newcomers — users without an Applicaa account</span>
                        </div>
                        <div class="tw-form-group">
                          <label class="tw-form-label">Sender Email</label>
                          <div class="tw-tag-input">
                            <div class="tw-tag-input-tags">
                              <span class="tw-tag tw-tag-primary">noreply@demoacademy.org<button type="button" class="tw-tag-close" aria-label="Remove">×</button></span>
                              <input type="text" class="tw-tag-input-field" placeholder="Add sender email...">
                            </div>
                            <span class="tw-tag-input-chevron"><i class="fa-solid fa-chevron-down"></i></span>
                          </div>
                        </div>
                        <div class="tw-form-group">
                          <label class="tw-form-label">Reply-to Email</label>
                          <div class="tw-tag-input">
                            <div class="tw-tag-input-tags">
                              <span class="tw-tag tw-tag-primary">admissions@demoacademy.org<button type="button" class="tw-tag-close" aria-label="Remove">×</button></span>
                              <input type="text" class="tw-tag-input-field" placeholder="Add reply-to email...">
                            </div>
                            <span class="tw-tag-input-chevron"><i class="fa-solid fa-chevron-down"></i></span>
                          </div>
                        </div>
                        <div class="tw-form-group">
                          <label class="tw-form-label">Subject Header</label>
                          <input type="text" class="tw-form-control" value="Registration Confirmation — {{EVENT_NAME}}">
                        </div>
                        <div class="tw-form-group">
                          <label class="tw-form-label">Mail Merge Fields</label>
                          <div class="tw:flex tw:gap-2">
                            <select class="tw-form-select tw:flex-1">
                              <option value="">Select a merge field...</option>
                              <option>{{FIRST_NAME}}</option>
                              <option>{{LAST_NAME}}</option>
                              <option>{{EVENT_NAME}}</option>
                              <option>{{EVENT_DATE}}</option>
                              <option>{{SCHOOL_NAME}}</option>
                              <option>{{TICKET_NAME}}</option>
                            </select>
                            <button type="button" class="tw-btn tw-btn-secondary">Insert</button>
                          </div>
                        </div>
                        <div class="tw-rte tw:mb-3">
                          <div class="tw-rte-toolbar">
                            <div class="tw-rte-toolbar-group">
                              <button class="tw-rte-toolbar-btn" type="button" aria-label="Bold"><i class="fa-solid fa-bold"></i></button>
                              <button class="tw-rte-toolbar-btn" type="button" aria-label="Italic"><i class="fa-solid fa-italic"></i></button>
                              <button class="tw-rte-toolbar-btn" type="button" aria-label="Underline"><i class="fa-solid fa-underline"></i></button>
                              <button class="tw-rte-toolbar-btn" type="button" aria-label="Align"><i class="fa-solid fa-align-left"></i></button>
                              <button class="tw-rte-toolbar-btn" type="button" aria-label="Link"><i class="fa-solid fa-link"></i></button>
                            </div>
                          </div>
                          <div class="tw-rte-content" contenteditable="true">
                            <p>Dear {{FIRST_NAME}},</p>
                            <p>Thank you for registering for <strong>{{EVENT_NAME}}</strong> on <strong>{{EVENT_DATE}}</strong>.</p>
                            <p>We look forward to seeing you there.</p>
                            <p>— {{SCHOOL_NAME}}</p>
                          </div>
                        </div>
                        <div class="tw-form-group">
                          <label class="tw-form-label">Attachments</label>
                          <div class="tw-file-upload">
                            <div class="tw-file-upload-dropzone">
                              <div class="tw-file-upload-dropzone-icon"><i class="fa-regular fa-cloud-arrow-up"></i></div>
                              <div class="tw-file-upload-dropzone-text">Drop files here or click to upload</div>
                              <div class="tw-file-upload-dropzone-hint">PDF, DOC, or image files up to 10MB</div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- Panel: Existing Applicaa users (hidden by default) -->
                      <div id="s4EmailPanelExisting" class="s4-email-panel tw:hidden">
                        <div class="tw:mb-3">
                          <span class="tw-badge tw-badge-success-subtle">Existing Applicaa users — known contacts</span>
                        </div>
                        <div class="tw-form-group">
                          <label class="tw-form-label">Sender Email</label>
                          <div class="tw-tag-input">
                            <div class="tw-tag-input-tags">
                              <span class="tw-tag tw-tag-primary">noreply@demoacademy.org<button type="button" class="tw-tag-close" aria-label="Remove">×</button></span>
                              <input type="text" class="tw-tag-input-field" placeholder="Add sender email...">
                            </div>
                            <span class="tw-tag-input-chevron"><i class="fa-solid fa-chevron-down"></i></span>
                          </div>
                        </div>
                        <div class="tw-form-group">
                          <label class="tw-form-label">Reply-to Email</label>
                          <div class="tw-tag-input">
                            <div class="tw-tag-input-tags">
                              <span class="tw-tag tw-tag-primary">admissions@demoacademy.org<button type="button" class="tw-tag-close" aria-label="Remove">×</button></span>
                              <input type="text" class="tw-tag-input-field" placeholder="Add reply-to email...">
                            </div>
                            <span class="tw-tag-input-chevron"><i class="fa-solid fa-chevron-down"></i></span>
                          </div>
                        </div>
                        <div class="tw-form-group">
                          <label class="tw-form-label">Subject Header</label>
                          <input type="text" class="tw-form-control" value="Registration Confirmation — {{EVENT_NAME}}">
                        </div>
                        <div class="tw-form-group">
                          <label class="tw-form-label">Mail Merge Fields</label>
                          <div class="tw:flex tw:gap-2">
                            <select class="tw-form-select tw:flex-1">
                              <option value="">Select a merge field...</option>
                              <option>{{FIRST_NAME}}</option>
                              <option>{{LAST_NAME}}</option>
                              <option>{{EVENT_NAME}}</option>
                              <option>{{EVENT_DATE}}</option>
                              <option>{{SCHOOL_NAME}}</option>
                              <option>{{TICKET_NAME}}</option>
                            </select>
                            <button type="button" class="tw-btn tw-btn-secondary">Insert</button>
                          </div>
                        </div>
                        <div class="tw-rte tw:mb-3">
                          <div class="tw-rte-toolbar">
                            <div class="tw-rte-toolbar-group">
                              <button class="tw-rte-toolbar-btn" type="button" aria-label="Bold"><i class="fa-solid fa-bold"></i></button>
                              <button class="tw-rte-toolbar-btn" type="button" aria-label="Italic"><i class="fa-solid fa-italic"></i></button>
                              <button class="tw-rte-toolbar-btn" type="button" aria-label="Underline"><i class="fa-solid fa-underline"></i></button>
                              <button class="tw-rte-toolbar-btn" type="button" aria-label="Align"><i class="fa-solid fa-align-left"></i></button>
                              <button class="tw-rte-toolbar-btn" type="button" aria-label="Link"><i class="fa-solid fa-link"></i></button>
                            </div>
                          </div>
                          <div class="tw-rte-content" contenteditable="true">
                            <p>Dear {{FIRST_NAME}},</p>
                            <p>Thank you for registering for <strong>{{EVENT_NAME}}</strong>. As an existing user, your details have been pre-filled.</p>
                            <p>We look forward to seeing you on <strong>{{EVENT_DATE}}</strong>.</p>
                            <p>— {{SCHOOL_NAME}}</p>
                          </div>
                        </div>
                        <div class="tw-form-group">
                          <label class="tw-form-label">Attachments</label>
                          <div class="tw-file-upload">
                            <div class="tw-file-upload-dropzone">
                              <div class="tw-file-upload-dropzone-icon"><i class="fa-regular fa-cloud-arrow-up"></i></div>
                              <div class="tw-file-upload-dropzone-text">Drop files here or click to upload</div>
                              <div class="tw-file-upload-dropzone-hint">PDF, DOC, or image files up to 10MB</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Card 3: Questions -->
                <div class="tw-card">
                  <div class="tw-card-body">
                    <h3 class="tw-form-section-title">Questions</h3>
                    <!-- Newcomer template selector -->
                    <div class="tw-form-group tw:mb-4">
                      <label class="tw-form-label">Use this question template for newcomers (user without an Applicaa profile during registration)</label>
                      <select id="s4NewcomerTemplate" class="tw-form-select">
                        <option value="">Select a template...</option>
                        <option value="open-day" selected>Open Day Registration Questions</option>
                        <option value="taster-day">Taster Day Questions</option>
                        <option value="scholarship">Scholarship Assessment Questions</option>
                      </select>
                    </div>
                    <!-- Same template checkbox -->
                    <div class="tw-form-check tw:mb-4">
                      <input type="checkbox" id="s4SameTemplate" class="tw-form-check-input" checked>
                      <label for="s4SameTemplate" class="tw-form-check-label">Use the same template for users who already have an Applicaa account
                        <i class="fa-regular fa-circle-info tw:text-blue-500 tw:cursor-help tw:ml-1" data-controller="tooltip" data-tooltip-content-value="Unselect this to use a different template for events registrants who are already known to the system. The other template will then only be used for new (unknown) contacts." data-tooltip-placement-value="top" tabindex="0"></i>
                      </label>
                    </div>
                    <!-- Known contacts template selector (hidden when same-template checked) -->
                    <div id="s4KnownTemplateGroup" class="tw-form-group tw:mb-4 tw:hidden">
                      <label class="tw-form-label">Question template for known lead contacts</label>
                      <select id="s4KnownTemplate" class="tw-form-select">
                        <option value="">Select a template...</option>
                        <option value="known-short" selected>Returning Family Short Form</option>
                        <option value="known-full">Returning Family Full Form</option>
                      </select>
                    </div>
                    <!-- Questions list header -->
                    <div class="tw:flex tw:items-baseline tw:justify-between tw:mb-2">
                      <div>
                        <h4 class="tw-h5 tw:mb-0">Questions in this template</h4>
                        <span class="text-muted tw:text-sm" id="s4QFromLabel">From: Open Day Registration Questions</span>
                      </div>
                    </div>
                    <!-- Audience tabs (hidden when same template) -->
                    <div id="s4QTabBar" class="tw-tabs tw:mb-3 tw:hidden">
                      <button type="button" class="tw-tab tw-active" id="s4QTabNewcomer" data-s4-q-tab="newcomer">Newcomers <span class="tw-badge tw-badge-info-subtle tw:ml-1">Unknown contacts</span></button>
                      <button type="button" class="tw-tab" id="s4QTabKnown" data-s4-q-tab="known">Known lead contacts <span class="tw-badge tw-badge-success-subtle tw:ml-1">Existing users</span></button>
                    </div>
                    <!-- Question table: Newcomers -->
                    <div id="s4QPanelNewcomer" class="s4-q-panel">
                      <div class="tw-table-responsive">
                        <table class="tw-table tw-table-bordered">
                          <thead>
                            <tr>
                              <th>Questions</th>
                              <th class="tw:w-36 tw:text-center">Required for lead contacts</th>
                              <th class="tw:w-36 tw:text-center">Visible for lead contacts</th>
                              <th class="tw:w-40 tw:text-center">Required for other attendees</th>
                              <th class="tw:w-40 tw:text-center">Visible for other attendees</th>
                              <th class="tw-table-cell-actions"></th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>
                                <span class="tw:font-medium">Child's full name</span>
                                <span class="tw-badge tw-badge-success-subtle tw:ml-2">support for: Lead Contact</span>
                              </td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw-table-cell-actions">
                                <button type="button" class="tw-btn tw-btn-icon tw-btn-sm tw-btn-secondary" aria-label="Locked — system question"><i class="fa-regular fa-lock"></i></button>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <span class="tw:font-medium">Date of birth</span>
                              </td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input"></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw-table-cell-actions">
                                <button type="button" class="tw-btn tw-btn-icon tw-btn-sm tw-btn-secondary" aria-label="Locked — system question"><i class="fa-regular fa-lock"></i></button>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <span class="tw:font-medium">Current school</span>
                              </td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input"></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input"></td>
                              <td class="tw-table-cell-actions">
                                <button type="button" class="tw-btn tw-btn-icon tw-btn-sm tw-btn-secondary" aria-label="Edit question"><i class="fa-regular fa-pen-to-square"></i></button>
                                <button type="button" class="tw-btn tw-btn-icon tw-btn-sm tw-btn-danger" aria-label="Delete question"><i class="fa-regular fa-trash-can"></i></button>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <span class="tw:font-medium">Dietary requirements</span>
                                <div class="tw:mt-1">
                                  <span class="tw-badge tw-badge-secondary-subtle tw:mr-1">None</span>
                                  <span class="tw-badge tw-badge-secondary-subtle tw:mr-1">Vegetarian</span>
                                  <span class="tw-badge tw-badge-secondary-subtle tw:mr-1">Vegan</span>
                                  <span class="tw-badge tw-badge-secondary-subtle tw:mr-1">Halal</span>
                                  <span class="tw-badge tw-badge-secondary-subtle">Other</span>
                                </div>
                              </td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input"></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input"></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw-table-cell-actions">
                                <button type="button" class="tw-btn tw-btn-icon tw-btn-sm tw-btn-secondary" aria-label="Edit question"><i class="fa-regular fa-pen-to-square"></i></button>
                                <button type="button" class="tw-btn tw-btn-icon tw-btn-sm tw-btn-danger" aria-label="Delete question"><i class="fa-regular fa-trash-can"></i></button>
                              </td>
                            </tr>
                            <tr>
                              <td colspan="6" class="tw:border-t tw:border-neutral-100">
                                <div data-controller="popup" class="tw:contents">
                                  <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm tw:w-full tw:justify-center" data-action="click->popup#show" id="s4AddQuestionBtnNewcomer"><i class="fa-regular fa-plus tw:mr-1"></i> Add Question</button>
                                  <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
                                  <div class="tw-popup-panel tw-popup-lg" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="addQuestionPopupTitle">
                                    <div class="tw-popup-header">
                                      <div>
                                        <h3 class="tw-popup-header-title" id="addQuestionPopupTitle">Add new question(s)</h3>
                                        <p class="tw-popup-header-subtitle text-muted tw:text-sm tw:mb-0 s4-popup-audience-subtitle tw:hidden">Adding to: Newcomers template (unknown contacts)</p>
                                      </div>
                                      <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->popup#close"><i class="fa-regular fa-xmark"></i></button>
                                    </div>
                                    <div class="tw-popup-body">
                                      <h4 class="tw-h5 tw:mb-3">Search from question bank</h4>
                                      <div class="tw:flex tw:gap-3 tw:mb-4">
                                        <select class="tw-form-select tw:w-48">
                                          <option value="">All types</option>
                                          <option>Text Input</option>
                                          <option>Value Input</option>
                                          <option>Single Selections</option>
                                          <option>Multiple Selections</option>
                                          <option>Date picker</option>
                                          <option>Text Block</option>
                                        </select>
                                        <div class="tw-input-group tw:flex-1">
                                          <span class="tw-input-group-text"><i class="fa-regular fa-magnifying-glass"></i></span>
                                          <input type="text" class="tw-form-control" placeholder="Search questions...">
                                        </div>
                                      </div>
                                      <h4 class="tw-h5 tw:mb-1">Create new question</h4>
                                      <p class="text-muted tw:text-sm tw:mb-3">Please select question type to start</p>
                                      <div class="tw:grid tw:grid-cols-2 tw:gap-3">
                                        <div class="tw-card tw-card-interactive q-type-card" data-q-type="text">
                                          <div class="tw-card-body tw:flex tw:items-start tw:gap-3 tw:p-3">
                                            <i class="fa-regular fa-input-text tw:text-lg tw:text-primary-500 tw:mt-0.5"></i>
                                            <div>
                                              <div class="tw:font-medium">Text Input</div>
                                              <div class="text-muted tw:text-sm">Single-line text</div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="tw-card tw-card-interactive q-type-card" data-q-type="number">
                                          <div class="tw-card-body tw:flex tw:items-start tw:gap-3 tw:p-3">
                                            <i class="fa-regular fa-input-numeric tw:text-lg tw:text-primary-500 tw:mt-0.5"></i>
                                            <div>
                                              <div class="tw:font-medium">Value Input</div>
                                              <div class="text-muted tw:text-sm">Number</div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="tw-card tw-card-interactive q-type-card" data-q-type="single">
                                          <div class="tw-card-body tw:flex tw:items-start tw:gap-3 tw:p-3">
                                            <i class="fa-regular fa-circle-dot tw:text-lg tw:text-primary-500 tw:mt-0.5"></i>
                                            <div>
                                              <div class="tw:font-medium">Single Selections</div>
                                              <div class="text-muted tw:text-sm">Dropdown selection</div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="tw-card tw-card-interactive q-type-card" data-q-type="multi">
                                          <div class="tw-card-body tw:flex tw:items-start tw:gap-3 tw:p-3">
                                            <i class="fa-regular fa-square-check tw:text-lg tw:text-primary-500 tw:mt-0.5"></i>
                                            <div>
                                              <div class="tw:font-medium">Multiple Selections</div>
                                              <div class="text-muted tw:text-sm">Dropdown selection</div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="tw-card tw-card-interactive q-type-card" data-q-type="date">
                                          <div class="tw-card-body tw:flex tw:items-start tw:gap-3 tw:p-3">
                                            <i class="fa-regular fa-calendar tw:text-lg tw:text-primary-500 tw:mt-0.5"></i>
                                            <div>
                                              <div class="tw:font-medium">Value Input</div>
                                              <div class="text-muted tw:text-sm">Date picker</div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="tw-card tw-card-interactive q-type-card" data-q-type="paragraph">
                                          <div class="tw-card-body tw:flex tw:items-start tw:gap-3 tw:p-3">
                                            <i class="fa-regular fa-align-left tw:text-lg tw:text-primary-500 tw:mt-0.5"></i>
                                            <div>
                                              <div class="tw:font-medium">Text Block</div>
                                              <div class="text-muted tw:text-sm">Paragraph</div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                    <!-- Question table: Known contacts (hidden by default) -->
                    <div id="s4QPanelKnown" class="s4-q-panel tw:hidden">
                      <div class="tw-table-responsive">
                        <table class="tw-table tw-table-bordered">
                          <thead>
                            <tr>
                              <th>Questions</th>
                              <th class="tw:w-36 tw:text-center">Required for lead contacts</th>
                              <th class="tw:w-36 tw:text-center">Visible for lead contacts</th>
                              <th class="tw:w-40 tw:text-center">Required for other attendees</th>
                              <th class="tw:w-40 tw:text-center">Visible for other attendees</th>
                              <th class="tw-table-cell-actions"></th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td>
                                <span class="tw:font-medium">Child's full name</span>
                                <span class="tw-badge tw-badge-success-subtle tw:ml-2">support for: Lead Contact</span>
                              </td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw-table-cell-actions">
                                <button type="button" class="tw-btn tw-btn-icon tw-btn-sm tw-btn-secondary" aria-label="Locked — system question"><i class="fa-regular fa-lock"></i></button>
                              </td>
                            </tr>
                            <tr>
                              <td>
                                <span class="tw:font-medium">Preferred contact number</span>
                              </td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input" checked></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input"></td>
                              <td class="tw:text-center"><input type="checkbox" class="tw-form-check-input"></td>
                              <td class="tw-table-cell-actions">
                                <button type="button" class="tw-btn tw-btn-icon tw-btn-sm tw-btn-secondary" aria-label="Locked — system question"><i class="fa-regular fa-lock"></i></button>
                              </td>
                            </tr>
                            <tr>
                              <td colspan="6" class="tw:border-t tw:border-neutral-100">
                                <div data-controller="popup" class="tw:contents">
                                  <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm tw:w-full tw:justify-center" data-action="click->popup#show" id="s4AddQuestionBtnKnown"><i class="fa-regular fa-plus tw:mr-1"></i> Add Question</button>
                                  <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div>
                                  <div class="tw-popup-panel tw-popup-lg" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="addQuestionPopupTitleKnown">
                                    <div class="tw-popup-header">
                                      <div>
                                        <h3 class="tw-popup-header-title" id="addQuestionPopupTitleKnown">Add new question(s)</h3>
                                        <p class="tw-popup-header-subtitle text-muted tw:text-sm tw:mb-0 s4-popup-audience-subtitle tw:hidden">Adding to: Known lead contacts template (existing users)</p>
                                      </div>
                                      <button type="button" class="tw-popup-close" aria-label="Close" data-action="click->popup#close"><i class="fa-regular fa-xmark"></i></button>
                                    </div>
                                    <div class="tw-popup-body">
                                      <h4 class="tw-h5 tw:mb-3">Search from question bank</h4>
                                      <div class="tw:flex tw:gap-3 tw:mb-4">
                                        <select class="tw-form-select tw:w-48">
                                          <option value="">All types</option>
                                          <option>Text Input</option>
                                          <option>Value Input</option>
                                          <option>Single Selections</option>
                                          <option>Multiple Selections</option>
                                          <option>Date picker</option>
                                          <option>Text Block</option>
                                        </select>
                                        <div class="tw-input-group tw:flex-1">
                                          <span class="tw-input-group-text"><i class="fa-regular fa-magnifying-glass"></i></span>
                                          <input type="text" class="tw-form-control" placeholder="Search questions...">
                                        </div>
                                      </div>
                                      <h4 class="tw-h5 tw:mb-1">Create new question</h4>
                                      <p class="text-muted tw:text-sm tw:mb-3">Please select question type to start</p>
                                      <div class="tw:grid tw:grid-cols-2 tw:gap-3">
                                        <div class="tw-card tw-card-interactive q-type-card" data-q-type="text">
                                          <div class="tw-card-body tw:flex tw:items-start tw:gap-3 tw:p-3">
                                            <i class="fa-regular fa-input-text tw:text-lg tw:text-primary-500 tw:mt-0.5"></i>
                                            <div>
                                              <div class="tw:font-medium">Text Input</div>
                                              <div class="text-muted tw:text-sm">Single-line text</div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="tw-card tw-card-interactive q-type-card" data-q-type="number">
                                          <div class="tw-card-body tw:flex tw:items-start tw:gap-3 tw:p-3">
                                            <i class="fa-regular fa-input-numeric tw:text-lg tw:text-primary-500 tw:mt-0.5"></i>
                                            <div>
                                              <div class="tw:font-medium">Value Input</div>
                                              <div class="text-muted tw:text-sm">Number</div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="tw-card tw-card-interactive q-type-card" data-q-type="single">
                                          <div class="tw-card-body tw:flex tw:items-start tw:gap-3 tw:p-3">
                                            <i class="fa-regular fa-circle-dot tw:text-lg tw:text-primary-500 tw:mt-0.5"></i>
                                            <div>
                                              <div class="tw:font-medium">Single Selections</div>
                                              <div class="text-muted tw:text-sm">Dropdown selection</div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="tw-card tw-card-interactive q-type-card" data-q-type="multi">
                                          <div class="tw-card-body tw:flex tw:items-start tw:gap-3 tw:p-3">
                                            <i class="fa-regular fa-square-check tw:text-lg tw:text-primary-500 tw:mt-0.5"></i>
                                            <div>
                                              <div class="tw:font-medium">Multiple Selections</div>
                                              <div class="text-muted tw:text-sm">Dropdown selection</div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="tw-card tw-card-interactive q-type-card" data-q-type="date">
                                          <div class="tw-card-body tw:flex tw:items-start tw:gap-3 tw:p-3">
                                            <i class="fa-regular fa-calendar tw:text-lg tw:text-primary-500 tw:mt-0.5"></i>
                                            <div>
                                              <div class="tw:font-medium">Value Input</div>
                                              <div class="text-muted tw:text-sm">Date picker</div>
                                            </div>
                                          </div>
                                        </div>
                                        <div class="tw-card tw-card-interactive q-type-card" data-q-type="paragraph">
                                          <div class="tw-card-body tw:flex tw:items-start tw:gap-3 tw:p-3">
                                            <i class="fa-regular fa-align-left tw:text-lg tw:text-primary-500 tw:mt-0.5"></i>
                                            <div>
                                              <div class="tw:font-medium">Text Block</div>
                                              <div class="text-muted tw:text-sm">Paragraph</div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Card 4: Data Collection -->
                <div class="tw-card">
                  <div class="tw-card-body">
                    <h3 class="tw-form-section-title">Data Collection</h3>
                    <div class="tw:space-y-2">
                      <div class="tw-form-check">
                        <input type="radio" name="s4DataCollection" id="s4DcCollect" class="tw-form-check-input" value="all">
                        <label for="s4DcCollect" class="tw-form-check-label">Collect details for all attendees</label>
                      </div>
                      <div id="s4DcConditional" class="tw:hidden tw:ml-8">
                        <div class="tw-form-check">
                          <input type="checkbox" id="s4DcAutoEmail" class="tw-form-check-input">
                          <label for="s4DcAutoEmail" class="tw-form-check-label">When an email is provided, also automatically email a confirmation to any additional attendees</label>
                        </div>
                      </div>
                      <div class="tw-form-check">
                        <input type="radio" name="s4DataCollection" id="s4DcLeadOnly" class="tw-form-check-input" value="lead" checked>
                        <label for="s4DcLeadOnly" class="tw-form-check-label">Collect information solely for the person registering</label>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- ==================== Step 5: Registration Pipeline ==================== -->
            <div class="tw-steps-panel" role="tabpanel" data-steps-target="panel">
              <!-- Enquiry Settings Card -->
              <div class="tw-card tw:mb-4">
                <div class="tw-card-header">
                  <h3 class="tw-h4 tw-card-title tw:mb-0">Enquiry Settings</h3>
                </div>
                <div class="tw-card-body">
                  <label class="tw-form-label tw-form-label-required tw:mb-3">Automatically create enquiry record for student event guests</label>
                  <div class="tw-inline-notification tw-inline-notification-warning tw-inline-notification-compact tw:mb-4" role="status">
                    <div class="tw-inline-notification-icon">
                      <i class="fa-solid fa-triangle-exclamation"></i>
                    </div>
                    <div class="tw-inline-notification-content">
                      <p class="tw-inline-notification-message">Creates an enquiry record for each student guest, allowing you to track them in your admissions pipeline. Only disable for internal events where attendees are existing pupils.</p>
                    </div>
                  </div>
                  <div class="tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:gap-3">
                    <!-- Yes option (selected by default) -->
                    <div class="tw-card tw-card-selectable-radio">
                      <label for="enquiryYes" class="tw-card-selectable-hitbox-full"></label>
                      <div class="tw-card-header">
                        <input type="radio" name="enquiryCreation" id="enquiryYes" value="yes" checked>
                        <span>Yes — create enquiry records</span>
                        <span class="tw-badge tw-badge-success">Highly Recommended</span>
                      </div>
                    </div>
                    <!-- No option -->
                    <div class="tw-card tw-card-selectable-radio">
                      <label for="enquiryNo" class="tw-card-selectable-hitbox-full"></label>
                      <div class="tw-card-header">
                        <input type="radio" name="enquiryCreation" id="enquiryNo" value="no">
                        <span>No — do not create enquiry records</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tw-card">
                <div class="tw-card-header">
                  <h3 class="tw-h4 tw-card-title tw:mb-0">Waitlist Activation</h3>
                </div>
                <div class="tw-card-body">
                  <!-- Level 1: Enable waitlist -->
                  <div class="tw-form-check tw:mb-3">
                    <input type="checkbox" id="enableWaitlist" class="tw-form-check-input">
                    <label for="enableWaitlist" class="tw-form-check-label">
                      Enable waitlist
                      <i class="fa-regular fa-circle-info tw:text-blue-500 tw:cursor-help tw:ml-1" data-controller="tooltip" data-tooltip-content-value="Enabling the waiting list lets attendees complete a waiting list form, adding their details to the 'Waiting List' tab. If a place opens up, you can offer it manually or enable automatic promotion to the next attendee in line." data-tooltip-placement-value="top" tabindex="0"></i>
                    </label>
                  </div>
                  <!-- Level 2: Revealed when Enable waitlist is checked -->
                  <div id="waitlistOptionsSection" class="tw:hidden tw:ml-6 tw:space-y-4">
                    <div class="tw-form-group">
                      <label for="waitlistMaxNumber" class="tw-form-label">Maximum number allowed on waitlist</label>
                      <input type="number" id="waitlistMaxNumber" class="tw-form-control tw:w-48" value="0">
                      <div class="tw-form-text tw:mt-1">Leave it as 0 for unlimited waitlist</div>
                    </div>
                    <div class="tw-form-check tw:mb-3">
                      <input type="checkbox" id="autoPromote" class="tw-form-check-input">
                      <label for="autoPromote" class="tw-form-check-label">
                        Enable automatic waitlist promotion
                        <i class="fa-regular fa-circle-info tw:text-blue-500 tw:cursor-help tw:ml-1" data-controller="tooltip" data-tooltip-content-value="This option automatically promotes attendees from the waiting list when spots become available." data-tooltip-placement-value="top" tabindex="0"></i>
                      </label>
                    </div>
                    <!-- Level 3: Revealed when auto-promotion is checked -->
                    <div id="autoPromoteOptions" class="tw:hidden tw:ml-6">
                      <div class="tw-form-group">
                        <label class="tw-form-label tw-form-label-required">
                          Expiration time for waitlist acceptance
                          <i class="fa-regular fa-circle-info tw:text-blue-500 tw:cursor-help tw:ml-1" data-controller="tooltip" data-tooltip-content-value="Set a response time for waiting list offers – if attendees don't respond within this window, the spot is released and offered to the next person on the list (if automatic promotion is enabled)." data-tooltip-placement-value="top" tabindex="0"></i>
                        </label>
                        <div class="tw:flex tw:gap-3 tw:mt-2">
                          <div>
                            <label for="waitlistDays" class="tw-form-label tw:text-sm">Days</label>
                            <input type="number" id="waitlistDays" class="tw-form-control tw:w-24" value="0" min="0">
                          </div>
                          <div>
                            <label for="waitlistHours" class="tw-form-label tw:text-sm">Hours</label>
                            <input type="number" id="waitlistHours" class="tw-form-control tw:w-24" value="0" min="0">
                          </div>
                          <div>
                            <label for="waitlistMinutes" class="tw-form-label tw:text-sm">Minutes</label>
                            <input type="number" id="waitlistMinutes" class="tw-form-control tw:w-24" value="0" min="0">
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- ==================== Step 6: Review & Save ==================== -->
            <div class="tw-steps-panel" role="tabpanel" data-steps-target="panel">
              <!-- Deploy to Schools Card (full width) -->
              <div class="tw-card">
                <!-- Card Header -->
                <div class="tw-card-header">
                  <div class="tw:flex tw:items-center tw:justify-between">
                    <h3 class="tw-h4 tw-card-title tw:mb-0">Deploy to Schools <span class="tw-badge tw-badge-secondary-soft tw:ml-2" id="s6SchoolCountBadge">9 Schools</span></h3>
                    <span class="tw:text-body-xs tw:leading-body-xs text-muted" id="s6SelectedCount">2 of 9 selected</span>
                  </div>
                </div>
                <!-- Event Summary Bar -->
                <div class="tw:px-4 tw:py-2.5 tw:bg-neutral-100 tw:border-b tw:border-neutral-200 tw:flex tw:items-center tw:gap-3 tw:text-body-s tw:leading-body-s tw:text-neutral-600 tw:flex-wrap">
                  <span class="fw-semibold tw:text-neutral-700">Event:</span>
                  <span class="fw-medium tw:text-neutral-900">Open Evening</span>
                  <span class="tw:text-neutral-300">|</span>
                  <span>25 Jan 2025, 17:00 — 19:00</span>
                  <span class="tw:text-neutral-300">|</span>
                  <span>120 attendees</span>
                  <span class="tw:text-neutral-300">|</span>
                  <span>Enquiry: <span class="tw:text-green-600 fw-medium">Yes</span></span>
                  <span class="tw:text-neutral-300">|</span>
                  <span>Waitlist: <span class="tw:text-green-600 fw-medium">Enabled</span></span>
                  <span class="tw:text-neutral-300">|</span>
                  <span>Audience: Accepted Offer Only</span>
                  <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw:ml-auto" onclick="document.getElementById('addEventSteps').querySelector('[data-steps-target=step]').click()"><i class="fa-regular fa-pen-to-square tw:mr-1"></i> Edit</button>
                </div>
                <!-- Toolbar -->
                <div class="tw-data-table-toolbar tw:px-4 tw:border-b tw:border-neutral-200">
                  <div class="tw-data-table-toolbar-start">
                    <!-- Filter chips -->
                    <span class="tw:text-body-s tw:leading-body-s tw:text-neutral-500">Filter:</span>
                    <button type="button" class="tw-tag tw-tag-interactive tw-tag-primary" data-s6-filter="all" onclick="s6FilterSchools('all', this)" aria-pressed="true">All</button>
                    <button type="button" class="tw-tag tw-tag-interactive tw-tag-secondary-soft" data-s6-filter="Primary" onclick="s6FilterSchools('Primary', this)" aria-pressed="false">Primary</button>
                    <button type="button" class="tw-tag tw-tag-interactive tw-tag-secondary-soft" data-s6-filter="Secondary" onclick="s6FilterSchools('Secondary', this)" aria-pressed="false">Secondary</button>
                    <button type="button" class="tw-tag tw-tag-interactive tw-tag-secondary-soft" data-s6-filter="Nursery" onclick="s6FilterSchools('Nursery', this)" aria-pressed="false">Nursery</button>
                    <button type="button" class="tw-tag tw-tag-interactive tw-tag-secondary-soft" data-s6-filter="Sixth Form" onclick="s6FilterSchools('Sixth Form', this)" aria-pressed="false">Sixth Form</button>
                    <div class="tw-data-table-bulk-divider"></div>
                    <!-- Select / Clear -->
                    <button type="button" class="tw:text-body-s tw:leading-body-s tw:text-blue-500 fw-medium tw:bg-transparent tw:border-0 tw:cursor-pointer" onclick="s6SelectAll()">Select All</button>
                    <button type="button" class="tw:text-body-s tw:leading-body-s tw:text-neutral-500 fw-medium tw:bg-transparent tw:border-0 tw:cursor-pointer hover:tw:text-neutral-700 hover:tw:underline" onclick="s6ClearAll()">Clear</button>
                  </div>
                  <div class="tw-data-table-toolbar-end">
                    <!-- Search (right-aligned, default height) -->
                    <div class="tw-input-group tw-has-icon-start tw:w-40">
                      <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i>
                      <input type="text" class="tw-form-control" placeholder="Search schools..." id="s6SearchInput" oninput="s6SearchSchools(this.value)">
                    </div>
                  </div>
                </div>
                <!-- School Grid (scrollable) -->
                <div class="tw:px-4 tw:py-3 tw:max-h-72 tw:overflow-y-auto tw:border-b tw:border-neutral-200" role="region" aria-label="School selection" id="s6SchoolGrid">
                  <div class="tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:lg:grid-cols-3 tw:gap-2">
                    <!-- Oakwood Primary (checked) -->
                    <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border-2 tw:border-neutral-200 tw:bg-white tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150" data-school-type="Primary">
                      <input type="checkbox" class="tw-form-check-input" checked onchange="s6UpdateCount()">
                      <div>
                        <div class="tw:text-body-s tw:leading-body-s fw-medium">Oakwood Primary</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">Primary · 420 pupils</div>
                      </div>
                    </label>
                    <!-- Riverside Academy (checked) -->
                    <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border-2 tw:border-neutral-200 tw:bg-white tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150" data-school-type="Primary">
                      <input type="checkbox" class="tw-form-check-input" checked onchange="s6UpdateCount()">
                      <div>
                        <div class="tw:text-body-s tw:leading-body-s fw-medium">Riverside Academy</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">Primary · 380 pupils</div>
                      </div>
                    </label>
                    <!-- St. Mary's CE Primary -->
                    <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border-2 tw:border-neutral-200 tw:bg-white tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150" data-school-type="Primary">
                      <input type="checkbox" class="tw-form-check-input" onchange="s6UpdateCount()">
                      <div>
                        <div class="tw:text-body-s tw:leading-body-s fw-medium">St. Mary's CE Primary</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">Primary · 210 pupils</div>
                      </div>
                    </label>
                    <!-- Hillcrest Secondary -->
                    <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border-2 tw:border-neutral-200 tw:bg-white tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150" data-school-type="Secondary">
                      <input type="checkbox" class="tw-form-check-input" onchange="s6UpdateCount()">
                      <div>
                        <div class="tw:text-body-s tw:leading-body-s fw-medium">Hillcrest Secondary</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">Secondary · 1,200 pupils</div>
                      </div>
                    </label>
                    <!-- The Grove Academy -->
                    <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border-2 tw:border-neutral-200 tw:bg-white tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150" data-school-type="Secondary">
                      <input type="checkbox" class="tw-form-check-input" onchange="s6UpdateCount()">
                      <div>
                        <div class="tw:text-body-s tw:leading-body-s fw-medium">The Grove Academy</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">Secondary · 1,850 pupils</div>
                      </div>
                    </label>
                    <!-- Elm Park Primary -->
                    <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border-2 tw:border-neutral-200 tw:bg-white tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150" data-school-type="Primary">
                      <input type="checkbox" class="tw-form-check-input" onchange="s6UpdateCount()">
                      <div>
                        <div class="tw:text-body-s tw:leading-body-s fw-medium">Elm Park Primary</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">Primary · 340 pupils</div>
                      </div>
                    </label>
                    <!-- Meadow Lane Nursery -->
                    <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border-2 tw:border-neutral-200 tw:bg-white tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150" data-school-type="Nursery">
                      <input type="checkbox" class="tw-form-check-input" onchange="s6UpdateCount()">
                      <div>
                        <div class="tw:text-body-s tw:leading-body-s fw-medium">Meadow Lane Nursery</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">Nursery · 90 pupils</div>
                      </div>
                    </label>
                    <!-- Thornfield Sixth Form -->
                    <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border-2 tw:border-neutral-200 tw:bg-white tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150" data-school-type="Sixth Form">
                      <input type="checkbox" class="tw-form-check-input" onchange="s6UpdateCount()">
                      <div>
                        <div class="tw:text-body-s tw:leading-body-s fw-medium">Thornfield Sixth Form</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">Sixth Form · 520 pupils</div>
                      </div>
                    </label>
                    <!-- Brookside Primary -->
                    <label class="tw:flex tw:items-center tw:gap-3 tw:p-3 tw:border-2 tw:border-neutral-200 tw:bg-white tw:rounded-md tw:cursor-pointer tw:transition-colors tw:duration-150" data-school-type="Primary">
                      <input type="checkbox" class="tw-form-check-input" onchange="s6UpdateCount()">
                      <div>
                        <div class="tw:text-body-s tw:leading-body-s fw-medium">Brookside Primary</div>
                        <div class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">Primary · 310 pupils</div>
                      </div>
                    </label>
                  </div>
                </div>
                <!-- Per-School Dates -->
                <div class="tw:px-4 tw:py-3" data-controller="collapsible">
                  <div class="tw:flex tw:items-center tw:gap-2">
                    <div class="tw-form-check tw-form-check-inline tw:mb-0">
                      <input class="tw-form-check-input" type="checkbox" id="s6PerSchoolDatesToggle"
                               data-action="change->collapsible#toggle"
                      aria-controls="s6PerSchoolDatesContent">
                      <label class="tw-form-check-label" for="s6PerSchoolDatesToggle">Customise dates per school</label>
                    </div>
                    <i class="fa-regular fa-circle-info tw:text-neutral-400 tw:text-sm tw:cursor-help"
                         aria-label="Set different event dates and times for each school"
                         data-controller="tooltip"
                         data-tooltip-content-value="Set different event dates and times for each school. If disabled, all schools use the default dates."
                         data-tooltip-placement-value="top"></i>
                    <span class="tw:text-body-xs tw:leading-body-xs text-muted tw:ml-1">Override the default event dates for specific schools</span>
                  </div>
                  <div class="tw-collapsible-content" data-collapsible-target="content" id="s6PerSchoolDatesContent">
                    <div class="tw:overflow-hidden tw:pt-3">
                      <div class="tw-table-responsive">
                        <table class="tw-table tw-table-sm" id="s6DatesTable">
                          <thead>
                            <tr>
                              <th>School</th>
                              <th>Start Date</th>
                              <th>Start Time</th>
                              <th>End Date</th>
                              <th>End Time</th>
                            </tr>
                          </thead>
                          <tbody id="s6DatesTableBody">
                            <!-- Rows populated dynamically by s6SyncDatesTable() -->
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- /.tw-card -->
            </div>
          </div>
        </div>
        <!-- Persistent Action Footer (sticky bottom) -->
        <div class="tw:fixed tw:bottom-0 tw:left-0 tw:right-0 tw:ml-60 tw:z-30 tw:bg-neutral-0 tw:border-t tw:border-neutral-200 tw:py-3">
          <div class="tw-container-fluid">
            <div class="tw:flex tw:items-center tw:justify-between">
              <button class="tw-btn tw-btn-secondary" type="button" id="addEventBackBtn">
                <i class="fa-regular fa-arrow-left tw:mr-1"></i> Previous
              </button>
              <div class="tw:flex tw:items-center tw:gap-3">
                <button class="tw-btn tw-btn-secondary" type="button">Save as Draft</button>
                <button class="tw-btn tw-btn-primary" type="button" id="addEventNextBtn">
                  Next <i class="fa-regular fa-arrow-right tw:ml-1"></i>
                </button>
              </div>
            </div>
          </div>
          <!-- /.tw-container-fluid (footer inner) -->
        </div>
      </div>
    </main>
  </div>
</div>
<style>
  /* JS-based sticky steps header (fixed when scrolled past topbar) */
  .tw-steps-header-fixed {
    position: fixed;
    top: 64px; /* h-16 = topbar height */
    z-index: 10;
    background-color: var(--tw-color-white);
    padding-block: var(--tw-spacing-4);
    box-shadow:
      0 2px 0 -1px var(--tw-color-neutral-translucent-200),
      0 6px 6px -3px var(--tw-color-neutral-translucent-200);
  }
  /* Question type card selection in Add Question popup */
  .q-type-card.selected {
    border-color: var(--tw-color-primary-500);
    background-color: var(--tw-color-primary-100);
  }
  /* School selection card — checked state via CSS :has() */
  #s6SchoolGrid label[data-school-type]:has(input:checked) {
    border-color: var(--tw-color-blue-500);
    background-color: var(--tw-color-blue-100);
  }
</style>
<script>
  // ============================================
  // STICKY STEPS HEADER (JS-based)
  // ============================================
  (function() {
    var TOPBAR_HEIGHT = 64;
    var sentinel = document.getElementById('stepsHeaderSentinel');
    var header = document.getElementById('stepsHeaderEl');
    if (!sentinel || !header) return;
    var placeholder = document.createElement('div');
    placeholder.style.display = 'none';
    header.parentNode.insertBefore(placeholder, header.nextSibling);
    var observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (!entry.isIntersecting) {
          var rect = header.parentNode.getBoundingClientRect();
          placeholder.style.display = 'block';
          placeholder.style.height = header.offsetHeight + 'px';
          header.classList.add('tw-steps-header-fixed');
          header.style.width = rect.width + 'px';
          header.style.left = rect.left + 'px';
        } else {
          placeholder.style.display = 'none';
          header.classList.remove('tw-steps-header-fixed');
          header.style.width = '';
          header.style.left = '';
        }
      });
    }, { rootMargin: '-' + TOPBAR_HEIGHT + 'px 0px 0px 0px' });
    observer.observe(sentinel);
  })();
  // ============================================
  // WIZARD TOGGLES — Conditional show/hide
  // ============================================
  function toggleTicketTimeCols() {
    var cb = document.getElementById('ticketsOwnDateTime');
    if (!cb) return;
    var show = cb.checked;
    document.querySelectorAll('.ticket-time-col').forEach(function(el) {
      el.classList.toggle('tw:hidden', !show);
    });
    var popupFields = document.getElementById('popupDateTimeFields');
    if (popupFields) {
      popupFields.classList.toggle('tw:hidden', !show);
    }
  }
  function initWizardToggles() {
    function bindToggle(checkboxId, containerId, showWhenChecked) {
      if (showWhenChecked === undefined) showWhenChecked = true;
      var cb = document.getElementById(checkboxId);
      var container = document.getElementById(containerId);
      if (!cb || !container) return;
      var update = function() {
        var show = showWhenChecked ? cb.checked : !cb.checked;
        container.classList.toggle('tw:hidden', !show);
      };
      cb.addEventListener('change', update);
      update();
    }
    // ---- Step 4: Automated Email ----
    var s4CheckA = document.getElementById('s4CheckA');
    var s4CheckB = document.getElementById('s4CheckB');
    var s4RowB = document.getElementById('s4RowB');
    var s4EmailArea = document.getElementById('s4EmailArea');
    function onA() {
      if (!s4CheckA || !s4RowB || !s4EmailArea || !s4CheckB) return;
      if (s4CheckA.checked) {
        s4RowB.classList.remove('tw:hidden');
        s4EmailArea.classList.remove('tw:hidden');
      } else {
        s4RowB.classList.add('tw:hidden');
        s4EmailArea.classList.add('tw:hidden');
        s4CheckB.checked = false;
        onB();
      }
    }
    var s4EmailTabAll = document.getElementById('s4EmailTabAll');
    var s4EmailTabExisting = document.getElementById('s4EmailTabExisting');
    var s4AudienceLabelAll = document.getElementById('s4AudienceLabelAll');
    function switchEmailTab(name) {
      var tabAll = document.getElementById('s4EmailTabAll');
      var tabExisting = document.getElementById('s4EmailTabExisting');
      var panelAll = document.getElementById('s4EmailPanelAll');
      var panelExisting = document.getElementById('s4EmailPanelExisting');
      if (!tabAll || !panelAll) return;
      if (name === 'existing') {
        tabAll.classList.remove('tw-active');
        tabExisting.classList.add('tw-active');
        panelAll.classList.add('tw:hidden');
        panelExisting.classList.remove('tw:hidden');
      } else {
        tabAll.classList.add('tw-active');
        if (tabExisting) tabExisting.classList.remove('tw-active');
        panelAll.classList.remove('tw:hidden');
        if (panelExisting) panelExisting.classList.add('tw:hidden');
      }
    }
    function onB() {
      if (!s4CheckB || !s4EmailTabAll || !s4EmailTabExisting || !s4AudienceLabelAll) return;
      if (s4CheckB.checked) {
        if (s4CheckA && !s4CheckA.checked) {
          s4CheckA.checked = true;
          onA();
        }
        s4EmailTabExisting.classList.remove('tw:hidden');
        s4EmailTabAll.innerHTML = 'Newcomers <span class="tw-badge tw-badge-info-subtle tw:ml-1">Unknown contacts</span>';
        s4AudienceLabelAll.classList.remove('tw:hidden');
        document.querySelectorAll('.s4-popup-audience-subtitle').forEach(function(el) { el.classList.remove('tw:hidden'); });
      } else {
        switchEmailTab('all');
        s4EmailTabExisting.classList.add('tw:hidden');
        s4EmailTabAll.innerHTML = 'All registrants';
        s4AudienceLabelAll.classList.add('tw:hidden');
        document.querySelectorAll('.s4-popup-audience-subtitle').forEach(function(el) { el.classList.add('tw:hidden'); });
      }
    }
    if (s4CheckA) s4CheckA.addEventListener('change', onA);
    if (s4CheckB) s4CheckB.addEventListener('change', onB);
    if (s4EmailTabAll) s4EmailTabAll.addEventListener('click', function() { switchEmailTab('all'); });
    if (s4EmailTabExisting) s4EmailTabExisting.addEventListener('click', function() { switchEmailTab('existing'); });
    // ---- Step 4: Questions ----
    var s4SameTemplate = document.getElementById('s4SameTemplate');
    var s4KnownTemplateGroup = document.getElementById('s4KnownTemplateGroup');
    var s4QTabBar = document.getElementById('s4QTabBar');
    var s4QFromLabel = document.getElementById('s4QFromLabel');
    var s4NewcomerTemplate = document.getElementById('s4NewcomerTemplate');
    var s4KnownTemplate = document.getElementById('s4KnownTemplate');
    var s4QTabNewcomer = document.getElementById('s4QTabNewcomer');
    var s4QTabKnown = document.getElementById('s4QTabKnown');
    function getSelectedText(selectEl) {
      if (!selectEl || selectEl.selectedIndex < 0) return 'No template selected';
      var opt = selectEl.options[selectEl.selectedIndex];
      return opt.value ? opt.text : 'No template selected';
    }
    function switchQTab(name) {
      var panelNewcomer = document.getElementById('s4QPanelNewcomer');
      var panelKnown = document.getElementById('s4QPanelKnown');
      if (!panelNewcomer || !panelKnown) return;
      if (name === 'known') {
        if (s4QTabNewcomer) s4QTabNewcomer.classList.remove('tw-active');
        if (s4QTabKnown) s4QTabKnown.classList.add('tw-active');
        panelNewcomer.classList.add('tw:hidden');
        panelKnown.classList.remove('tw:hidden');
        if (s4QFromLabel) s4QFromLabel.textContent = 'From: ' + getSelectedText(s4KnownTemplate);
      } else {
        if (s4QTabNewcomer) s4QTabNewcomer.classList.add('tw-active');
        if (s4QTabKnown) s4QTabKnown.classList.remove('tw-active');
        panelNewcomer.classList.remove('tw:hidden');
        panelKnown.classList.add('tw:hidden');
        if (s4QFromLabel) s4QFromLabel.textContent = 'From: ' + getSelectedText(s4NewcomerTemplate);
      }
    }
    function onSameQuestion() {
      if (!s4SameTemplate) return;
      if (s4SameTemplate.checked) {
        if (s4KnownTemplateGroup) s4KnownTemplateGroup.classList.add('tw:hidden');
        if (s4QTabBar) s4QTabBar.classList.add('tw:hidden');
        switchQTab('newcomer');
        if (s4QFromLabel) s4QFromLabel.textContent = 'From: ' + getSelectedText(s4NewcomerTemplate);
      } else {
        if (s4KnownTemplateGroup) s4KnownTemplateGroup.classList.remove('tw:hidden');
        if (s4QTabBar) s4QTabBar.classList.remove('tw:hidden');
        switchQTab('newcomer');
      }
    }
    if (s4SameTemplate) s4SameTemplate.addEventListener('change', onSameQuestion);
    if (s4NewcomerTemplate) s4NewcomerTemplate.addEventListener('change', function() {
      if (s4QTabNewcomer && s4QTabNewcomer.classList.contains('tw-active')) {
        if (s4QFromLabel) s4QFromLabel.textContent = 'From: ' + getSelectedText(s4NewcomerTemplate);
      }
    });
    if (s4KnownTemplate) s4KnownTemplate.addEventListener('change', function() {
      if (s4QTabKnown && s4QTabKnown.classList.contains('tw-active')) {
        if (s4QFromLabel) s4QFromLabel.textContent = 'From: ' + getSelectedText(s4KnownTemplate);
      }
    });
    if (s4QTabNewcomer) s4QTabNewcomer.addEventListener('click', function() { switchQTab('newcomer'); });
    if (s4QTabKnown) s4QTabKnown.addEventListener('click', function() { switchQTab('known'); });
    // ---- Step 4: Data Collection ----
    var s4DcRadios = document.querySelectorAll('input[name="s4DataCollection"]');
    var s4DcConditional = document.getElementById('s4DcConditional');
    if (s4DcRadios.length > 0 && s4DcConditional) {
      s4DcRadios.forEach(function(radio) {
        radio.addEventListener('change', function() {
          s4DcConditional.classList.toggle('tw:hidden', this.value !== 'all');
        });
      });
    }
    // Step 5: Waitlist options
    bindToggle('enableWaitlist', 'waitlistOptionsSection');
    // Step 5: Auto-Promote
    bindToggle('autoPromote', 'autoPromoteOptions');
    // Step 5: Cascade — unchecking Enable Waitlist also unchecks auto-promote
    var enableWaitlistCb = document.getElementById('enableWaitlist');
    var autoPromoteCb = document.getElementById('autoPromote');
    if (enableWaitlistCb && autoPromoteCb) {
      enableWaitlistCb.addEventListener('change', function() {
        if (!enableWaitlistCb.checked) {
          autoPromoteCb.checked = false;
          autoPromoteCb.dispatchEvent(new Event('change'));
        }
      });
    }
    // Step 2: Delete ticket type rows
    document.addEventListener('click', function(e) {
      var deleteBtn = e.target.closest('#ticketTypesTable .tw-btn-danger');
      if (deleteBtn) {
        var row = deleteBtn.closest('tr');
        if (row) row.remove();
      }
    });
  }
  initWizardToggles();
  // ============================================
  // TOGGLE HELPERS
  // ============================================
  function toggleSection(toggleEl, sectionId) {
    document.getElementById(sectionId).classList.toggle('tw:hidden', !toggleEl.checked);
  }
  function toggleRadioSection(radioName, targetValue, sectionId) {
    var radios = document.querySelectorAll('input[name="' + radioName + '"]');
    radios.forEach(function(r) {
      r.addEventListener('change', function() {
        document.getElementById(sectionId).classList.toggle('tw:hidden', r.value !== targetValue || !r.checked);
      });
    });
    var checked = document.querySelector('input[name="' + radioName + '"]:checked');
    if (checked) {
      document.getElementById(sectionId).classList.toggle('tw:hidden', checked.value !== targetValue);
    }
  }
  // Initialize Step 3 radio toggles
  (function initStep3Toggles() {
    toggleRadioSection('addParentHomepage', 'byform', 'parentFormOptions');
    toggleRadioSection('addRegClose', 'custom', 'regCloseCustomDate');
  })();
  // Initialize Step 4 — question type card selection
  (function initStep4Extras() {
    document.addEventListener('click', function(e) {
      var card = e.target.closest('.q-type-card');
      if (!card) return;
      var popup = card.closest('.tw-popup-panel');
      if (!popup) return;
      popup.querySelectorAll('.q-type-card').forEach(function(c) { c.classList.remove('selected'); });
      card.classList.add('selected');
    });
  })();
  // ============================================
  // ADD EVENT WIZARD FOOTER
  // ============================================
  (function initAddEventFooter() {
    var stepsEl = document.getElementById("addEventSteps");
    var nextBtn = document.getElementById("addEventNextBtn");
    var backBtn = document.getElementById("addEventBackBtn");
    if (!stepsEl || !nextBtn || !backBtn) return;
    var totalSteps = stepsEl.querySelectorAll("[data-steps-target='step']").length;
    function updateFooter() {
      var index = parseInt(stepsEl.dataset.stepsIndexValue || "0", 10);
      backBtn.disabled = index === 0;
      if (index === totalSteps - 1) {
        nextBtn.innerHTML = '<i class="fa-regular fa-paper-plane tw:mr-1"></i> Publish to Schools';
      } else {
        nextBtn.innerHTML = 'Next <i class="fa-regular fa-arrow-right tw:ml-1"></i>';
      }
    }
    nextBtn.addEventListener("click", function () {
      var ctrl = stepsEl[Object.keys(stepsEl).find(function(k) { return k.startsWith("__stimulus"); })];
      if (ctrl && ctrl.next) ctrl.next();
      setTimeout(updateFooter, 50);
    });
    backBtn.addEventListener("click", function () {
      var ctrl = stepsEl[Object.keys(stepsEl).find(function(k) { return k.startsWith("__stimulus"); })];
      if (ctrl && ctrl.back) ctrl.back();
      setTimeout(updateFooter, 50);
    });
    stepsEl.addEventListener("steps:changed", updateFooter);
    updateFooter();
  })();
  // ============================================
  // STEP 3: APPLY FOR DROPDOWN + APPLICAAONE
  // ============================================
  function toggleApplyForDropdown(show) {
    var dd = document.getElementById('s3ApplyForDropdown');
    if (!dd) return;
    dd.classList.toggle('tw-show', show);
  }
  function addApplyForForm(btn, formName) {
    var tagsContainer = document.querySelector('#s3ApplyForInput .tw-tag-input-tags');
    var input = tagsContainer.querySelector('.tw-tag-input-field');
    var tag = document.createElement('span');
    tag.className = 'tw-tag tw-tag-secondary-soft';
    tag.setAttribute('data-tag-input-target', 'tag');
    tag.setAttribute('data-value', formName);
    tag.innerHTML = formName +
      ' <button type="button" class="tw-tag-close" aria-label="Remove ' + formName + '" data-action="click->tag-input#removeTag" onclick="onApplyForTagRemoved()"><i class="fa-solid fa-xmark"></i></button>';
    tagsContainer.insertBefore(tag, input);
    btn.classList.add('tw:hidden');
    toggleApplyForDropdown(false);
    checkApplicaaOneVisibility();
  }
  function onApplyForTagRemoved() {
    setTimeout(checkApplicaaOneVisibility, 50);
  }
  function checkApplicaaOneVisibility() {
    var tags = document.querySelectorAll('#s3ApplyForInput .tw-tag');
    var hasSixthForm = false;
    tags.forEach(function(tag) {
      var val = (tag.getAttribute('data-value') || '').toLowerCase();
      if (val.indexOf('year 12') !== -1 || val.indexOf('sixth form') !== -1) {
        hasSixthForm = true;
      }
    });
    var row = document.getElementById('s3ApplicaaOneRow');
    if (row) {
      if (hasSixthForm) {
        row.style.display = '';
      } else {
        row.style.display = 'none';
        var cb = document.getElementById('s3PublishApplicaaOne');
        if (cb) cb.checked = false;
      }
    }
  }
  document.addEventListener('click', function(e) {
    var container = document.getElementById('s3ApplyForInput');
    var dd = document.getElementById('s3ApplyForDropdown');
    if (container && dd && !container.contains(e.target) && !dd.contains(e.target)) {
      toggleApplyForDropdown(false);
    }
  });
  function filterApplyForDropdown(query) {
    var dd = document.getElementById('s3ApplyForDropdown');
    if (!dd) return;
    dd.classList.add('tw-show');
    var items = dd.querySelectorAll('.tw-dropdown-item');
    var q = query.toLowerCase();
    items.forEach(function(item) {
      if (item.classList.contains('tw:hidden')) return;
      item.style.display = item.textContent.toLowerCase().indexOf(q) !== -1 ? '' : 'none';
    });
  }
  // ============================================
  // STEP 1: REGISTRATION NOTIFICATIONS DROPDOWN
  // ============================================
  function toggleRegNotifyDropdown(show) {
    var dd = document.getElementById('s1RegNotifyDropdown');
    if (!dd) return;
    dd.classList.toggle('tw-show', show);
  }
  function addRegNotifyEmail(btn, email) {
    var tagsContainer = document.querySelector('#s1RegNotifyInput .tw-tag-input-tags');
    var input = tagsContainer.querySelector('.tw-tag-input-field');
    var tag = document.createElement('span');
    tag.className = 'tw-tag';
    tag.setAttribute('data-tag-input-target', 'tag');
    tag.setAttribute('data-value', email);
    tag.innerHTML = email +
      ' <button type="button" class="tw-tag-close" aria-label="Remove ' + email + '" data-action="click->tag-input#removeTag"><i class="fa-regular fa-xmark"></i></button>';
    tagsContainer.insertBefore(tag, input);
    btn.classList.add('tw:hidden');
    input.value = '';
    toggleRegNotifyDropdown(false);
  }
  function filterRegNotifyDropdown(query) {
    var dd = document.getElementById('s1RegNotifyDropdown');
    if (!dd) return;
    dd.classList.add('tw-show');
    var items = dd.querySelectorAll('.tw-dropdown-item');
    var q = query.toLowerCase();
    items.forEach(function(item) {
      if (item.classList.contains('tw:hidden')) return;
      item.style.display = item.textContent.toLowerCase().indexOf(q) !== -1 ? '' : 'none';
    });
  }
  document.addEventListener('click', function(e) {
    var container = document.getElementById('s1RegNotifyInput');
    var dd = document.getElementById('s1RegNotifyDropdown');
    if (container && dd && !container.contains(e.target) && !dd.contains(e.target)) {
      toggleRegNotifyDropdown(false);
    }
  });
  // ============================================
  // ADD TICKET POPUP HELPER
  // ============================================
  function addTicketAndClose() {
    var tbody = document.getElementById('ticketTypesBody');
    if (tbody && !document.getElementById('addedTicketRow')) {
      var cb = document.getElementById('ticketsOwnDateTime');
      var hiddenClass = (cb && cb.checked) ? '' : ' tw:hidden';
      var row = document.createElement('tr');
      row.id = 'addedTicketRow';
      row.innerHTML = '<td>VIP Early Access</td>' +
        '<td class="ticket-time-col' + hiddenClass + '">15/04/2026 09:00</td>' +
        '<td class="ticket-time-col' + hiddenClass + '">15/04/2026 17:00</td>' +
        '<td>50</td>' +
        '<td class="tw-table-cell-actions"><button type="button" class="tw-btn tw-btn-icon tw-btn-sm tw-btn-danger" aria-label="Remove ticket type"><i class="fa-regular fa-trash-can"></i></button></td>';
      tbody.appendChild(row);
    }
    document.querySelector('#newTicketPopupController .tw-popup-close').click();
  }
  // ============================================
  // STEP 6: DEPLOY TO SCHOOLS
  // ============================================
  var s6ActiveFilter = 'all';
  window.s6FilterSchools = function(type, clickedBtn) {
    s6ActiveFilter = type;
    var grid = document.getElementById('s6SchoolGrid');
    if (!grid) return;
    var toolbar = grid.closest('.tw-card').querySelector('[data-s6-filter]').parentElement;
    toolbar.querySelectorAll('[data-s6-filter]').forEach(function(btn) {
      btn.classList.remove('tw-tag-primary');
      btn.classList.add('tw-tag-secondary-soft');
      btn.setAttribute('aria-pressed', 'false');
    });
    clickedBtn.classList.remove('tw-tag-secondary-soft');
    clickedBtn.classList.add('tw-tag-primary');
    clickedBtn.setAttribute('aria-pressed', 'true');
    var searchVal = (document.getElementById('s6SearchInput') || {}).value || '';
    s6ApplyFilters(searchVal, type);
  };
  window.s6SearchSchools = function(query) {
    s6ApplyFilters(query, s6ActiveFilter);
  };
  function s6ApplyFilters(query, type) {
    var grid = document.getElementById('s6SchoolGrid');
    if (!grid) return;
    var cards = grid.querySelectorAll('[data-school-type]');
    var q = (query || '').toLowerCase();
    cards.forEach(function(card) {
      var matchesType = (type === 'all' || card.getAttribute('data-school-type') === type);
      var schoolName = card.querySelector('.fw-medium').textContent.toLowerCase();
      var matchesSearch = !q || schoolName.indexOf(q) !== -1;
      card.classList.toggle('tw:hidden', !(matchesType && matchesSearch));
    });
  }
  window.s6SelectAll = function() {
    var grid = document.getElementById('s6SchoolGrid');
    if (!grid) return;
    grid.querySelectorAll('[data-school-type]').forEach(function(card) {
      if (!card.classList.contains('tw:hidden')) {
        card.querySelector('input[type="checkbox"]').checked = true;
      }
    });
    s6UpdateCount();
  };
  window.s6ClearAll = function() {
    var grid = document.getElementById('s6SchoolGrid');
    if (!grid) return;
    grid.querySelectorAll('[data-school-type]').forEach(function(card) {
      if (!card.classList.contains('tw:hidden')) {
        card.querySelector('input[type="checkbox"]').checked = false;
      }
    });
    s6UpdateCount();
  };
  window.s6UpdateCount = function() {
    var grid = document.getElementById('s6SchoolGrid');
    if (!grid) return;
    var total = grid.querySelectorAll('input[type="checkbox"]').length;
    var checked = grid.querySelectorAll('input[type="checkbox"]:checked').length;
    var countEl = document.getElementById('s6SelectedCount');
    if (countEl) countEl.textContent = checked + ' of ' + total + ' selected';
    var toggle = document.getElementById('s6PerSchoolDatesToggle');
    if (toggle && toggle.checked) {
      s6SyncDatesTable();
    }
  };
  function s6SyncDatesTable() {
    var grid = document.getElementById('s6SchoolGrid');
    var tbody = document.getElementById('s6DatesTableBody');
    if (!grid || !tbody) return;
    var selectedSchools = [];
    grid.querySelectorAll('input[type="checkbox"]:checked').forEach(function(cb) {
      var label = cb.closest('label');
      var name = label.querySelector('.fw-medium').textContent;
      selectedSchools.push(name);
    });
    tbody.innerHTML = '';
    selectedSchools.forEach(function(name) {
      var row = document.createElement('tr');
      row.innerHTML =
        '<td>' + name + '</td>' +
        '<td><input type="date" class="tw-form-control tw-form-control-sm" value="2025-01-25" aria-label="Start date for ' + name + '"></td>' +
        '<td><input type="time" class="tw-form-control tw-form-control-sm" value="17:00" aria-label="Start time for ' + name + '"></td>' +
        '<td><input type="date" class="tw-form-control tw-form-control-sm" value="2025-01-25" aria-label="End date for ' + name + '"></td>' +
        '<td><input type="time" class="tw-form-control tw-form-control-sm" value="19:00" aria-label="End time for ' + name + '"></td>';
      tbody.appendChild(row);
    });
  }
  document.addEventListener('DOMContentLoaded', function() {
    var perSchoolDatesWrapper = document.querySelector('[aria-controls="s6PerSchoolDatesContent"]');
    if (perSchoolDatesWrapper) {
      perSchoolDatesWrapper.closest('[data-controller="collapsible"]').addEventListener('collapsible:opened', function() {
        s6SyncDatesTable();
      });
    }
  });
</script>