<div data-controller="sidebar popup">
  <aside class="tw-sidebar">
    <!-- Logo -->
    <div class="tw-sidebar-logo">
      <a href="#" class="tw-sidebar-logo-link">
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M37.47 38L29.43 17.99H26.34L18.27 38H21.12L22.89 33.53H32.85L34.62 38H37.47ZM32.13 31.34H23.64L27.87 20.54L32.13 31.34Z" fill="white"/>
          <path d="M39 18V14H37V18H33V20H37V24H39V20H43V18H39Z" fill="#EC634B"/>
        </svg>
      </a>
    </div>
    <!-- Navigation -->
    <nav class="tw-sidebar-nav" role="navigation" aria-label="Main navigation">
      <!-- Insights -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="insights"
        data-label="Insights"
        aria-expanded="false">
        <i class="fa-light fa-chart-mixed tw-sidebar-icon"></i>
        <span class="tw:sr-only">Insights</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
      </button>
      <!-- Parents & Enquiries -->
      <button type="button"
            class="tw-sidebar-item tw-active"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="parents"
        data-label="Parents & Enquiries"
        aria-expanded="false">
        <i class="fa-light fa-user-group tw-sidebar-icon"></i>
        <span class="tw:sr-only">Parents & Enquiries</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
      </button>
      <!-- Communications & Events -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="communications"
        data-label="Communications & Events"
        aria-expanded="false">
        <i class="fa-light fa-comment-alt-lines tw-sidebar-icon"></i>
        <span class="tw:sr-only">Communications & Events</span>
      </button>
      <!-- Registered Students -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="students"
        data-label="Registered Students"
        aria-expanded="false">
        <i class="fa-light fa-users tw-sidebar-icon"></i>
        <span class="tw:sr-only">Registered Students</span>
      </button>
      <!-- Marketing -->
      <!-- <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="marketing"
            data-label="Marketing"
            aria-expanded="false">
      <svg class="tw-sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14.7461 2.38281C13.875 2.13281 12.9531 2 12 2C6.47656 2 2 6.47656 2 12C2 17.5234 6.47656 22 12 22C17.5234 22 22 17.5234 22 12C22 11.0469 21.8672 10.125 21.6172 9.25391L20.7266 10.2461C20.6836 10.293 20.6445 10.3359 20.5977 10.3789C20.6953 10.9062 20.7461 11.4453 20.7461 12C20.7461 16.832 16.8281 20.75 11.9961 20.75C7.16406 20.75 3.25 16.832 3.25 12C3.25 7.16797 7.16797 3.25 12 3.25C12.5547 3.25 13.0977 3.30078 13.6211 3.39844C13.6641 3.35547 13.707 3.3125 13.7539 3.26953L14.7461 2.38281ZM12.7266 5.79297C12.4883 5.76562 12.2461 5.75 12 5.75C8.54687 5.75 5.75 8.54687 5.75 12C5.75 15.4531 8.54687 18.25 12 18.25C15.4531 18.25 18.25 15.4531 18.25 12C18.25 11.7539 18.2344 11.5117 18.207 11.2734C18.1016 11.2656 17.9961 11.2539 17.8906 11.2383L16.9141 11.0742C16.9687 11.375 17 11.6836 17 12C17 14.7617 14.7617 17 12 17C9.23828 17 7 14.7617 7 12C7 9.23828 9.23828 7 12 7C12.3164 7 12.625 7.03125 12.9258 7.08594L12.7617 6.10937C12.7422 6.00391 12.7305 5.89844 12.7266 5.79297ZM15.3398 9.54687L18.0898 10.0039C18.7266 10.1094 19.3711 9.88281 19.8008 9.39844L21.5156 7.46875C21.9727 6.95703 21.7422 6.14453 21.0859 5.94922L18.7539 5.25L18.0508 2.91406C17.8555 2.25781 17.043 2.02734 16.5312 2.48437L14.6016 4.19922C14.1211 4.62891 13.8906 5.27344 13.9961 5.91016L14.4531 8.66016L11.5547 11.5586C11.3125 11.8008 11.3125 12.1992 11.5547 12.4414C11.7969 12.6836 12.1953 12.6836 12.4375 12.4414L15.3359 9.54297L15.3398 9.54687ZM16.4258 8.46094L18.4297 6.45703L20.2578 7.00391L18.8672 8.56641C18.7227 8.72656 18.5078 8.80469 18.2969 8.76953L16.4258 8.45703V8.46094ZM17.543 5.57422L15.5391 7.57813L15.2266 5.70703C15.1914 5.49609 15.2656 5.28125 15.4297 5.13672L16.9922 3.74609L17.5391 5.57422H17.543Z" fill="currentColor" stroke="none"/>
      </svg>
      <span class="tw:sr-only">Marketing</span>
      <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">128</span>
    </button> -->
      <!-- Enrolments -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="enrolments"
        data-label="Enrolments"
        aria-expanded="false">
        <i class="fa-light fa-file-alt tw-sidebar-icon"></i>
        <span class="tw:sr-only">Enrolments</span>
      </button>
      <!-- Applicaa Futures -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="applicaafutures"
        data-label="Applicaa Futures"
        aria-expanded="false">
        <i class="fa-light fa-graduation-cap tw-sidebar-icon"></i>
        <span class="tw:sr-only">Applicaa Futures</span>
      </button>
      <!-- Data -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="data"
        data-label="Data"
        aria-expanded="false">
        <i class="fa-light fa-cloud-upload tw-sidebar-icon"></i>
        <span class="tw:sr-only">Data</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">160</span>
      </button>
      <!-- Manage Users -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="manageusers"
        data-label="Manage Users"
        aria-expanded="false">
        <i class="fa-light fa-users-cog tw-sidebar-icon"></i>
        <span class="tw:sr-only">Manage Users</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">218</span>
      </button>
      <!-- Platform Essentials -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="essentials"
        data-label="Platform Essentials"
        aria-expanded="false">
        <i class="fa-light fa-bell tw-sidebar-icon"></i>
        <span class="tw:sr-only">Platform Essentials</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">90</span>
      </button>
    </nav>
    <!-- Bottom Section -->
    <div class="tw-sidebar-bottom">
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="settings"
        data-label="Settings"
        aria-expanded="false">
        <i class="fa-light fa-cogs tw-sidebar-icon"></i>
        <span class="tw:sr-only">Settings</span>
      </button>
    </div>
  </aside>
  <!-- Parents & Enquiries Drawer -->
  <div class="tw-sidebar-drawer tw-open"
     data-sidebar-target="drawer"
     data-drawer-id="parents"
     aria-label="Parents & Enquiries navigation">
    <div class="tw-sidebar-drawer-header">PARENTS & ENQUIRIES</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">Parents</span>
      </a>
      <a href="#" class="tw-drawer-item tw-active">
        <span class="tw-drawer-item-label">Enquiries</span>
      </a>
    </nav>
  </div>
  <!-- Insights Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="insights"
     aria-label="Insights navigation">
    <div class="tw-sidebar-drawer-header">INSIGHTS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Summary</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Pipeline</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Map view</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Feeder schools</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Events</span>
      </a>
    </nav>
  </div>
  <!-- Registered Students Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="students"
     aria-label="Registered Students navigation">
    <div class="tw-sidebar-drawer-header">REGISTERED STUDENTS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Incomplete</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Awaiting Reference
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Completed
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Declined</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Withdrawn</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Deadline Missed</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Skipped Payment</span>
      </a>
    </nav>
  </div>
  <!-- Enrolments Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="enrolments"
     aria-label="Enrolments navigation">
    <div class="tw-sidebar-drawer-header">
      ENROLMENT
      <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive tw:normal-case"
          data-controller="demo"
          data-action="click->demo#show"
        data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
        data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
        data-demo-learn-more="https://helpdesk.applicaa.com/">
        <i class="fa-regular fa-clapperboard-play"></i>
        Demo
      </span>
    </div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Details to be checked</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Ready to Enrol</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolled</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Waiting</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Declined</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Activities</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">REPORT</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Report</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">POST ENROLMENT</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">CTF/File Request</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Transition Tool</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Sorting Hat</span>
      </a>
    </nav>
  </div>
  <!-- Applicaa Futures Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="applicaafutures"
     aria-label="Applicaa Futures navigation">
    <div class="tw-sidebar-drawer-header">APPLICAA FUTURES</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">One Reference</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Destination Tracker</span>
      </a>
    </nav>
  </div>
  <!-- Data Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="data"
     aria-label="Data navigation">
    <div class="tw-sidebar-drawer-header">DATA</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Import</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Export
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Uploaded Files</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          First Media Applications
          <span class="tw-badge tw-badge-danger tw-badge-sm">182</span>
        </span>
      </a>
    </nav>
  </div>
  <!-- Manage Users Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="manageusers"
     aria-label="Manage Users navigation">
    <div class="tw-sidebar-drawer-header">MANAGE USERS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Manually Add People</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Duplicate Students
          <span class="tw-badge tw-badge-danger tw-badge-sm">211</span>
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Duplicate Agencies
          <span class="tw-badge tw-badge-danger tw-badge-sm">7</span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Duplicate Contacts</span>
      </a>
    </nav>
  </div>
  <!-- Platform Essentials Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="essentials"
     aria-label="Platform Essentials navigation">
    <div class="tw-sidebar-drawer-header">PLATFORM ESSENTIALS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Applicaa Journey
          <span class="tw-badge tw-badge-danger tw-badge-sm">13</span>
        </span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Product Requests & Updates</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Feature Requests</a>
        <a href="#" class="tw-drawer-subitem">Road Map</a>
        <a href="#" class="tw-drawer-subitem">Vote</a>
        <a href="#" class="tw-drawer-subitem">Recent Updates</a>
      </div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Time Saved With Admissions+</span>
      </a>
    </nav>
  </div>
  <!-- Communications & Events Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="communications"
     aria-label="Communications & Events navigation">
    <div class="tw-sidebar-drawer-header">COMMUNICATIONS & EVENTS</div>
    <nav class="tw-drawer-nav">
      <!-- Communications Section (expandable) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Communications
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Manual Messages
        </a>
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Automated Messages
        </a>
        <a href="#" class="tw-drawer-subitem">
          <i class="fa-regular fa-circle-info"></i>
          Scheduled Messages
        </a>
        <a href="#" class="tw-drawer-subitem">Message Summary</a>
      </div>
      <!-- Meetings (single item) -->
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Meetings
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <!-- Events Section (expandable) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Events
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Event Calendar</a>
        <a href="#" class="tw-drawer-subitem">Event Guests</a>
        <a href="#" class="tw-drawer-subitem">Event Waitlists</a>
        <a href="#" class="tw-drawer-subitem">Event Forms</a>
      </div>
      <!-- Taster Day Section (expandable with secondary color) -->
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">
          Taster Day
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Taster Day Configuration</a>
        <a href="#" class="tw-drawer-subitem">Student Submissions & Timetables</a>
      </div>
    </nav>
  </div>
  <!-- Marketing & Events Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="marketing"
     aria-label="Marketing & Events navigation">
    <div class="tw-sidebar-drawer-header">MARKETING & EVENTS</div>
    <nav class="tw-drawer-nav">
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Marketing Campaigns</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Campaigns</a>
        <a href="#" class="tw-drawer-subitem">Reports</a>
      </div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Workflows</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Emails</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Manual Emails</a>
        <a href="#" class="tw-drawer-subitem">Automated Emails</a>
        <a href="#" class="tw-drawer-subitem">Email Templates</a>
      </div>
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">Notifications</span>
      </a>
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">SMS</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Meeting</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Events</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Calendar</a>
        <a href="#" class="tw-drawer-subitem">Guests</a>
        <a href="#" class="tw-drawer-subitem">Waitlists</a>
        <a href="#" class="tw-drawer-subitem">Forms</a>
      </div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Taster Day</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Configurations</a>
        <a href="#" class="tw-drawer-subitem">Submissions & Timetables</a>
      </div>
    </nav>
  </div>
  <!-- Settings Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="settings"
     aria-label="Settings navigation">
    <div class="tw-sidebar-drawer-header">SETTINGS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Application Form</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Subject Options</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Form Settings</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">School Settings</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Settings</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Navigator</span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Properties</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Security</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu"></div>
    </nav>
  </div>
  <header class="tw-topbar" role="banner">
    <div class="tw-topbar-left">
      <!-- Context Dropdown -->
      <div class="tw-dropdown tw-dropdown-borderless" data-controller="dropdown" data-dropdown-auto-highlight-value="true">
        <button class="tw-dropdown-trigger tw-topbar-dropdown-trigger"
              type="button"
              aria-haspopup="listbox"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
          <span class="tw-dropdown-label tw-dropdown-primary" data-dropdown-target="label">2024/2025 - Year 7 Main Entry</span>
          <svg class="tw-dropdown-chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="m2 5 6 6 6-6"/>
          </svg>
        </button>
        <div class="tw-dropdown-menu tw-dropdown-menu-wide tw-dropdown-menu-scrollable" role="listbox" data-dropdown-target="menu" tabindex="-1">
          <button class="tw-dropdown-item tw-active" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y7-main">
            <span class="tw-dropdown-item-text">2024/2025 - Year 7 Main Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y7-late">
            <span class="tw-dropdown-item-text">2024/2025 - Year 7 Late Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y8">
            <span class="tw-dropdown-item-text">2024/2025 - Year 8 Admissions</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y9">
            <span class="tw-dropdown-item-text">2024/2025 - Year 9 In-Year</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y7-main">
            <span class="tw-dropdown-item-text">2025/2026 - Year 7 Main Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y7-late">
            <span class="tw-dropdown-item-text">2025/2026 - Year 7 Late Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y8">
            <span class="tw-dropdown-item-text">2025/2026 - Year 8 Admissions</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2025-y9">
            <span class="tw-dropdown-item-text">2025/2026 - Year 9 In-Year</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2026-y7-main">
            <span class="tw-dropdown-item-text">2026/2027 - Year 7 Main Entry</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2026-y8">
            <span class="tw-dropdown-item-text">2026/2027 - Year 8 Admissions</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2023-y12">
            <span class="tw-dropdown-item-text">2023/2024 - Year 12 Sixth Form</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
          <button class="tw-dropdown-item" role="option" data-dropdown-target="item" data-action="click->dropdown#select" data-value="2024-y12">
            <span class="tw-dropdown-item-text">2024/2025 - Year 12 Sixth Form</span>
            <svg class="tw-dropdown-item-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
      <!-- Search -->
      <div class="tw-topbar-search">
        <div class="tw-input-group tw-has-icon-start">
          <i class="fa-regular fa-magnifying-glass tw-input-group-icon tw-input-group-icon-start"></i>
          <input type="search" class="tw-form-control" placeholder="Search...">
        </div>
      </div>
    </div>
    <div class="tw-topbar-right">
      <!-- Action Buttons -->
      <button type="button" class="tw-btn tw-btn-outline-success tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Referral Program" data-tooltip-placement-value="bottom">
        <i class="fa-solid fa-gift tw-icon-16"></i>
        Refer<br>
         & Save
      </button>
      <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Discuss Ideas & Submit Feature Requests" data-tooltip-placement-value="bottom">
        <i class="fa-solid fa-users tw-icon-16"></i>
        Applicaa<br>
         Community
      </button>
      <button type="button" class="tw-btn tw-btn-outline-primary tw-btn-multiline" data-controller="tooltip" data-tooltip-content-value="Support & Feature Requests" data-tooltip-placement-value="bottom">
        <i class="fa-solid fa-comment-question tw-icon-16"></i>
        Support<br>
         & Requests
      </button>
      <div class="tw-topbar-action-icons">
        <!-- Notification Icon -->
        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw-topbar-notification-btn" aria-label="Notifications" data-controller="tooltip" data-tooltip-content-value="Notification" data-tooltip-placement-value="bottom">
          <i class="fa-solid fa-bell tw-icon-16"></i>
        </button>
      </div>
      <div class="tw-topbar-divider"></div>
      <!-- User Avatar Dropdown -->
      <div class="tw-dropdown tw-dropdown-icon tw-dropdown-borderless" data-controller="dropdown">
        <button type="button" class="tw-dropdown-trigger tw-topbar-avatar"
              aria-label="User menu"
              aria-haspopup="true"
              aria-expanded="false"
              data-dropdown-target="trigger"
              data-action="click->dropdown#toggle keydown->dropdown#keydown">
          <div class="tw-avatar tw-avatar-primary" role="img" aria-label="Jane Doe">
            <span>JD</span>
          </div>
        </button>
        <div class="tw-dropdown-menu tw-dropdown-menu-end" role="menu" data-dropdown-target="menu" tabindex="-1">
          <div class="tw-dropdown-header">John Doe</div>
          <div class="tw-dropdown-divider"></div>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-circle-sterling tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Referrals & billing</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-lock tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Password & security</span>
          </button>
          <div class="tw-dropdown-divider"></div>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-layer-group tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Multiple form</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-envelope tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Email preferences</span>
          </button>
          <button class="tw-dropdown-item" role="menuitem" data-dropdown-target="item" data-action="click->dropdown#select">
            <i class="fa-regular fa-right-from-bracket tw-dropdown-item-icon"></i>
            <span class="tw-dropdown-item-text">Logout</span>
          </button>
        </div>
      </div>
    </div>
  </header>
  <main class="tw-sidebar-topbar-content-offset tw:bg-background tw-min-screen-height">
    <div class="tw-container-fluid tw-page-container">
      <!-- Page Header -->
      <div class="tw-page-header">
        <div class="tw-page-header-main">
          <a href="/lookbook/preview/projects/enquiries/enquiry_forms" class="tw-page-header-back" aria-label="Go back">
            <i class="fa-solid fa-chevron-left tw-page-header-back-icon"></i>
          </a>
          <div class="tw-page-header-title-group tw:flex tw:items-center tw:gap-2">
            <h1 class="tw-page-header-title" id="form-title">New Enquiry Form</h1>
            <button class="tw-btn tw-btn-icon tw-btn-tertiary" type="button" aria-label="Edit form settings" data-action="click->popup#show">
              <i class="fa-regular fa-pen-to-square"></i>
            </button>
          </div>
        </div>
      </div>
      <!-- Main Content: Two-column tw-card layout -->
      <div class="tw-card tw:p-0 tw:pb-19">
        <div class="tw:flex">
          <!-- Left Column: Form Mode + Settings + Sections Menu -->
          <div class="tw:w-[340px] tw:shrink-0">
            <!-- Form Mode Selector -->
            <div class="tw:p-4 tw:border-b tw:border-neutral-200">
              <div class="tw-h3 tw:font-semibold tw:text-neutral-800 tw:mb-2">Form Mode</div>
              <div class="tw-btn-group tw:w-full">
                <input type="radio" name="form-mode" id="mode-registration" class="tw-btn-check" value="registration" checked data-action="change->new-form#selectMode">
                <label class="tw-btn tw-btn-secondary tw:text-start tw:p-3" for="mode-registration">
                  <div class="tw:flex tw:flex-col tw:items-center tw:gap-2">
                    <i class="fa-solid fa-user-plus tw:text-lg tw:mt-0.5"></i>
                    <div>
                      <div class="tw:font-medium">Registration</div>
                      <div class="tw:text-body-xs tw:text-neutral-500 fw-normal">Collect enquiries only</div>
                    </div>
                  </div>
                </label>
                <input type="radio" name="form-mode" id="mode-content-offer" class="tw-btn-check" value="content-offer" data-action="change->new-form#selectMode">
                <label class="tw-btn tw-btn-secondary tw:text-start tw:p-3" for="mode-content-offer">
                  <div class="tw:flex tw:flex-col tw:items-center tw:gap-2">
                    <i class="fa-solid fa-download tw:text-lg tw:mt-0.5"></i>
                    <div>
                      <div class="tw:font-medium">Content offer</div>
                      <div class="tw:text-body-xs tw:text-neutral-500 fw-normal">Register & receive file</div>
                    </div>
                  </div>
                </label>
              </div>
              <!-- Registration Settings (shown by default) -->
              <div id="registration-settings" class="tw:pt-4">
                <p class="tw:text-body-s tw:text-neutral-500 tw:mb-3">Configure the message users see after submitting the form</p>
                <div class="tw-form-group">
                  <label class="tw-form-label" for="registration-message">Completion message</label>
                  <textarea id="registration-message" class="tw-form-control" rows="3" placeholder="Thank you for your enquiry...">Thank you for registration! You will receive an email on registered details shortly.</textarea>
                </div>
              </div>
              <!-- Content Offer Settings (hidden by default) -->
              <div id="content-offer-settings" class="tw:hidden tw:pt-4">
                <p class="tw:text-body-s tw:text-neutral-500 tw:mb-3">Configure the file that users will receive after submitting the form</p>
                <div class="tw-form-group">
                  <label class="tw-form-label" for="file-title">File title</label>
                  <input type="text" id="file-title" class="tw-form-control" placeholder="e.g., School Prospectus 2025" value="School Prospectus 2026">
                </div>
                <div class="tw-form-group">
                  <div class="tw:flex tw:items-center tw:justify-between tw:mb-2">
                    <label class="tw-form-label tw:mb-0">File to offer</label>
                    <button type="button" class="tw:text-blue-600 tw:text-body-s tw:hover:underline" id="toggle-file-mode">
                      Use file URL instead
                    </button>
                  </div>
                  <!-- Upload Mode (shown by default) -->
                  <div id="file-upload-mode">
                    <div class="tw-file-upload" data-controller="file-upload">
                      <input type="file" class="tw:sr-only"
                             data-file-upload-target="input"
                             data-action="change->file-upload#changed"
                      accept=".pdf,.doc,.docx"
                      aria-label="Choose file to upload">
                      <div>
                        <button class="tw-btn tw-btn-secondary" type="button"
                                data-action="click->file-upload#browse">
                          <i class="fa-solid fa-arrow-up-from-bracket"></i> Upload Files
                        </button>
                      </div>
                      <div class="tw-file-upload-list" data-file-upload-target="list" aria-live="polite">
                        <!-- Pre-loaded file in complete state -->
                        <div class="tw-file-upload-item tw-file-upload-item-complete">
                          <span class="tw-file-upload-item-icon">
                            <i class="fa-solid fa-circle-check"></i>
                          </span>
                          <div class="tw-file-upload-item-content">
                            <span class="tw-file-upload-item-name">School Prospectus 2025.pdf</span>
                            <span class="tw-file-upload-item-meta">1.2 MB — Uploaded</span>
                          </div>
                          <div class="tw-file-upload-item-actions">
                            <button type="button" class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm"
                                    data-action="click->file-upload#remove"
                              aria-label="Remove file">
                              <i class="fa-solid fa-xmark"></i>
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- URL Mode (hidden by default) -->
                  <div id="file-url-mode" class="tw:hidden">
                    <input type="text" class="tw-form-control" placeholder="https://example.com/file.pdf">
                  </div>
                </div>
                <div class="tw-form-group">
                  <label class="tw-form-label" for="button-text">Button text</label>
                  <input type="text" id="button-text" class="tw-form-control" value="Download Now">
                </div>
                <div class="tw-form-group">
                  <label class="tw-form-label" for="content-offer-message">Completion message</label>
                  <textarea id="content-offer-message" class="tw-form-control" rows="3">Thank you for your interest! Your download will begin shortly.</textarea>
                </div>
              </div>
            </div>
            <!-- Sections Menu (hidden by default, shown in edit mode) -->
            <div id="enquiry-form-section-menu" class="tw:hidden tw:py-4 tw:sticky tw:top-16">
              <div class="tw-h3 tw:font-semibold tw:text-neutral-800 tw:mb-2 tw:px-4">Form Sections</div>
              <nav class="tw:flex tw:flex-col">
              </nav>
            </div>
          </div>
          <!-- Right Column: Preview/Edit Area -->
          <div class="tw:flex-1 tw:m-4 tw:ml-0 tw:bg-neutral-100 tw:rounded-lg tw:relative tw:flex tw:flex-col tw:min-h-[600px]">
            <!-- Inner shadow overlay -->
            <div class="tw:absolute tw:inset-0 tw:rounded-lg tw:pointer-events-none" style="box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);"></div>
            <!-- Preview Mode -->
            <div id="form-preview-content">
              <!-- Preview Header -->
              <div class="tw:sticky tw:top-16 tw:z-10 tw:px-6 tw:py-4 tw:bg-neutral-100 tw:rounded-t-lg tw:border-b tw:border-neutral-200 tw:flex tw:items-center tw:justify-between">
                <div class="tw:text-lg tw:font-semibold tw:text-neutral-800">Preview form</div>
                <!-- Hosted/Embedded Toggle -->
                <div class="tw-btn-group">
                  <input type="radio" name="preview-mode" id="preview-hosted" class="tw-btn-check" value="hosted" checked>
                  <label class="tw-btn tw-btn-secondary" for="preview-hosted">
                    <i class="fa-solid fa-globe"></i> Hosted Page
                  </label>
                  <input type="radio" name="preview-mode" id="preview-embedded" class="tw-btn-check" value="embedded">
                  <label class="tw-btn tw-btn-secondary" for="preview-embedded">
                    <i class="fa-solid fa-code"></i> Embedded
                  </label>
                </div>
                <div class="tw:flex tw:items-center tw:gap-3">
                  <button class="tw-btn tw-btn-secondary" type="button" id="btn-edit-form">
                    <i class="fa-solid fa-sliders"></i> Edit form content
                  </button>
                </div>
              </div>
              <!-- Preview Container -->
              <div id="form-preview-container" class="submitter-parents">
                <!-- Preview content loaded via JavaScript -->
              </div>
            </div>
            <!-- Edit Mode (hidden by default) -->
            <div id="form-edit-content" class="tw:hidden tw:flex tw:flex-col tw:flex-1">
              <!-- Edit Header -->
              <div class="tw:sticky tw:top-16 tw:z-10 tw:px-6 tw:py-4 tw:bg-neutral-100 tw:rounded-t-lg tw:border-b tw:border-neutral-200 tw:flex tw:items-center tw:justify-between">
                <div class="tw:text-lg tw:font-semibold tw:text-neutral-800">Edit form content</div>
                <div class="tw:flex tw:items-center tw:gap-3">
                  <button class="tw-btn tw-btn-secondary" type="button">
                    <i class="fa-solid fa-gear"></i> Customise Sections
                  </button>
                  <button class="tw-btn tw-btn-secondary" type="button" id="btn-preview-form">
                    <i class="fa-regular fa-eye"></i> Preview
                  </button>
                </div>
              </div>
              <!-- Sections Container -->
              <div id="sections-container" class="tw:flex-1 tw:p-6 tw:pb-12 tw:space-y-6 tw:overflow-y-auto">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <!-- Fixed Bottom Action Bar -->
  <div class="tw:fixed tw:bottom-0 tw:right-0 tw:bg-white tw:border-t tw:border-neutral-200 tw:px-6 tw:py-4 tw:z-40" style="left: var(--sidebar-width, 56px); box-shadow: 0 -4px 6px -1px rgb(0 0 0 / 0.05);">
    <div class="tw:flex tw:items-center tw:justify-between">
      <button class="tw-btn tw-btn-secondary" type="button">Cancel</button>
      <div class="tw:flex tw:gap-3">
        <button class="tw-btn tw-btn-secondary" type="button">
          <i class="fa-solid fa-check"></i> Publish
        </button>
        <button class="tw-btn tw-btn-primary" type="button">
          <i class="fa-regular fa-floppy-disk"></i> Save Changes
        </button>
      </div>
    </div>
  </div>
  <!-- Form Settings Popup -->
  <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="form-settings-title">
    <div class="tw-popup-header">
      <div>
        <h2 class="tw-popup-header-title" id="form-settings-title">Form Settings</h2>
      </div>
      <button class="tw-popup-close" type="button" aria-label="Close"
              id="btn-close-settings"
              data-action="click->popup#close">
        <i class="fa-solid fa-xmark"></i>
      </button>
    </div>
    <div class="tw-popup-body">
      <div class="tw-form-group">
        <label class="tw-form-label" for="modal-form-name">Form Name</label>
        <input type="text" id="modal-form-name" class="tw-form-control" value="New Enquiry Form" placeholder="Enter form name" data-popup-target="autofocus">
      </div>
      <div class="tw-form-group">
        <label class="tw-form-label" for="modal-form-description">Form description</label>
        <textarea id="modal-form-description" class="tw-form-control" rows="3" placeholder="Optional description for internal use"></textarea>
      </div>
      <div class="tw-form-group">
        <label class="tw-form-label">Who can submit to this form</label>
        <div class="tw:flex tw:gap-4">
          <div class="tw-form-check">
            <input type="radio" name="who-can-submit" id="submit-parents" class="tw-form-check-input" value="parents" checked>
            <label class="tw-form-check-label" for="submit-parents">Parents</label>
          </div>
          <div class="tw-form-check">
            <input type="radio" name="who-can-submit" id="submit-students" class="tw-form-check-input" value="students">
            <label class="tw-form-check-label" for="submit-students">Students</label>
          </div>
          <div class="tw-form-check">
            <input type="radio" name="who-can-submit" id="submit-both" class="tw-form-check-input" value="both">
            <label class="tw-form-check-label" for="submit-both">Both</label>
          </div>
        </div>
      </div>
    </div>
    <div class="tw-popup-footer">
      <button class="tw-btn tw-btn-secondary" type="button"
              id="btn-cancel-settings"
              data-action="click->popup#close">Cancel</button>
      <button class="tw-btn tw-btn-primary" type="button" id="btn-save-settings">Save</button>
    </div>
  </div>
</div>
<script type="module">
  import {
    initInlineFormPreview,
    switchInlinePreviewMode,
    showFormEditMode,
    showFormPreviewMode,
    handleSubmitEnquiry,
    showChildDetailsModal,
    deleteChild,
    editChild,
    updateChildrenTableInPreview,
    continueBothForm,
    goBackToBothSelection,
    setFormSectionData
  } from 'enquiry_forms'
  // ============================================
  // Form Section Data Dictionary
  // ============================================
  const PARENT_CARER_DETAILS = {
    id: 'parent-carer-details',
    title: 'Parent / Carer Details',
    menuLabel: 'Parent / Carer Details',
    subtitle: 'Always Required',
    sectionVisible: true,
    highlight: null,
    questions: [
      { label: 'Parent / carer name', description: null, required: true, visible: true, switchOn: true, deletable: false },
      { label: 'Relationship to student', description: 'e.g., mother, father, guardian', required: true, visible: true, switchOn: true, deletable: false },
      { label: 'Email address', description: null, required: true, visible: true, switchOn: true, deletable: false },
      { label: 'Telephone number', description: 'mobile or landline', required: true, visible: true, switchOn: true, deletable: false }
    ]
  }
  const STUDENT_DETAILS = {
    id: 'student-details',
    title: 'Student Details',
    menuLabel: 'Student Details',
    subtitle: 'Minimal, Non-Sensitive Pre-Enrolment',
    sectionVisible: true,
    highlight: null,
    questions: [
      { label: "Student's first name", description: null, required: true, visible: true, switchOn: true, deletable: false },
      { label: "Student's last name", description: null, required: true, visible: true, switchOn: true, deletable: false },
      { label: "Student's current school", description: null, required: false, visible: true, switchOn: true, deletable: true },
      { label: "Student's current year group", description: null, required: false, visible: true, switchOn: true, deletable: true },
      { label: "Student's date of birth", description: 'sometimes requested for identification', required: false, visible: true, switchOn: true, deletable: true }
    ]
  }
  const COURSE_PROGRAMME_INTEREST = {
    id: 'course-programme-interest',
    title: 'Course / Programme Interest',
    menuLabel: 'Course / Programme Interest',
    subtitle: null,
    sectionVisible: true,
    highlight: null,
    questions: [
      { label: 'Course(s) or subject(s) student is interested in', description: null, required: false, visible: true, switchOn: true, deletable: true },
      { label: 'Level of study', description: 'A Level, T Level, BTEC, GCSE, etc.', required: false, visible: true, switchOn: true, deletable: true },
      { label: 'Preferred year of entry / start date', description: null, required: false, visible: true, switchOn: true, deletable: true }
    ]
  }
  const ENQUIRY_MESSAGE = {
    id: 'enquiry-message',
    title: 'Enquiry / Message',
    menuLabel: 'Enquiry / Message',
    subtitle: null,
    sectionVisible: true,
    highlight: null,
    questions: [
      { label: 'Reason for enquiry / message', description: 'free-text field', required: false, visible: true, switchOn: true, deletable: true },
      { label: 'How the college can assist / what information is requested', description: 'sometimes combined with above', required: false, visible: true, switchOn: true, deletable: true }
    ]
  }
  const COMMUNICATION_CONSENT = {
    id: 'communication-consent',
    title: 'Communication & Consent',
    menuLabel: 'Communication & Consent',
    subtitle: null,
    sectionVisible: true,
    highlight: null,
    questions: [
      { label: 'Consent to be contacted by email', description: null, required: true, visible: true, switchOn: true, deletable: false },
      { label: 'Consent to be contacted by phone / SMS', description: null, required: false, visible: true, switchOn: true, deletable: true },
      { label: 'Acknowledgement of privacy policy', description: null, required: true, visible: true, switchOn: true, deletable: false }
    ]
  }
  const OPTIONAL_ADDITIONAL = {
    id: 'optional-additional',
    title: 'Optional / Common Additional Questions',
    menuLabel: 'Optional / Additional',
    subtitle: null,
    sectionVisible: false,
    highlight: 'warning',
    questions: [
      { label: 'How did you hear about the college?', description: null, required: false, visible: false, switchOn: false, deletable: true },
      { label: 'Would you like to receive information about open days or events?', description: null, required: false, visible: false, switchOn: false, deletable: true },
      { label: 'Postcode / home area', description: 'to check catchment or travel options', required: false, visible: false, switchOn: false, deletable: true }
    ]
  }
  // Student-specific sections
  const STUDENT_CONTACT_DETAILS = {
    id: 'student-contact-details',
    title: 'Student Contact Details',
    menuLabel: 'Student Contact Details',
    subtitle: 'Your Contact Information',
    sectionVisible: true,
    highlight: null,
    questions: [
      { label: 'Your full name', description: null, required: true, visible: true, switchOn: true, deletable: false },
      { label: 'Email address', description: null, required: true, visible: true, switchOn: true, deletable: false },
      { label: 'Telephone number', description: 'mobile or landline', required: true, visible: true, switchOn: true, deletable: false }
    ]
  }
  const ADDRESS = {
    id: 'address',
    title: 'Address',
    menuLabel: 'Address',
    subtitle: null,
    sectionVisible: true,
    highlight: null,
    questions: [
      { label: 'Address line 1', description: null, required: true, visible: true, switchOn: true, deletable: false },
      { label: 'Address line 2', description: null, required: false, visible: true, switchOn: true, deletable: true },
      { label: 'Town / City', description: null, required: true, visible: true, switchOn: true, deletable: false },
      { label: 'Postcode', description: null, required: true, visible: true, switchOn: true, deletable: false }
    ]
  }
  const FORM_SECTION_DATA = {
    parents: {
      sections: [PARENT_CARER_DETAILS, { ...STUDENT_DETAILS, for_child: true }, { ...COURSE_PROGRAMME_INTEREST, for_child: true }, { ...ENQUIRY_MESSAGE, for_child: true }, COMMUNICATION_CONSENT, OPTIONAL_ADDITIONAL]
    },
    students: {
      sections: [STUDENT_CONTACT_DETAILS, ADDRESS, COURSE_PROGRAMME_INTEREST, ENQUIRY_MESSAGE, COMMUNICATION_CONSENT, OPTIONAL_ADDITIONAL]
    },
    both: {
      sections: [PARENT_CARER_DETAILS, STUDENT_CONTACT_DETAILS, STUDENT_DETAILS, ADDRESS, COURSE_PROGRAMME_INTEREST, ENQUIRY_MESSAGE, COMMUNICATION_CONSENT, OPTIONAL_ADDITIONAL]
    }
  }
  // ============================================
  // Dynamic Section Rendering
  // ============================================
  function renderQuestionRow(question, sectionVisible) {
    const trOpen = !sectionVisible ? '<tr class="tw:opacity-60">' : '<tr>'
    const checkedAttr = question.visible ? ' checked' : ''
    const switchChecked = question.switchOn ? ' checked' : ''
    const requiredBadge = question.required
      ? ' <span class="tw-badge tw-badge-danger-subtle tw-badge-sm tw:ml-1">Required</span>'
      : ''
    const descriptionHtml = question.description
      ? `\n                            <div class="tw:text-body-xs tw:text-neutral-500 tw:mt-1">${question.description}</div>`
      : ''
    const deleteBtn = question.deletable
      ? `\n                            <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm tw:text-danger" type="button" aria-label="Delete">\n                              <i class="fa-regular fa-trash-can"></i>\n                            </button>`
      : ''
    return `${trOpen}
                          <td>
                            <div class="tw:font-medium">${question.label}${requiredBadge}</div>${descriptionHtml}
                          </td>
                          <td class="tw:text-center">
                            <div class="tw:flex tw:items-center tw:justify-center tw:gap-2">
                              <input type="checkbox"${checkedAttr} class="tw-form-check-input">
                              <label class="tw-form-switch tw:mb-0">
                                <input type="checkbox"${switchChecked}>
                              </label>
                            </div>
                          </td>
                          <td class="tw-table-cell-actions">
                            <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm" type="button" aria-label="Edit">
                              <i class="fa-solid fa-pen"></i>
                            </button>${deleteBtn}
                          </td>
                        </tr>`
  }
  function renderSectionCard(section) {
    const highlightCard = section.highlight === 'warning' ? ' tw:border-warning-400' : ''
    const highlightHeader = section.highlight === 'warning' ? ' tw:bg-warning-100' : ''
    const sectionChecked = section.sectionVisible ? ' checked' : ''
    const badgeClass = section.sectionVisible ? 'tw-badge-info-subtle' : 'tw-badge-secondary-subtle'
    const badgeText = section.sectionVisible ? 'ON' : 'OFF'
    let headerLeft
    if (section.subtitle) {
      headerLeft = `<div>
                      <div class="tw:flex tw:items-center tw:gap-2">
                        <h3 class="tw-card-title tw:mb-0">${section.title}</h3>
                        <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm" type="button" aria-label="Edit section name">
                          <i class="fa-solid fa-pen icon-12"></i>
                        </button>
                      </div>
                      <div class="tw:text-body-xs tw:text-neutral-500 tw:font-normal tw:-mt-1">${section.subtitle}</div>
                    </div>`
    } else {
      headerLeft = `<div class="tw:flex tw:items-center tw:gap-2">
                      <h3 class="tw-card-title tw:mb-0">${section.title}</h3>
                      <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-sm" type="button" aria-label="Edit section name">
                        <i class="fa-solid fa-pen"></i>
                      </button>
                    </div>`
    }
    const rows = section.questions.map(q => renderQuestionRow(q, section.sectionVisible)).join('\n')
    return `<div id="section-${section.id}" class="tw-card${highlightCard}">
                  <div class="tw-card-header tw:flex tw:items-center tw:justify-between tw:py-3${highlightHeader}">
                    ${headerLeft}
                    <div class="tw:flex tw:items-center tw:gap-2">
                      <button class="tw-btn tw-btn-secondary" type="button">
                        <i class="fa-solid fa-arrows-up-down"></i> Sort Questions
                      </button>
                      <button class="tw-btn tw-btn-primary" type="button">
                        <i class="fa-solid fa-plus"></i> New Question
                      </button>
                    </div>
                  </div>
                  <div class="tw-table-responsive">
                    <table class="tw-table tw:mb-0">
                      <thead>
                        <tr>
                          <th>Question</th>
                          <th class="tw:text-center tw:w-[200px]">
                            <div class="tw:flex tw:flex-col tw:items-center">
                              <span>Visible on registration</span>
                              <div class="tw:flex tw:items-center tw:gap-2 tw:mt-1">
                                <input type="checkbox"${sectionChecked} class="tw-form-check-input">
                                <span class="tw-badge ${badgeClass} tw-badge-sm">${badgeText}</span>
                              </div>
                            </div>
                          </th>
                          <th class="tw:text-center tw:w-[100px]">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        ${rows}
                      </tbody>
                    </table>
                  </div>
                </div>`
  }
  function renderMenuItem(section, isActive) {
    if (isActive) {
      return `<button type="button" class="section-menu-item tw:px-3.5 tw:py-2.5 tw:text-start tw:border-l-4 tw:border-primary tw:bg-blue-50 tw:text-primary tw:font-medium tw:text-body-s" data-section="${section.id}">
                  ${section.menuLabel}
                </button>`
    }
    return `<button type="button" class="section-menu-item tw:px-3.5 tw:py-2.5 tw:text-start tw:border-l-4 tw:border-transparent tw:hover:bg-neutral-100 tw:text-neutral-700 tw:text-body-s" data-section="${section.id}">
                  ${section.menuLabel}
                </button>`
  }
  function attachSectionMenuHandlers() {
    document.querySelectorAll('.section-menu-item').forEach(item => {
      item.addEventListener('click', (e) => {
        const sectionId = e.currentTarget.dataset.section
        const section = document.getElementById(`section-${sectionId}`)
        document.querySelectorAll('.section-menu-item').forEach(i => {
          i.classList.remove('tw:border-primary', 'tw:bg-blue-50', 'tw:text-primary', 'tw:font-medium')
          i.classList.add('tw:border-transparent', 'tw:text-neutral-700')
        })
        e.currentTarget.classList.add('tw:border-primary', 'tw:bg-blue-50', 'tw:text-primary', 'tw:font-medium')
        e.currentTarget.classList.remove('tw:border-transparent', 'tw:text-neutral-700')
        section?.scrollIntoView({ behavior: 'smooth', block: 'start' })
      })
    })
  }
  function renderSections(sections) {
    const container = document.getElementById('sections-container')
    const nav = document.querySelector('#enquiry-form-section-menu nav')
    if (container) {
      container.innerHTML = sections.map(s => renderSectionCard(s)).join('\n\n')
      container.scrollTo(0, 0)
    }
    if (nav) {
      nav.innerHTML = sections.map((s, i) => renderMenuItem(s, i === 0)).join('\n')
    }
    attachSectionMenuHandlers()
  }
  function getSelectedFormTarget() {
    return document.querySelector('input[name="who-can-submit"]:checked')?.value || 'parents'
  }
  // Get preview container reference
  const previewContainer = document.getElementById('form-preview-container')
  // ============================================
  // Bridge globals for onclick in dynamically generated HTML
  // ============================================
  window.showChildDetailsModal = () => {
    showChildDetailsModal(previewContainer)
  }
  window.handleSubmitEnquiry = () => {
    const isEmbedded = document.getElementById('preview-embedded')?.checked
    handleSubmitEnquiry({
      popupBodyEl: previewContainer,
      formMode: 'registration',
      isEmbedded: isEmbedded
    })
  }
  window.deleteChild = (childId) => {
    deleteChild(childId)
    updateChildrenTableInPreview()
  }
  window.editChild = (childId) => {
    editChild(childId, () => showChildDetailsModal(previewContainer))
  }
  window.continueBothForm = () => {
    continueBothForm()
  }
  window.goBackToBothSelection = () => {
    goBackToBothSelection()
  }
  // Initialize preview (module scripts are deferred, so DOM is ready)
  setFormSectionData(FORM_SECTION_DATA)
  initInlineFormPreview()
  renderSections(FORM_SECTION_DATA.parents.sections)
  // Preview mode toggle (Hosted/Embedded)
  document.querySelectorAll('input[name="preview-mode"]').forEach(radio => {
    radio.addEventListener('change', (e) => {
      switchInlinePreviewMode(e.target.value)
    })
  })
  // Edit form content button
  document.getElementById('btn-edit-form')?.addEventListener('click', () => {
    showFormEditMode()
  })
  // Preview button (from edit mode)
  document.getElementById('btn-preview-form')?.addEventListener('click', () => {
    showFormPreviewMode()
  })
  // Form mode toggle (Registration/Content Offer)
  document.querySelectorAll('input[name="form-mode"]').forEach(radio => {
    radio.addEventListener('change', (e) => {
      const registrationSettings = document.getElementById('registration-settings')
      const contentOfferSettings = document.getElementById('content-offer-settings')
      if (e.target.value === 'content-offer') {
        registrationSettings?.classList.add('tw:hidden')
        contentOfferSettings?.classList.remove('tw:hidden')
      } else {
        registrationSettings?.classList.remove('tw:hidden')
        contentOfferSettings?.classList.add('tw:hidden')
      }
    })
  })
  // File mode toggle (Upload / URL)
  const toggleFileModeBtn = document.getElementById('toggle-file-mode')
  const fileUploadMode = document.getElementById('file-upload-mode')
  const fileUrlMode = document.getElementById('file-url-mode')
  toggleFileModeBtn?.addEventListener('click', () => {
    const isUploadMode = !fileUploadMode.classList.contains('tw:hidden')
    if (isUploadMode) {
      // Switch to URL mode
      fileUploadMode.classList.add('tw:hidden')
      fileUrlMode.classList.remove('tw:hidden')
      toggleFileModeBtn.textContent = 'Use upload file instead'
    } else {
      // Switch to Upload mode
      fileUrlMode.classList.add('tw:hidden')
      fileUploadMode.classList.remove('tw:hidden')
      toggleFileModeBtn.textContent = 'Use file URL instead'
    }
  })
  // Who can submit - update preview container class + re-render sections
  document.querySelectorAll('input[name="who-can-submit"]').forEach(radio => {
    radio.addEventListener('change', (e) => {
      const container = document.getElementById('form-preview-container')
      if (container) {
        container.classList.remove('submitter-parents', 'submitter-students', 'submitter-both')
        container.classList.add(`submitter-${e.target.value}`)
        initInlineFormPreview()
      }
      renderSections(FORM_SECTION_DATA[e.target.value].sections)
    })
  })
  // Save settings button — refresh preview + re-render sections
  document.getElementById('btn-save-settings')?.addEventListener('click', () => {
    const formTarget = getSelectedFormTarget()
    renderSections(FORM_SECTION_DATA[formTarget].sections)
    initInlineFormPreview()
  })
</script>
<script>
  // Auto-open Form Settings popup on page load
  // Classic script (not module) so Turbo re-evaluates it on navigation
  (function() {
    var el = document.querySelector('[data-controller*="popup"]')
    if (!el) return
    var overlay = el.querySelector('.tw-popup-overlay')
    var panel = el.querySelector('.tw-popup-panel')
    if (!overlay || !panel) return
    // Open popup
    overlay.classList.add('tw-popup-visible')
    panel.classList.add('tw-popup-visible')
    document.body.style.overflow = 'hidden'
    // ── Create / Save state ──
    var formCreated = false
    var saveBtn = document.getElementById('btn-save-settings')
    var cancelBtn = document.getElementById('btn-cancel-settings')
    var closeBtn = document.getElementById('btn-close-settings')
    var backUrl = '/lookbook/preview/projects/enquiries/enquiry_forms'
    // Initial button text
    if (saveBtn) saveBtn.textContent = 'Create'
    // Redirect helper
    function goBack() {
      if (window.Turbo) {
        Turbo.visit(backUrl)
      } else {
        window.location.href = backUrl
      }
    }
    // Intercept dismiss actions — redirect if form not yet created
    function handleInitialDismiss(e) {
      if (!formCreated) {
        e.preventDefault()
        e.stopImmediatePropagation()
        goBack()
      }
    }
    cancelBtn?.addEventListener('click', handleInitialDismiss)
    closeBtn?.addEventListener('click', handleInitialDismiss)
    overlay?.addEventListener('click', handleInitialDismiss)
    // Escape key — redirect if not created
    function handleInitialEscape(e) {
      if (e.key === 'Escape' && !formCreated) {
        e.preventDefault()
        goBack()
      }
    }
    document.addEventListener('keydown', handleInitialEscape)
    // Create/Save button — state transition + close popup
    saveBtn?.addEventListener('click', function() {
      if (!formCreated) {
        formCreated = true
        saveBtn.textContent = 'Save'
        document.removeEventListener('keydown', handleInitialEscape)
      }
      // Update form title
      var formName = document.getElementById('modal-form-name')?.value
      var formTitle = document.getElementById('form-title')
      if (formTitle && formName) formTitle.textContent = formName
      // Close popup
      overlay.classList.remove('tw-popup-visible')
      panel.classList.remove('tw-popup-visible')
      document.body.style.overflow = ''
    })
  })()
</script>