<link rel="stylesheet" href="/assets/grapesjs-18325f95.css" data-turbo-track="reload" />
<link rel="stylesheet" href="/assets/grapesjs_bridge-59ca85d1.css" data-turbo-track="reload" />
<div data-controller="sidebar">
  <aside class="tw-sidebar">
    <!-- Logo -->
    <div class="tw-sidebar-logo">
      <a href="#" class="tw-sidebar-logo-link">
        <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M37.47 38L29.43 17.99H26.34L18.27 38H21.12L22.89 33.53H32.85L34.62 38H37.47ZM32.13 31.34H23.64L27.87 20.54L32.13 31.34Z" fill="white"/>
          <path d="M39 18V14H37V18H33V20H37V24H39V20H43V18H39Z" fill="#EC634B"/>
        </svg>
      </a>
    </div>
    <!-- Navigation -->
    <nav class="tw-sidebar-nav" role="navigation" aria-label="Main navigation">
      <!-- Insights -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="insights"
        data-label="Insights"
        aria-expanded="false">
        <i class="fa-light fa-chart-mixed tw-sidebar-icon"></i>
        <span class="tw:sr-only">Insights</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
      </button>
      <!-- Parents & Enquiries -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="parents"
        data-label="Parents & Enquiries"
        aria-expanded="false">
        <i class="fa-light fa-user-group tw-sidebar-icon"></i>
        <span class="tw:sr-only">Parents & Enquiries</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">New</span>
      </button>
      <!-- Communications & Events -->
      <button type="button"
            class="tw-sidebar-item tw-active"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="communications"
        data-label="Communications & Events"
        aria-expanded="false">
        <i class="fa-light fa-comment-alt-lines tw-sidebar-icon"></i>
        <span class="tw:sr-only">Communications & Events</span>
      </button>
      <!-- Registered Students -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="students"
        data-label="Registered Students"
        aria-expanded="false">
        <i class="fa-light fa-users tw-sidebar-icon"></i>
        <span class="tw:sr-only">Registered Students</span>
      </button>
      <!-- Marketing -->
      <!-- <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
            data-drawer="marketing"
            data-label="Marketing"
            aria-expanded="false">
      <svg class="tw-sidebar-icon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M14.7461 2.38281C13.875 2.13281 12.9531 2 12 2C6.47656 2 2 6.47656 2 12C2 17.5234 6.47656 22 12 22C17.5234 22 22 17.5234 22 12C22 11.0469 21.8672 10.125 21.6172 9.25391L20.7266 10.2461C20.6836 10.293 20.6445 10.3359 20.5977 10.3789C20.6953 10.9062 20.7461 11.4453 20.7461 12C20.7461 16.832 16.8281 20.75 11.9961 20.75C7.16406 20.75 3.25 16.832 3.25 12C3.25 7.16797 7.16797 3.25 12 3.25C12.5547 3.25 13.0977 3.30078 13.6211 3.39844C13.6641 3.35547 13.707 3.3125 13.7539 3.26953L14.7461 2.38281ZM12.7266 5.79297C12.4883 5.76562 12.2461 5.75 12 5.75C8.54687 5.75 5.75 8.54687 5.75 12C5.75 15.4531 8.54687 18.25 12 18.25C15.4531 18.25 18.25 15.4531 18.25 12C18.25 11.7539 18.2344 11.5117 18.207 11.2734C18.1016 11.2656 17.9961 11.2539 17.8906 11.2383L16.9141 11.0742C16.9687 11.375 17 11.6836 17 12C17 14.7617 14.7617 17 12 17C9.23828 17 7 14.7617 7 12C7 9.23828 9.23828 7 12 7C12.3164 7 12.625 7.03125 12.9258 7.08594L12.7617 6.10937C12.7422 6.00391 12.7305 5.89844 12.7266 5.79297ZM15.3398 9.54687L18.0898 10.0039C18.7266 10.1094 19.3711 9.88281 19.8008 9.39844L21.5156 7.46875C21.9727 6.95703 21.7422 6.14453 21.0859 5.94922L18.7539 5.25L18.0508 2.91406C17.8555 2.25781 17.043 2.02734 16.5312 2.48437L14.6016 4.19922C14.1211 4.62891 13.8906 5.27344 13.9961 5.91016L14.4531 8.66016L11.5547 11.5586C11.3125 11.8008 11.3125 12.1992 11.5547 12.4414C11.7969 12.6836 12.1953 12.6836 12.4375 12.4414L15.3359 9.54297L15.3398 9.54687ZM16.4258 8.46094L18.4297 6.45703L20.2578 7.00391L18.8672 8.56641C18.7227 8.72656 18.5078 8.80469 18.2969 8.76953L16.4258 8.45703V8.46094ZM17.543 5.57422L15.5391 7.57813L15.2266 5.70703C15.1914 5.49609 15.2656 5.28125 15.4297 5.13672L16.9922 3.74609L17.5391 5.57422H17.543Z" fill="currentColor" stroke="none"/>
      </svg>
      <span class="tw:sr-only">Marketing</span>
      <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">128</span>
    </button> -->
      <!-- Enrolments -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="enrolments"
        data-label="Enrolments"
        aria-expanded="false">
        <i class="fa-light fa-file-alt tw-sidebar-icon"></i>
        <span class="tw:sr-only">Enrolments</span>
      </button>
      <!-- Applicaa Futures -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="applicaafutures"
        data-label="Applicaa Futures"
        aria-expanded="false">
        <i class="fa-light fa-graduation-cap tw-sidebar-icon"></i>
        <span class="tw:sr-only">Applicaa Futures</span>
      </button>
      <!-- Data -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="data"
        data-label="Data"
        aria-expanded="false">
        <i class="fa-light fa-cloud-upload tw-sidebar-icon"></i>
        <span class="tw:sr-only">Data</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">160</span>
      </button>
      <!-- Manage Users -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="manageusers"
        data-label="Manage Users"
        aria-expanded="false">
        <i class="fa-light fa-users-cog tw-sidebar-icon"></i>
        <span class="tw:sr-only">Manage Users</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">218</span>
      </button>
      <!-- Platform Essentials -->
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="essentials"
        data-label="Platform Essentials"
        aria-expanded="false">
        <i class="fa-light fa-bell tw-sidebar-icon"></i>
        <span class="tw:sr-only">Platform Essentials</span>
        <span class="tw-badge tw-badge-danger tw-badge-sm tw-badge-notification-ceil">90</span>
      </button>
    </nav>
    <!-- Bottom Section -->
    <div class="tw-sidebar-bottom">
      <button type="button"
            class="tw-sidebar-item"
            data-sidebar-target="item"
            data-action="click->sidebar#toggleDrawer"
        data-drawer="settings"
        data-label="Settings"
        aria-expanded="false">
        <i class="fa-light fa-cogs tw-sidebar-icon"></i>
        <span class="tw:sr-only">Settings</span>
      </button>
    </div>
  </aside>
  <!-- Parents & Enquiries Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="parents"
     aria-label="Parents & Enquiries navigation">
    <div class="tw-sidebar-drawer-header">PARENTS & ENQUIRIES</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item tw-disabled">
        <span class="tw-drawer-item-label">Parents</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enquiries</span>
      </a>
    </nav>
  </div>
  <!-- Insights Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="insights"
     aria-label="Insights navigation">
    <div class="tw-sidebar-drawer-header">INSIGHTS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Summary</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Pipeline</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Map view</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Feeder schools</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Events</span>
      </a>
    </nav>
  </div>
  <!-- Registered Students Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="students"
     aria-label="Registered Students navigation">
    <div class="tw-sidebar-drawer-header">REGISTERED STUDENTS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Incomplete</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Awaiting Reference
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Completed
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Declined</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Withdrawn</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Deadline Missed</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Skipped Payment</span>
      </a>
    </nav>
  </div>
  <!-- Enrolments Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="enrolments"
     aria-label="Enrolments navigation">
    <div class="tw-sidebar-drawer-header">BULK ENROLMENT</div>
    <nav class="tw-drawer-nav">
      <a href="/lookbook/preview/projects/enrolment/bulk_enrolment" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Bulk Enrolment</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">
      ENROLMENT
      <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive tw:normal-case"
          data-controller="demo"
          data-action="click->demo#show"
        data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
        data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
        data-demo-learn-more="https://helpdesk.applicaa.com/">
        <i class="fa-regular fa-clapperboard-play"></i>
        Demo
      </span>
    </div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Details to be checked</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Ready to Enrol</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolled</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Waiting</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Declined</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Activities</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">REPORT</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Enrolment Report</span>
      </a>
    </nav>
    <div class="tw-sidebar-drawer-header">POST ENROLMENT</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">CTF/File Request</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Transition Tool</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Sorting Hat</span>
      </a>
    </nav>
  </div>
  <!-- Applicaa Futures Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="applicaafutures"
     aria-label="Applicaa Futures navigation">
    <div class="tw-sidebar-drawer-header">APPLICAA FUTURES</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">One Reference</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Destination Tracker</span>
      </a>
    </nav>
  </div>
  <!-- Data Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="data"
     aria-label="Data navigation">
    <div class="tw-sidebar-drawer-header">DATA</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Import</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Export
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Uploaded Files</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          First Media Applications
          <span class="tw-badge tw-badge-danger tw-badge-sm">182</span>
        </span>
      </a>
    </nav>
  </div>
  <!-- Manage Users Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="manageusers"
     aria-label="Manage Users navigation">
    <div class="tw-sidebar-drawer-header">MANAGE USERS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Manually Add People</span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Duplicate Students
          <span class="tw-badge tw-badge-danger tw-badge-sm">211</span>
          <span class="tw-tag tw-tag-sm tw-tag-info-subtle tw-tag-interactive"
              data-controller="demo"
              data-action="click->demo#show"
            data-demo-loom-url="https://www.loom.com/embed/57b221906926464089a56d85e8eeefa9?sid=ab3b24a5-9f76-4b64-99ce-a54356ba6d80"
            data-demo-text="This is the demo for the feature\nThis is the next paragraph of texts"
            data-demo-learn-more="https://helpdesk.applicaa.com/">
            <i class="fa-regular fa-clapperboard-play"></i>
            Demo
          </span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Duplicate Agencies
          <span class="tw-badge tw-badge-danger tw-badge-sm">7</span>
        </span>
      </a>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Duplicate Contacts</span>
      </a>
    </nav>
  </div>
  <!-- Platform Essentials Drawer -->
  <div class="tw-sidebar-drawer"
     data-sidebar-target="drawer"
     data-drawer-id="essentials"
     aria-label="Platform Essentials navigation">
    <div class="tw-sidebar-drawer-header">PLATFORM ESSENTIALS</div>
    <nav class="tw-drawer-nav">
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">
          Applicaa Journey
          <span class="tw-badge tw-badge-danger tw-badge-sm">13</span>
        </span>
      </a>
      <button type="button"
            class="tw-drawer-item"
            data-action="click->sidebar#toggleSubmenu"
        aria-expanded="false">
        <span class="tw-drawer-item-label">Product Requests & Updates</span>
        <svg class="tw-drawer-chevron" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M6 4l4 4-4 4"></path>
        </svg>
      </button>
      <div class="tw-drawer-submenu" data-sidebar-target="submenu">
        <a href="#" class="tw-drawer-subitem">Feature Requests</a>
        <a href="#" class="tw-drawer-subitem">Road Map</a>
        <a href="#" class="tw-drawer-subitem">Vote</a>
        <a href="#" class="tw-drawer-subitem">Recent Updates</a>
      </div>
      <a href="#" class="tw-drawer-item">
        <span class="tw-drawer-item-label">Time Saved With Admissions+</span>
      </a>
    </nav>
  </div>
  <!-- Communications & Events Drawer -->
  <div class="tw-sidebar-drawer tw-open"
     data-sidebar-target="drawer"
     data-drawer-id="communications"
     aria-label="Communications & Events navigation">
    <div class="tw-sidebar-drawer-header">COMMUNICATIONS & EVENTS</div>
    <nav class="tw-drawer-nav">
      <!-- Communications Section (expandable) -->
      <button type="button"
            class="tw-drawer-item tw-active"
            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 tw-active">
          <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-h-screen-offset tw:flex tw:flex-col tw:overflow-hidden"
        data-controller="grapes-editor"
        data-grapes-editor-canvas-css-value="/assets/tailwind-ed2f1700.css"
        data-grapes-editor-canvas-fa-value="/assets/fontawesome/all.min-6c32eb6d.css">
    <div class="tw-canvas-topbar">
      <div class="tw:flex tw:items-center tw:gap-3">
        <a href="/lookbook/preview/projects/communications/templates"
           data-turbo="false"
           class="tw-btn tw-btn-tertiary tw-btn-sm">
          <i class="fa-regular fa-arrow-left tw:mr-1"></i> Back
        </a>
        <div class="tw:h-6 tw:w-px tw:bg-neutral-200"></div>
        <h1 class="tw:text-sm tw:font-semibold tw:text-neutral-700 tw:m-0" data-grapes-editor-target="builderTitle">Welcome Email</h1>
        <span class="tw-badge tw-badge-sm tw-badge-primary-subtle">Email</span>
        <span class="tw-badge tw-badge-sm tw-badge-info-subtle" data-grapes-editor-target="purposeBadge">Transactional</span>
        <span class="tw-badge tw-badge-sm tw-badge-warning-subtle" data-grapes-editor-target="keyEmailBadge">Key Email</span>
      </div>
      <div class="tw:flex tw:items-center tw:gap-2">
        <a class="tw-btn tw-btn-tertiary tw-btn-sm"
           href="/lookbook/preview/projects/communications/templates"
           data-turbo="false">
          Cancel
        </a>
        <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button">Save as Draft</button>
        <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button">Save Template</button>
        <button class="tw-btn tw-btn-primary tw-btn-sm" type="button">
          <i class="fa-regular fa-paper-plane tw:mr-1"></i> Save & Send Now
        </button>
      </div>
    </div>
    <div class="tw-canvas-body">
      <div class="tw:w-2/5 tw:min-w-[320px] tw:max-w-[320px] tw:shrink-0 tw:bg-white tw:border-r tw:border-neutral-200 tw:overflow-y-auto" data-controller="tabs">
        <div class="tw:border-b tw:border-neutral-200 tw:px-4 tw:pt-2 tw:sticky tw:top-0 tw:bg-white tw:z-10">
          <div class="tw-tabs tw-tabs-justified" role="tablist">
            <button class="tw-tab tw-active"
                    role="tab"
                    aria-selected="true"
                    data-tabs-target="tab"
                    data-action="click->tabs#select keydown->tabs#keydown"
              type="button">
              Set Up
            </button>
            <button class="tw-tab"
                    role="tab"
                    aria-selected="false"
                    data-tabs-target="tab"
                    data-action="click->tabs#select keydown->tabs#keydown"
              type="button">
              Content
            </button>
            <button class="tw-tab tw:text-nowrap"
                    role="tab"
                    aria-selected="false"
                    data-tabs-target="tab"
                    data-action="click->tabs#select keydown->tabs#keydown"
              type="button">
              Advanced Settings
            </button>
          </div>
        </div>
        <div>
          <div class="tw-tab-panel tw-active tw:p-4 tw:pt-6" role="tabpanel" data-tabs-target="panel">
            <div class="tw-form-section tw:space-y-5">
              <h3 class="tw-form-section-title tw:mb-2">Template Setup</h3>
              <div class="tw-form-group tw:pt-2">
                <label for="enhancedTemplateName" class="tw-form-label tw-form-label-required">Template Name</label>
                <input type="text" id="enhancedTemplateName" class="tw-form-control" value="Welcome Email" aria-required="true"
                       data-meta-field="templateName"
                       data-action="input->grapes-editor#updateMetadata">
              </div>
              <div class="tw-form-group tw:pt-2">
                <label for="enhancedFolder" class="tw-form-label tw-form-label-optional">Folder</label>
                <select id="enhancedFolder" class="tw-form-select"
                        data-meta-field="folder"
                        data-action="change->grapes-editor#updateMetadata">
                  <option>No folder</option>
                  <option selected>Application & Admissions</option>
                  <option>Offers & Decisions</option>
                  <option>Enrolment</option>
                  <option>Events & Engagement</option>
                </select>
              </div>
              <div class="tw-form-group tw:pt-2">
                <label for="enhancedAudience" class="tw-form-label tw-form-label-required">Target Audience</label>
                <select id="enhancedAudience" class="tw-form-select"
                        data-meta-field="audience"
                        data-action="change->grapes-editor#updateMetadata">
                  <option>Prospective Students</option>
                  <option selected>All Parents & Guardians</option>
                  <option>Current Students</option>
                  <option>Alumni</option>
                  <option>Staff</option>
                  <option>Enquiries</option>
                  <option>Event Registrants</option>
                </select>
              </div>
              <div class="tw-form-group tw:pt-2">
                <label for="enhancedSubject" class="tw-form-label tw-form-label-required">Subject Line</label>
                <input type="text" id="enhancedSubject" class="tw-form-control" value="Welcome to Our School" aria-required="true"
                       data-meta-field="subject"
                       data-action="input->grapes-editor#updateMetadata">
              </div>
              <div class="tw-form-group tw:pt-2">
                <label for="enhancedPreviewText" class="tw-form-label tw-form-label-optional">Preview Text</label>
                <input type="text" id="enhancedPreviewText" class="tw-form-control" value="A warm welcome from our admissions team"
                       data-meta-field="previewText"
                       data-action="input->grapes-editor#updateMetadata">
              </div>
              <div class="tw-form-group tw:pt-2">
                <label for="enhancedSenderName" class="tw-form-label tw-form-label-required">From Name</label>
                <input type="text" id="enhancedSenderName" class="tw-form-control" value="Arbor School Admissions" aria-required="true"
                       data-meta-field="senderName"
                       data-action="input->grapes-editor#updateMetadata">
              </div>
              <div class="tw-form-group tw:pt-2">
                <label for="enhancedSenderEmail" class="tw-form-label tw-form-label-required">Sender Email</label>
                <input type="email" id="enhancedSenderEmail" class="tw-form-control" value="admissions@arborschool.edu" aria-required="true"
                       data-meta-field="senderEmail"
                       data-action="input->grapes-editor#updateMetadata">
              </div>
              <div class="tw-form-group tw:pt-2">
                <label for="enhancedReplyTo" class="tw-form-label tw-form-label-optional">Reply-to Email</label>
                <input type="email" id="enhancedReplyTo" class="tw-form-control" value="replies@arborschool.edu"
                       data-meta-field="replyTo"
                       data-action="input->grapes-editor#updateMetadata">
              </div>
              <div class="tw-form-group tw:pt-2">
                <label class="tw-form-label tw-form-label-required">Communication Purpose</label>
                <div class="tw:grid tw:grid-cols-1 tw:gap-3 tw:sm:grid-cols-1">
                  <div class="tw-card tw-card-selectable-radio tw-card-selectable-hitbox-full">
                    <input type="radio" name="enhancedPurpose" id="enhancedPurposeTransactional" value="transactional" checked
                           data-meta-field="purpose"
                           data-action="change->grapes-editor#updateMetadata">
                    <label for="enhancedPurposeTransactional" class="tw-card-selectable-hitbox-full"></label>
                    <div class="tw-card-body tw:py-3">
                      <h4 class="tw-card-title-sm tw:mb-1">Transactional</h4>
                      <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mb-0">Essential admissions updates that do not require marketing consent.</p>
                    </div>
                  </div>
                  <div class="tw-card tw-card-selectable-radio tw-card-selectable-hitbox-full">
                    <input type="radio" name="enhancedPurpose" id="enhancedPurposeMarketing" value="marketing"
                           data-meta-field="purpose"
                           data-action="change->grapes-editor#updateMetadata">
                    <label for="enhancedPurposeMarketing" class="tw-card-selectable-hitbox-full"></label>
                    <div class="tw-card-body tw:py-3">
                      <h4 class="tw-card-title-sm tw:mb-1">Marketing</h4>
                      <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mb-0">Promotional campaigns, newsletters, and event invitations with unsubscribe handling.</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tw-form-group tw:pt-2">
                <label for="enhancedDescription" class="tw-form-label tw-form-label-optional">Description</label>
                <textarea id="enhancedDescription" class="tw-form-control" rows="3"
                          data-meta-field="description"
                          data-action="input->grapes-editor#updateMetadata">Welcome email sent automatically after a family creates an account or submits an enquiry. Sets expectations for the admissions journey ahead.</textarea>
              </div>
              <div class="tw-form-switch">
                <input class="tw-form-check-input" type="checkbox" id="enhancedKeyEmail" checked
                       data-meta-field="keyEmail"
                       data-action="change->grapes-editor#updateMetadata">
                <div>
                  <label class="tw-form-check-label" for="enhancedKeyEmail">Mark as Key Email</label>
                  <span class="tw-form-text">Key emails stay pinned in the template library and are emphasised in staff workflows.</span>
                </div>
              </div>
            </div>
          </div>
          <div class="tw-tab-panel tw:p-4 tw:pt-6" role="tabpanel" data-tabs-target="panel">
            <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-500 tw:mb-3">
              <i class="fa-regular fa-arrow-right tw:mr-1"></i> Click or Drag a block to add it to the email.
            </p>
            <div class="tw:grid tw:grid-cols-2 tw:gap-2">
              <button type="button"
                      data-block-type="heading"
                      draggable="true"
                      data-action="click->grapes-editor#addBlock dragstart->grapes-editor#paletteDragStart dragend->grapes-editor#paletteDragEnd"
                class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:gap-2 tw:p-4 tw:border tw:border-neutral-200 tw:rounded-lg tw:bg-white tw:hover:border-primary-500 tw:hover:bg-primary-50 tw:cursor-pointer"
                aria-label="Heading block">
                <i class="fa-regular fa-heading tw:text-xl tw:text-neutral-600"></i>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 fw-medium">Heading</span>
              </button>
              <button type="button"
                      data-block-type="text"
                      draggable="true"
                      data-action="click->grapes-editor#addBlock dragstart->grapes-editor#paletteDragStart dragend->grapes-editor#paletteDragEnd"
                class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:gap-2 tw:p-4 tw:border tw:border-neutral-200 tw:rounded-lg tw:bg-white tw:hover:border-primary-500 tw:hover:bg-primary-50 tw:cursor-pointer"
                aria-label="Rich text block">
                <i class="fa-regular fa-paragraph tw:text-xl tw:text-neutral-600"></i>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 fw-medium">Rich text</span>
              </button>
              <button type="button"
                      data-block-type="image"
                      draggable="true"
                      data-action="click->grapes-editor#addBlock dragstart->grapes-editor#paletteDragStart dragend->grapes-editor#paletteDragEnd"
                class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:gap-2 tw:p-4 tw:border tw:border-neutral-200 tw:rounded-lg tw:bg-white tw:hover:border-primary-500 tw:hover:bg-primary-50 tw:cursor-pointer"
                aria-label="Image block">
                <i class="fa-regular fa-image tw:text-xl tw:text-neutral-600"></i>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 fw-medium">Image</span>
              </button>
              <button type="button"
                      data-block-type="button"
                      draggable="true"
                      data-action="click->grapes-editor#addBlock dragstart->grapes-editor#paletteDragStart dragend->grapes-editor#paletteDragEnd"
                class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:gap-2 tw:p-4 tw:border tw:border-neutral-200 tw:rounded-lg tw:bg-white tw:hover:border-primary-500 tw:hover:bg-primary-50 tw:cursor-pointer"
                aria-label="Button block">
                <i class="fa-regular fa-rectangle-wide tw:text-xl tw:text-neutral-600"></i>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 fw-medium">Button</span>
              </button>
              <button type="button"
                      data-block-type="divider"
                      draggable="true"
                      data-action="click->grapes-editor#addBlock dragstart->grapes-editor#paletteDragStart dragend->grapes-editor#paletteDragEnd"
                class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:gap-2 tw:p-4 tw:border tw:border-neutral-200 tw:rounded-lg tw:bg-white tw:hover:border-primary-500 tw:hover:bg-primary-50 tw:cursor-pointer"
                aria-label="Divider block">
                <i class="fa-regular fa-horizontal-rule tw:text-xl tw:text-neutral-600"></i>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 fw-medium">Divider</span>
              </button>
              <button type="button"
                      data-block-type="spacer"
                      draggable="true"
                      data-action="click->grapes-editor#addBlock dragstart->grapes-editor#paletteDragStart dragend->grapes-editor#paletteDragEnd"
                class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:gap-2 tw:p-4 tw:border tw:border-neutral-200 tw:rounded-lg tw:bg-white tw:hover:border-primary-500 tw:hover:bg-primary-50 tw:cursor-pointer"
                aria-label="Spacer block">
                <i class="fa-regular fa-arrows-up-down tw:text-xl tw:text-neutral-600"></i>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 fw-medium">Spacer</span>
              </button>
              <button type="button"
                      data-block-type="columns"
                      draggable="true"
                      data-action="click->grapes-editor#addBlock dragstart->grapes-editor#paletteDragStart dragend->grapes-editor#paletteDragEnd"
                class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:gap-2 tw:p-4 tw:border tw:border-neutral-200 tw:rounded-lg tw:bg-white tw:hover:border-primary-500 tw:hover:bg-primary-50 tw:cursor-pointer"
                aria-label="Columns block">
                <i class="fa-regular fa-columns-3 tw:text-xl tw:text-neutral-600"></i>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 fw-medium">Columns</span>
              </button>
              <button type="button"
                      data-block-type="social"
                      draggable="true"
                      data-action="click->grapes-editor#addBlock dragstart->grapes-editor#paletteDragStart dragend->grapes-editor#paletteDragEnd"
                class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:gap-2 tw:p-4 tw:border tw:border-neutral-200 tw:rounded-lg tw:bg-white tw:hover:border-primary-500 tw:hover:bg-primary-50 tw:cursor-pointer"
                aria-label="Social block">
                <i class="fa-regular fa-share-nodes tw:text-xl tw:text-neutral-600"></i>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 fw-medium">Social</span>
              </button>
              <button type="button"
                      data-block-type="video"
                      draggable="true"
                      data-action="click->grapes-editor#addBlock dragstart->grapes-editor#paletteDragStart dragend->grapes-editor#paletteDragEnd"
                class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:gap-2 tw:p-4 tw:border tw:border-neutral-200 tw:rounded-lg tw:bg-white tw:hover:border-primary-500 tw:hover:bg-primary-50 tw:cursor-pointer"
                aria-label="Video block">
                <i class="fa-regular fa-circle-play tw:text-xl tw:text-neutral-600"></i>
                <span class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-700 tw:font-medium">Video</span>
              </button>
            </div>
          </div>
          <div class="tw-tab-panel tw:p-4 tw:pt-6" role="tabpanel" data-tabs-target="panel">
            <div class="tw-form-section tw:space-y-5">
              <h3 class="tw-form-section-title tw:mb-2">Send Method</h3>
              <p class="tw-form-section-description">Choose how this template is triggered and measured</p>
              <div class="tw-form-group tw:pt-2">
                <label class="tw-form-label tw-form-label-required">Trigger Type</label>
                <div class="tw:space-y-2">
                  <div class="tw-form-check">
                    <input class="tw-form-check-input" type="radio" name="enhancedTriggerType" id="enhancedTriggerApplicant" value="applicant" checked>
                    <div>
                      <label class="tw-form-check-label" for="enhancedTriggerApplicant">Applicant Trigger</label>
                      <span class="tw-form-text">Send automatically when a family completes an admissions action.</span>
                    </div>
                  </div>
                  <div class="tw-form-check">
                    <input class="tw-form-check-input" type="radio" name="enhancedTriggerType" id="enhancedTriggerStaff" value="staff">
                    <div>
                      <label class="tw-form-check-label" for="enhancedTriggerStaff">Staff Trigger</label>
                      <span class="tw-form-text">Allow staff to launch the message from an application or inbox workflow.</span>
                    </div>
                  </div>
                  <div class="tw-form-check">
                    <input class="tw-form-check-input" type="radio" name="enhancedTriggerType" id="enhancedTriggerScheduled" value="scheduled">
                    <div>
                      <label class="tw-form-check-label" for="enhancedTriggerScheduled">Scheduled Send</label>
                      <span class="tw-form-text">Queue the message for a chosen date, cohort, and delivery window.</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tw-form-group tw:pt-2">
                <label for="enhancedTriggerEvent" class="tw-form-label tw-form-label-required">Trigger Event</label>
                <select id="enhancedTriggerEvent" class="tw-form-select">
                  <option selected>Application Form Submitted</option>
                  <option>Enquiry Form Submitted</option>
                  <option>Offer Accepted</option>
                  <option>Offer Declined</option>
                  <option>Interview Booked</option>
                  <option>Enrolment Form Completed</option>
                </select>
              </div>
              <div class="tw-form-group tw:pt-2">
                <label class="tw-form-label tw-form-label-optional">Send Delay</label>
                <div class="tw:flex tw:items-center tw:gap-2">
                  <input type="number" class="tw-form-control tw:w-24" value="0" min="0" aria-label="Delay amount">
                  <select class="tw-form-select tw:w-40" aria-label="Delay unit">
                    <option selected>Minutes</option>
                    <option>Hours</option>
                    <option>Days</option>
                  </select>
                </div>
                <div class="tw-form-text tw:mt-1">Set to 0 for immediate delivery after the trigger event.</div>
              </div>
              <div class="tw-form-group tw:pt-2">
                <label class="tw-form-label tw-form-label-optional">Follow-up Rule</label>
                <div class="tw-input-group">
                  <input type="number" class="tw-form-control" value="3" min="0" aria-label="Follow-up days">
                  <span class="tw-input-group-text">days after open</span>
                </div>
                <div class="tw-form-text tw:mt-1">Create a handoff reminder if no manual reply has been sent.</div>
              </div>
              <div class="tw-form-group tw:pt-2">
                <label class="tw-form-label tw-form-label-optional">Conditions</label>
                <div class="tw-card tw-card-flat">
                  <div class="tw-card-body tw:py-3">
                    <div class="tw:flex tw:flex-col tw:gap-2">
                      <div class="tw:flex tw:flex-col tw:gap-2 tw:lg:flex-row">
                        <select class="tw-form-select tw-form-select-sm tw:lg:w-40">
                          <option selected>Year Group</option>
                          <option>Application Status</option>
                          <option>School Site</option>
                        </select>
                        <select class="tw-form-select tw-form-select-sm tw:lg:w-32">
                          <option selected>equals</option>
                          <option>not equals</option>
                          <option>contains</option>
                        </select>
                        <select class="tw-form-select tw-form-select-sm tw:flex-1">
                          <option selected>Year 7</option>
                          <option>Year 8</option>
                          <option>Year 9</option>
                          <option>Year 12</option>
                        </select>
                      </div>
                      <button class="tw-btn tw-btn-tertiary tw-btn-sm tw:w-fit" type="button">
                        <i class="fa-regular fa-plus tw:mr-1"></i> Add Condition
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="tw-form-section tw:space-y-5">
              <h3 class="tw-form-section-title tw:mb-2">Tracking & Follow-up</h3>
              <div class="tw:space-y-3">
                <div class="tw-form-switch">
                  <input class="tw-form-check-input" type="checkbox" id="trackOpens" checked>
                  <div>
                    <label class="tw-form-check-label" for="trackOpens">Track opens</label>
                    <span class="tw-form-text">Measure when recipients open the message to inform automation decisions.</span>
                  </div>
                </div>
                <div class="tw-form-switch">
                  <input class="tw-form-check-input" type="checkbox" id="trackClicks" checked>
                  <div>
                    <label class="tw-form-check-label" for="trackClicks">Track clicks</label>
                    <span class="tw-form-text">Capture interest in CTA buttons and linked resources.</span>
                  </div>
                </div>
                <div class="tw-form-switch">
                  <input class="tw-form-check-input" type="checkbox" id="trackForwards">
                  <div>
                    <label class="tw-form-check-label" for="trackForwards">Track forwards</label>
                    <span class="tw-form-text">Enable when campaign attribution matters more than privacy simplicity.</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="tw:flex-1 tw:flex tw:flex-col tw:overflow-hidden tw:bg-neutral-50"
           data-controller="tabs device-frame"
           data-device-frame-desktop-full-width-value="true"
           data-device-frame-desktop-width-value="640"
           data-device-frame-mobile-width-value="360">
        <div class="tw:grid tw:grid-cols-3 tw:items-center tw:px-4 tw:py-3 tw:border-b tw:border-neutral-200 tw:bg-white">
          <div class="tw:justify-self-start">
            <div class="tw-btn-group" aria-label="Device preview">
              <input type="radio" name="enhancedDevicePreview" id="enhancedDeviceDesktop" class="tw-btn-check" value="desktop" checked
                     data-device="desktop" data-action="change->device-frame#select change->grapes-editor#deviceViewportChanged">
              <label class="tw-btn tw-btn-secondary tw-btn-sm tw-btn-icon" for="enhancedDeviceDesktop" aria-label="Desktop preview">
                <i class="fa-regular fa-desktop"></i>
              </label>
              <input type="radio" name="enhancedDevicePreview" id="enhancedDeviceMobile" class="tw-btn-check" value="mobile"
                     data-device="mobile" data-action="change->device-frame#select change->grapes-editor#deviceViewportChanged">
              <label class="tw-btn tw-btn-secondary tw-btn-sm tw-btn-icon" for="enhancedDeviceMobile" aria-label="Mobile preview">
                <i class="fa-regular fa-mobile"></i>
              </label>
            </div>
          </div>
          <div class="tw:justify-self-center">
            <div class="tw-btn-group" aria-label="Editor mode">
              <input type="radio" name="enhancedEditorMode" id="enhancedEditorModeEdit" class="tw-btn-check" value="edit" checked
                     data-tabs-target="tab" data-action="change->tabs#select change->grapes-editor#editorModeChanged">
              <label class="tw-btn tw-btn-secondary tw-btn-sm" for="enhancedEditorModeEdit">
                <i class="fa-regular fa-pen tw:mr-1"></i> Edit
              </label>
              <input type="radio" name="enhancedEditorMode" id="enhancedEditorModePreview" class="tw-btn-check" value="preview"
                     data-tabs-target="tab" data-action="change->tabs#select change->grapes-editor#editorModeChanged">
              <label class="tw-btn tw-btn-secondary tw-btn-sm" for="enhancedEditorModePreview">
                <i class="fa-regular fa-eye tw:mr-1"></i> Preview
              </label>
            </div>
          </div>
          <div class="tw:justify-self-end">
            <div class="tw-dropdown tw-dropdown-sm" data-controller="dropdown" data-action="dropdown:select->grapes-editor#previewRecipientChanged">
              <button class="tw-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" data-dropdown-target="label">Preview as Patricia Wilson</span>
                <i class="fa-solid fa-chevron-down tw-dropdown-chevron"></i>
              </button>
              <div class="tw-dropdown-menu tw-dropdown-menu-end" role="listbox" data-dropdown-target="menu" tabindex="-1">
                <button class="tw-dropdown-item tw-active" role="option" aria-selected="true" data-dropdown-target="item" data-action="click->dropdown#select" data-value="Preview as Patricia Wilson" data-recipient-key="patricia">
                  <span class="tw-dropdown-item-text">Patricia Wilson, parent of James Wilson</span>
                  <i class="fa-solid fa-check tw-dropdown-item-check"></i>
                </button>
                <button class="tw-dropdown-item" role="option" aria-selected="false" data-dropdown-target="item" data-action="click->dropdown#select" data-value="Preview as Victor Chen" data-recipient-key="victor">
                  <span class="tw-dropdown-item-text">Victor Chen, prospective parent</span>
                  <i class="fa-solid fa-check tw-dropdown-item-check"></i>
                </button>
                <button class="tw-dropdown-item" role="option" aria-selected="false" data-dropdown-target="item" data-action="click->dropdown#select" data-value="Preview as Maya Patel" data-recipient-key="maya">
                  <span class="tw-dropdown-item-text">Maya Patel, Year 7 applicant</span>
                  <i class="fa-solid fa-check tw-dropdown-item-check"></i>
                </button>
              </div>
            </div>
          </div>
        </div>
        <div class="tw:flex-1 tw:relative tw:min-h-0" data-grapes-editor-target="scrollBody">
          <div class="tw-tab-panel tw-active tw:relative tw:h-full tw:min-h-0" role="tabpanel" data-tabs-target="panel">
            <div class="tw:hidden tw:p-6" data-grapes-editor-target="bootError">
              <div class="tw:max-w-[720px] tw:mx-auto tw-card tw:border tw:border-danger tw:border-dashed">
                <div class="tw-card-body tw:py-8 tw:text-center">
                  <div class="tw:w-12 tw:h-12 tw:rounded-full tw:bg-danger-light tw:flex tw:items-center tw:justify-center tw:mx-auto tw:mb-3">
                    <i class="fa-regular fa-triangle-exclamation tw:text-danger"></i>
                  </div>
                  <h3 class="tw-h4 tw:mb-2">The editor could not load</h3>
                  <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-500 tw:mb-4">
                    The preview is still available, but the block canvas needs GrapesJS to finish loading before you can edit.
                  </p>
                  <button type="button" class="tw-btn tw-btn-primary tw-btn-sm" data-action="click->grapes-editor#retryLoad">
                    <i class="fa-regular fa-rotate-right tw:mr-1"></i> Retry editor load
                  </button>
                </div>
              </div>
            </div>
            <div class="tw:h-full tw:min-h-0 tw:pr-[320px]" data-grapes-editor-target="canvasWrapper">
              <div class="tw:w-full tw:h-full tw:min-h-0 tw:max-w-none tw:mx-auto tw:transition-[max-width] tw:duration-200" data-device-frame-target="frame">
                <div class="tw-card tw:h-full tw:overflow-hidden">
                  <div class="tw-card-body tw:p-0 tw:h-full" data-grapes-editor-target="canvas">
                    <div data-email-body="true" class="tw:mx-auto tw:w-full tw:max-w-[640px] tw:bg-neutral-0 tw-email-bg-none">
                      <div data-block-type="header" data-block-label="Header" data-block-icon="fa-image" data-header-icon="fa-graduation-cap" class="tw:text-center tw:py-6 tw:px-6">
                        <div class="tw:w-16 tw:h-16 tw:rounded-lg tw:bg-primary-100 tw:flex tw:items-center tw:justify-center tw:mx-auto tw:mb-3">
                          <i class="fa-regular fa-graduation-cap tw:text-2xl tw:text-primary-500"></i>
                        </div>
                        <h4 class="tw:text-body-l tw:leading-body-l fw-bold tw:text-neutral-900 tw:mb-1">Welcome to <span class="tw-merge-token">{{SCHOOL_NAME}}</span></h4>
                        <p class="tw:text-body-s tw:leading-body-s tw:text-neutral-500 tw:mb-0">Your application journey starts here</p>
                      </div>
                      <div data-block-type="text" data-block-label="Rich text" data-block-icon="fa-paragraph" data-text-size="body" data-text-line="normal" class="tw:px-6 tw:pt-4">
                        <p>Dear <span class="tw-merge-token">{{FIRST_NAME}}</span>,</p>
                        <p>Thank you for your interest in <span class="tw-merge-token">{{SCHOOL_NAME}}</span>. We are delighted that you are considering us for <span class="tw-merge-token">{{STUDENT_FIRST_NAME}}</span>'s education, and we look forward to supporting you throughout the admissions process.</p>
                      </div>
                      <div data-block-type="button" data-block-label="Button" data-block-icon="fa-rectangle-wide" data-button-style="primary" data-button-size="medium" data-button-link="https://portal.arborschool.edu" data-button-block="false" class="tw:text-center tw:py-4 tw:px-6">
                        <a href="https://portal.arborschool.edu" class="tw-btn tw-btn-primary tw:no-underline">View Your Application Portal</a>
                      </div>
                      <div data-block-type="text" data-block-label="Rich text" data-block-icon="fa-paragraph" data-text-size="body" data-text-line="normal" class="tw:px-6 tw:pb-4">
                        <p>Here is what to expect next:</p>
                        <ol>
                          <li>Complete your application form with all required documents</li>
                          <li>Our admissions team will review your submission</li>
                          <li>You will be contacted about interviews, assessments, or further information</li>
                        </ol>
                        <p class="tw:mb-0">Warm regards,<br>
                          The Admissions Team<br>
                          <span class="tw-merge-token">{{SCHOOL_NAME}}</span></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <aside data-grapes-editor-target="inspector" class="tw:absolute tw:right-0 tw:top-0 tw:bottom-0 tw:w-[320px] tw:bg-white tw:border-l tw:border-neutral-200 tw:overflow-y-auto" aria-label="Block properties">
              <div class="tw:px-4 tw:py-3 tw:border-b tw:border-neutral-200 tw:flex tw:items-center tw:justify-between">
                <div>
                  <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mb-0" data-grapes-editor-target="inspectorEyebrow">Default</p>
                  <h4 class="tw:text-body-m tw:leading-body-m fw-semibold tw:text-neutral-900 tw:mb-0">
                    <i class="fa-regular fa-palette tw:mr-1 tw:text-primary-500" data-grapes-editor-target="inspectorIcon"></i> <span data-grapes-editor-target="inspectorLabel">Body Style</span>
                  </h4>
                </div>
                <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon tw:hidden" aria-label="Deselect block"
                        data-grapes-editor-target="inspectorCloseButton"
                        data-action="click->grapes-editor#closeInspector">
                  <i class="fa-regular fa-xmark"></i>
                </button>
              </div>
              <div class="tw:p-4 tw:space-y-4" data-grapes-editor-target="inspectorEmpty">
                <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mb-0">Visual styling applied to the email body container.</p>
                <div>
                  <label class="tw-form-label">Email body background</label>
                  <div class="tw:grid tw:grid-cols-6 tw:gap-2">
                    <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border-2 tw:border-primary-500 tw:bg-neutral-0" aria-label="White" aria-pressed="true"
                            data-grapes-editor-target="bodyBgBtn" data-body-bg-class="tw:bg-neutral-0"
                            data-action="click->grapes-editor#selectBodyBackground"></button>
                    <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-neutral-50" aria-label="Off-white" aria-pressed="false"
                            data-grapes-editor-target="bodyBgBtn" data-body-bg-class="tw:bg-neutral-50"
                            data-action="click->grapes-editor#selectBodyBackground"></button>
                    <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-neutral-100" aria-label="Light grey" aria-pressed="false"
                            data-grapes-editor-target="bodyBgBtn" data-body-bg-class="tw:bg-neutral-100"
                            data-action="click->grapes-editor#selectBodyBackground"></button>
                    <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-primary-100" aria-label="Light primary" aria-pressed="false"
                            data-grapes-editor-target="bodyBgBtn" data-body-bg-class="tw:bg-primary-100"
                            data-action="click->grapes-editor#selectBodyBackground"></button>
                    <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-success-light" aria-label="Light green" aria-pressed="false"
                            data-grapes-editor-target="bodyBgBtn" data-body-bg-class="tw:bg-success-light"
                            data-action="click->grapes-editor#selectBodyBackground"></button>
                    <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-warning-light" aria-label="Light yellow" aria-pressed="false"
                            data-grapes-editor-target="bodyBgBtn" data-body-bg-class="tw:bg-warning-light"
                            data-action="click->grapes-editor#selectBodyBackground"></button>
                  </div>
                </div>
                <div>
                  <label class="tw-form-label">Wrapper background</label>
                  <div class="tw:grid tw:grid-cols-6 tw:gap-2">
                    <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-neutral-0" aria-label="White" aria-pressed="false"
                            data-grapes-editor-target="wrapperBgBtn" data-wrapper-bg-class="tw:bg-neutral-0"
                            data-action="click->grapes-editor#selectWrapperBackground"></button>
                    <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-neutral-50" aria-label="Off-white" aria-pressed="false"
                            data-grapes-editor-target="wrapperBgBtn" data-wrapper-bg-class="tw:bg-neutral-50"
                            data-action="click->grapes-editor#selectWrapperBackground"></button>
                    <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border-2 tw:border-primary-500 tw:bg-neutral-100" aria-label="Light grey" aria-pressed="true"
                            data-grapes-editor-target="wrapperBgBtn" data-wrapper-bg-class="tw:bg-neutral-100"
                            data-action="click->grapes-editor#selectWrapperBackground"></button>
                    <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-primary-100" aria-label="Light primary" aria-pressed="false"
                            data-grapes-editor-target="wrapperBgBtn" data-wrapper-bg-class="tw:bg-primary-100"
                            data-action="click->grapes-editor#selectWrapperBackground"></button>
                    <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-success-light" aria-label="Light green" aria-pressed="false"
                            data-grapes-editor-target="wrapperBgBtn" data-wrapper-bg-class="tw:bg-success-light"
                            data-action="click->grapes-editor#selectWrapperBackground"></button>
                    <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-warning-light" aria-label="Light yellow" aria-pressed="false"
                            data-grapes-editor-target="wrapperBgBtn" data-wrapper-bg-class="tw:bg-warning-light"
                            data-action="click->grapes-editor#selectWrapperBackground"></button>
                  </div>
                </div>
                <div>
                  <label class="tw-form-label">Background pattern</label>
                  <div class="tw:grid tw:grid-cols-3 tw:gap-2">
                    <button type="button" class="tw-email-pattern-swatch tw-email-bg-none tw:border-2 tw:border-primary-500" aria-label="None" aria-pressed="true"
                            data-grapes-editor-target="patternBtn" data-pattern-class="tw-email-bg-none"
                            data-action="click->grapes-editor#selectBodyPattern">
                      <span class="tw:flex tw:items-center tw:justify-center tw:h-full tw:text-body-xs tw:leading-body-xs tw:text-neutral-500">None</span>
                    </button>
                    <button type="button" class="tw-email-pattern-swatch tw-email-bg-dots" aria-label="Dots" aria-pressed="false"
                            data-grapes-editor-target="patternBtn" data-pattern-class="tw-email-bg-dots"
                            data-action="click->grapes-editor#selectBodyPattern"></button>
                    <button type="button" class="tw-email-pattern-swatch tw-email-bg-grid" aria-label="Grid" aria-pressed="false"
                            data-grapes-editor-target="patternBtn" data-pattern-class="tw-email-bg-grid"
                            data-action="click->grapes-editor#selectBodyPattern"></button>
                    <button type="button" class="tw-email-pattern-swatch tw-email-bg-stripes" aria-label="Stripes" aria-pressed="false"
                            data-grapes-editor-target="patternBtn" data-pattern-class="tw-email-bg-stripes"
                            data-action="click->grapes-editor#selectBodyPattern"></button>
                    <button type="button" class="tw-email-pattern-swatch tw-email-bg-crosshatch" aria-label="Crosshatch" aria-pressed="false"
                            data-grapes-editor-target="patternBtn" data-pattern-class="tw-email-bg-crosshatch"
                            data-action="click->grapes-editor#selectBodyPattern"></button>
                    <button type="button" class="tw-email-pattern-swatch tw-email-bg-plus" aria-label="Plus signs" aria-pressed="false"
                            data-grapes-editor-target="patternBtn" data-pattern-class="tw-email-bg-plus"
                            data-action="click->grapes-editor#selectBodyPattern"></button>
                  </div>
                  <div class="tw-form-text tw:mt-2">Pre-selected pattern library. The full plugin will support uploaded patterns.</div>
                </div>
                <div>
                  <label for="enhancedBodyFont" class="tw-form-label">Default font</label>
                  <select id="enhancedBodyFont" class="tw-form-select tw-form-select-sm"
                          data-grapes-editor-target="bodyFont"
                          data-action="change->grapes-editor#updateBodyFont">
                    <option selected>Arial</option>
                    <option>Helvetica</option>
                    <option>Georgia</option>
                    <option>Times New Roman</option>
                    <option>Verdana</option>
                  </select>
                </div>
              </div>
              <div class="tw:p-4 tw:space-y-4 tw:hidden" data-grapes-editor-target="inspectorBody">
                <div class="tw:space-y-4" data-grapes-editor-target="inspectorTypeFields"></div>
                <div class="tw:pt-4 tw:border-t tw:border-neutral-200 tw:space-y-4">
                  <div>
                    <label class="tw-form-label">Alignment</label>
                    <div class="tw-btn-group tw-btn-group-segmented" role="group" aria-label="Alignment">
                      <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm" aria-label="Align left"
                              data-grapes-editor-target="alignBtn" data-align="left"
                              data-action="click->grapes-editor#setAlignment"><i class="fa-regular fa-align-left"></i></button>
                      <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm" aria-label="Align center"
                              data-grapes-editor-target="alignBtn" data-align="center"
                              data-action="click->grapes-editor#setAlignment"><i class="fa-regular fa-align-center"></i></button>
                      <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm" aria-label="Align right"
                              data-grapes-editor-target="alignBtn" data-align="right"
                              data-action="click->grapes-editor#setAlignment"><i class="fa-regular fa-align-right"></i></button>
                    </div>
                  </div>
                  <div>
                    <label class="tw-form-label">Padding</label>
                    <div class="tw-form-row">
                      <div class="tw-form-group tw-form-group-col-6">
                        <label for="inspectorPadTop" class="tw-form-text">Top</label>
                        <input type="number" id="inspectorPadTop" class="tw-form-control tw-form-control-sm" value="24" min="0"
                               data-grapes-editor-target="padInput" data-side="top"
                               data-action="input->grapes-editor#setPadding">
                      </div>
                      <div class="tw-form-group tw-form-group-col-6">
                        <label for="inspectorPadBottom" class="tw-form-text">Bottom</label>
                        <input type="number" id="inspectorPadBottom" class="tw-form-control tw-form-control-sm" value="24" min="0"
                               data-grapes-editor-target="padInput" data-side="bottom"
                               data-action="input->grapes-editor#setPadding">
                      </div>
                    </div>
                    <div class="tw-form-row">
                      <div class="tw-form-group tw-form-group-col-6">
                        <label for="inspectorPadLeft" class="tw-form-text">Left</label>
                        <input type="number" id="inspectorPadLeft" class="tw-form-control tw-form-control-sm" value="24" min="0"
                               data-grapes-editor-target="padInput" data-side="left"
                               data-action="input->grapes-editor#setPadding">
                      </div>
                      <div class="tw-form-group tw-form-group-col-6">
                        <label for="inspectorPadRight" class="tw-form-text">Right</label>
                        <input type="number" id="inspectorPadRight" class="tw-form-control tw-form-control-sm" value="24" min="0"
                               data-grapes-editor-target="padInput" data-side="right"
                               data-action="input->grapes-editor#setPadding">
                      </div>
                    </div>
                    <div class="tw-form-switch">
                      <input class="tw-form-check-input" type="checkbox" id="inspectorPadAll" checked
                             data-grapes-editor-target="padAll">
                      <label class="tw-form-check-label" for="inspectorPadAll">Apply to all sides</label>
                    </div>
                  </div>
                  <div>
                    <label class="tw-form-label">Background</label>
                    <div class="tw:grid tw:grid-cols-6 tw:gap-2">
                      <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-neutral-0" aria-label="White"
                              data-grapes-editor-target="bgBtn" data-bg-class=""
                              data-action="click->grapes-editor#setBackground"></button>
                      <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-neutral-100" aria-label="Light grey"
                              data-grapes-editor-target="bgBtn" data-bg-class="tw:bg-neutral-100"
                              data-action="click->grapes-editor#setBackground"></button>
                      <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-primary-100" aria-label="Light primary"
                              data-grapes-editor-target="bgBtn" data-bg-class="tw:bg-primary-100"
                              data-action="click->grapes-editor#setBackground"></button>
                      <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-success-light" aria-label="Light green"
                              data-grapes-editor-target="bgBtn" data-bg-class="tw:bg-success-light"
                              data-action="click->grapes-editor#setBackground"></button>
                      <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-warning-light" aria-label="Light yellow"
                              data-grapes-editor-target="bgBtn" data-bg-class="tw:bg-warning-light"
                              data-action="click->grapes-editor#setBackground"></button>
                      <button type="button" class="tw:w-full tw:aspect-square tw:rounded tw:border tw:border-neutral-200 tw:bg-danger-light" aria-label="Light red"
                              data-grapes-editor-target="bgBtn" data-bg-class="tw:bg-danger-light"
                              data-action="click->grapes-editor#setBackground"></button>
                    </div>
                  </div>
                  <div>
                    <label class="tw-form-label">Visibility</label>
                    <div class="tw:space-y-2">
                      <div class="tw-form-switch">
                        <input class="tw-form-check-input" type="checkbox" id="inspectorShowDesktop" checked
                               data-grapes-editor-target="visDesktop"
                               data-action="change->grapes-editor#toggleDesktop">
                        <label class="tw-form-check-label" for="inspectorShowDesktop">
                          <i class="fa-regular fa-desktop tw:mr-1"></i> Show on desktop
                        </label>
                      </div>
                      <div class="tw-form-switch">
                        <input class="tw-form-check-input" type="checkbox" id="inspectorShowMobile" checked
                               data-grapes-editor-target="visMobile"
                               data-action="change->grapes-editor#toggleMobile">
                        <label class="tw-form-check-label" for="inspectorShowMobile">
                          <i class="fa-regular fa-mobile tw:mr-1"></i> Show on mobile
                        </label>
                      </div>
                    </div>
                  </div>
                  <div class="tw:space-y-2">
                    <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm tw-btn-block"
                            data-grapes-editor-target="moveUp"
                            data-action="click->grapes-editor#moveBlockUp">
                      <i class="fa-regular fa-arrow-up tw:mr-1"></i> Move up
                    </button>
                    <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm tw-btn-block"
                            data-grapes-editor-target="moveDown"
                            data-action="click->grapes-editor#moveBlockDown">
                      <i class="fa-regular fa-arrow-down tw:mr-1"></i> Move down
                    </button>
                    <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm tw-btn-block"
                            data-grapes-editor-target="duplicateButton"
                            data-action="click->grapes-editor#duplicateBlock">
                      <i class="fa-regular fa-copy tw:mr-1"></i> Duplicate
                    </button>
                  </div>
                  <div class="tw:pt-3 tw:border-t tw:border-neutral-200">
                    <button type="button" class="tw-btn tw-btn-outline-danger tw-btn-sm tw-btn-block"
                            data-action="click->grapes-editor#deleteBlock">
                      <i class="fa-regular fa-trash tw:mr-1"></i> Delete block
                    </button>
                  </div>
                </div>
              </div>
            </aside>
            <div class="tw:absolute tw:z-10 tw:bottom-0 tw:left-0 tw:right-80 tw:px-4 tw:py-2 tw:bg-white tw:border-t tw:border-neutral-200 tw:text-center tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:pointer-events-none"
                 data-grapes-editor-target="canvasHint">
              <i class="fa-regular fa-circle-info tw:mr-1"></i> Use the Content tab on the left to add more blocks · Click a block in the canvas to edit its properties.
            </div>
            <template data-grapes-editor-target="inspectorFields" data-block-type="header">
              <div class="tw-form-group tw:mb-0">
                <label for="insHeaderTitle" class="tw-form-label tw-form-label-required">Title</label>
                <input type="text" id="insHeaderTitle" class="tw-form-control tw-form-control-sm" value="Welcome to {{SCHOOL_NAME}}"
                       data-field="title"
                       data-action="input->grapes-editor#updateSelectedBlock">
              </div>
              <div class="tw-form-group tw:mb-0">
                <label for="insHeaderSubtitle" class="tw-form-label tw-form-label-optional">Subtitle</label>
                <input type="text" id="insHeaderSubtitle" class="tw-form-control tw-form-control-sm" value="Your application journey starts here"
                       data-field="subtitle"
                       data-action="input->grapes-editor#updateSelectedBlock">
              </div>
              <div class="tw-form-group tw:mb-0">
                <label for="insHeaderIcon" class="tw-form-label">Icon</label>
                <select id="insHeaderIcon" class="tw-form-select tw-form-select-sm"
                        data-field="icon"
                        data-action="change->grapes-editor#updateSelectedBlock">
                  <option value="fa-graduation-cap" selected>fa-graduation-cap</option>
                  <option value="fa-school">fa-school</option>
                  <option value="fa-envelope-open">fa-envelope-open</option>
                  <option value="fa-handshake">fa-handshake</option>
                </select>
              </div>
            </template>
            <template data-grapes-editor-target="inspectorFields" data-block-type="heading">
              <div class="tw-form-group tw:mb-0">
                <label for="insHeadingText" class="tw-form-label tw-form-label-required">Heading text</label>
                <input type="text" id="insHeadingText" class="tw-form-control tw-form-control-sm" value="New heading"
                       data-field="text"
                       data-action="input->grapes-editor#updateSelectedBlock">
              </div>
              <div class="tw-form-group tw:mb-0">
                <label for="insHeadingLevel" class="tw-form-label">Heading level</label>
                <select id="insHeadingLevel" class="tw-form-select tw-form-select-sm"
                        data-field="level"
                        data-action="change->grapes-editor#updateSelectedBlock">
                  <option value="h1">H1</option>
                  <option value="h2">H2</option>
                  <option value="h3" selected>H3</option>
                  <option value="h4">H4</option>
                </select>
              </div>
              <div class="tw-form-group tw:mb-0">
                <label for="insHeadingColor" class="tw-form-label">Text colour</label>
                <select id="insHeadingColor" class="tw-form-select tw-form-select-sm"
                        data-field="color"
                        data-action="change->grapes-editor#updateSelectedBlock">
                  <option value="neutral-900" selected>Neutral 900</option>
                  <option value="primary-500">Primary 500</option>
                  <option value="neutral-700">Neutral 700</option>
                </select>
              </div>
            </template>
            <template data-grapes-editor-target="inspectorFields" data-block-type="text">
              <div class="tw-form-group tw:mb-0">
                <label class="tw-form-label tw-form-label-required">Content</label>
                <div class="tw-rte-host" data-controller="rte-editor" data-rte-editor-field-value="body">
                  <div data-rte-editor-target="mount" data-field="body"
                       data-action="rte-editor:change->grapes-editor#updateSelectedBlock"></div>
                </div>
                <div class="tw-form-text tw:mt-1">Type <code>{{FIRST_NAME}}</code> or any supported token inline — it auto-pills on the canvas.</div>
              </div>
              <div class="tw-form-row tw:mb-0">
                <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                  <label for="insTextSize" class="tw-form-label">Font size</label>
                  <select id="insTextSize" class="tw-form-select tw-form-select-sm"
                          data-field="size"
                          data-action="change->grapes-editor#updateSelectedBlock">
                    <option value="small">Small</option>
                    <option value="body" selected>Body</option>
                    <option value="large">Large</option>
                  </select>
                </div>
                <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                  <label for="insTextLine" class="tw-form-label">Line height</label>
                  <select id="insTextLine" class="tw-form-select tw-form-select-sm"
                          data-field="line"
                          data-action="change->grapes-editor#updateSelectedBlock">
                    <option value="tight">Tight</option>
                    <option value="normal" selected>Normal</option>
                    <option value="relaxed">Relaxed</option>
                  </select>
                </div>
              </div>
            </template>
            <template data-grapes-editor-target="inspectorFields" data-block-type="image">
              <div class="tw-form-group tw:mb-0">
                <label for="insImageSrc" class="tw-form-label tw-form-label-required">Image URL</label>
                <input type="url" id="insImageSrc" class="tw-form-control tw-form-control-sm" placeholder="https://…"
                       data-field="src"
                       data-action="input->grapes-editor#updateSelectedBlock">
              </div>
              <div class="tw-form-group tw:mb-0">
                <label for="insImageAlt" class="tw-form-label tw-form-label-required">Alt text</label>
                <input type="text" id="insImageAlt" class="tw-form-control tw-form-control-sm" placeholder="Description for screen readers"
                       data-field="alt"
                       data-action="input->grapes-editor#updateSelectedBlock">
              </div>
              <div class="tw-form-row tw:mb-0">
                <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                  <label for="insImageWidth" class="tw-form-label">Width</label>
                  <select id="insImageWidth" class="tw-form-select tw-form-select-sm"
                          data-field="width"
                          data-action="change->grapes-editor#updateSelectedBlock">
                    <option value="25">25%</option>
                    <option value="50">50%</option>
                    <option value="100" selected>100%</option>
                  </select>
                </div>
                <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                  <label for="insImageLink" class="tw-form-label">Link URL</label>
                  <input type="url" id="insImageLink" class="tw-form-control tw-form-control-sm" placeholder="https://…"
                         data-field="link"
                         data-action="input->grapes-editor#updateSelectedBlock">
                </div>
              </div>
            </template>
            <template data-grapes-editor-target="inspectorFields" data-block-type="button">
              <div class="tw-form-group tw:mb-0">
                <label for="insButtonLabel" class="tw-form-label tw-form-label-required">Label</label>
                <input type="text" id="insButtonLabel" class="tw-form-control tw-form-control-sm" value="View Your Application Portal"
                       data-field="label"
                       data-action="input->grapes-editor#updateSelectedBlock">
              </div>
              <div class="tw-form-group tw:mb-0">
                <label for="insButtonLink" class="tw-form-label tw-form-label-required">Link URL</label>
                <input type="url" id="insButtonLink" class="tw-form-control tw-form-control-sm" value="https://portal.arborschool.edu"
                       data-field="link"
                       data-action="input->grapes-editor#updateSelectedBlock">
              </div>
              <div class="tw-form-row tw:mb-0">
                <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                  <label for="insButtonStyle" class="tw-form-label">Style</label>
                  <select id="insButtonStyle" class="tw-form-select tw-form-select-sm"
                          data-field="style"
                          data-action="change->grapes-editor#updateSelectedBlock">
                    <option value="primary" selected>Primary</option>
                    <option value="secondary">Secondary</option>
                    <option value="outline">Outline</option>
                  </select>
                </div>
                <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                  <label for="insButtonSize" class="tw-form-label">Size</label>
                  <select id="insButtonSize" class="tw-form-select tw-form-select-sm"
                          data-field="size"
                          data-action="change->grapes-editor#updateSelectedBlock">
                    <option value="small">Small</option>
                    <option value="medium" selected>Medium</option>
                    <option value="large">Large</option>
                  </select>
                </div>
              </div>
              <div class="tw-form-switch">
                <input class="tw-form-check-input" type="checkbox" id="insButtonBlock"
                       data-field="block"
                       data-action="change->grapes-editor#updateSelectedBlock">
                <label class="tw-form-check-label" for="insButtonBlock">Full-width button</label>
              </div>
            </template>
            <template data-grapes-editor-target="inspectorFields" data-block-type="divider">
              <div class="tw-form-group tw:mb-0">
                <label for="insDividerColor" class="tw-form-label">Colour</label>
                <select id="insDividerColor" class="tw-form-select tw-form-select-sm"
                        data-field="color"
                        data-action="change->grapes-editor#updateSelectedBlock">
                  <option value="neutral-200" selected>Neutral 200</option>
                  <option value="neutral-300">Neutral 300</option>
                  <option value="primary-500">Primary 500</option>
                </select>
              </div>
              <div class="tw-form-row tw:mb-0">
                <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                  <label for="insDividerThickness" class="tw-form-label">Thickness</label>
                  <input type="number" id="insDividerThickness" class="tw-form-control tw-form-control-sm" value="1" min="1" max="8"
                         data-field="thickness"
                         data-action="input->grapes-editor#updateSelectedBlock">
                </div>
                <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                  <label for="insDividerStyle" class="tw-form-label">Style</label>
                  <select id="insDividerStyle" class="tw-form-select tw-form-select-sm"
                          data-field="style"
                          data-action="change->grapes-editor#updateSelectedBlock">
                    <option value="solid" selected>Solid</option>
                    <option value="dashed">Dashed</option>
                    <option value="dotted">Dotted</option>
                  </select>
                </div>
              </div>
            </template>
            <template data-grapes-editor-target="inspectorFields" data-block-type="spacer">
              <div class="tw-form-group tw:mb-0">
                <label for="insSpacerHeight" class="tw-form-label">Height (px)</label>
                <input type="number" id="insSpacerHeight" class="tw-form-control tw-form-control-sm" value="48" min="8" max="240" step="4"
                       data-field="height"
                       data-action="input->grapes-editor#updateSelectedBlock">
                <div class="tw-form-text tw:mt-1">Adds vertical space between adjacent blocks.</div>
              </div>
            </template>
            <template data-grapes-editor-target="inspectorFields" data-block-type="columns">
              <div class="tw-form-group tw:mb-0">
                <label for="insColumnsLayout" class="tw-form-label">Layout</label>
                <select id="insColumnsLayout" class="tw-form-select tw-form-select-sm"
                        data-field="layout"
                        data-action="change->grapes-editor#updateSelectedBlock">
                  <option value="two-equal" selected>Two equal columns</option>
                  <option value="three-equal">Three equal columns</option>
                  <option value="sixty-forty">60 / 40</option>
                  <option value="seventy-thirty">70 / 30</option>
                </select>
              </div>
              <div class="tw-form-group tw:mb-0">
                <label for="insColumnsGap" class="tw-form-label">Column gap (px)</label>
                <input type="number" id="insColumnsGap" class="tw-form-control tw-form-control-sm" value="16" min="0" max="64" step="4"
                       data-field="gap"
                       data-action="input->grapes-editor#updateSelectedBlock">
              </div>
            </template>
            <template data-grapes-editor-target="inspectorFields" data-block-type="social">
              <div class="tw-form-group tw:mb-0">
                <label class="tw-form-label">Networks</label>
                <div class="tw:space-y-2">
                  <div class="tw-form-check">
                    <input class="tw-form-check-input" type="checkbox" id="insSocialFb" checked
                           data-field="facebook"
                           data-action="change->grapes-editor#updateSelectedBlock">
                    <label class="tw-form-check-label" for="insSocialFb"><i class="fa-brands fa-facebook tw:mr-1"></i> Facebook</label>
                  </div>
                  <div class="tw-form-check">
                    <input class="tw-form-check-input" type="checkbox" id="insSocialX" checked
                           data-field="x"
                           data-action="change->grapes-editor#updateSelectedBlock">
                    <label class="tw-form-check-label" for="insSocialX"><i class="fa-brands fa-x-twitter tw:mr-1"></i> X (Twitter)</label>
                  </div>
                  <div class="tw-form-check">
                    <input class="tw-form-check-input" type="checkbox" id="insSocialIg" checked
                           data-field="instagram"
                           data-action="change->grapes-editor#updateSelectedBlock">
                    <label class="tw-form-check-label" for="insSocialIg"><i class="fa-brands fa-instagram tw:mr-1"></i> Instagram</label>
                  </div>
                  <div class="tw-form-check">
                    <input class="tw-form-check-input" type="checkbox" id="insSocialLi" checked
                           data-field="linkedin"
                           data-action="change->grapes-editor#updateSelectedBlock">
                    <label class="tw-form-check-label" for="insSocialLi"><i class="fa-brands fa-linkedin tw:mr-1"></i> LinkedIn</label>
                  </div>
                </div>
              </div>
              <div class="tw-form-row tw:mb-0">
                <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                  <label for="insSocialStyle" class="tw-form-label">Icon style</label>
                  <select id="insSocialStyle" class="tw-form-select tw-form-select-sm"
                          data-field="style"
                          data-action="change->grapes-editor#updateSelectedBlock">
                    <option value="solid" selected>Solid</option>
                    <option value="outline">Outline</option>
                  </select>
                </div>
                <div class="tw-form-group tw-form-group-col-6 tw:mb-0">
                  <label for="insSocialColor" class="tw-form-label">Icon colour</label>
                  <select id="insSocialColor" class="tw-form-select tw-form-select-sm"
                          data-field="color"
                          data-action="change->grapes-editor#updateSelectedBlock">
                    <option value="neutral" selected>Neutral 500</option>
                    <option value="primary">Primary 500</option>
                    <option value="brand">Brand</option>
                  </select>
                </div>
              </div>
            </template>
            <template data-grapes-editor-target="inspectorFields" data-block-type="video">
              <div data-controller="radio-reveal" class="tw:space-y-3">
                <div class="tw-form-group tw:mb-0">
                  <label class="tw-form-label">Video source</label>
                  <div class="tw-btn-group" role="radiogroup" aria-label="Video source">
                    <input type="radio" name="insVideoSource" id="insVideoSourceUpload" class="tw-btn-check" value="upload" checked
                           data-field="source"
                           data-action="change->radio-reveal#toggle change->grapes-editor#updateSelectedBlock">
                    <label class="tw-btn tw-btn-outline-primary tw-btn-sm" for="insVideoSourceUpload">Upload video</label>
                    <input type="radio" name="insVideoSource" id="insVideoSourceOnline" class="tw-btn-check" value="online"
                           data-field="source"
                           data-action="change->radio-reveal#toggle change->grapes-editor#updateSelectedBlock">
                    <label class="tw-btn tw-btn-outline-primary tw-btn-sm" for="insVideoSourceOnline">Online video</label>
                  </div>
                </div>
                <div data-radio-reveal-target="panel" data-value="upload" class="tw-form-group tw:mb-0">
                  <label class="tw-form-label" for="insVideoUpload">Upload video</label>
                  <div class="tw-file-upload">
                    <input type="file" class="tw:sr-only" accept="video/*" id="insVideoUpload" aria-label="Upload video file">
                    <div class="tw-file-upload-dropzone" role="button" tabindex="0" aria-label="Drop video here or click to browse">
                      <span class="tw-file-upload-dropzone-icon"><i class="fa-regular fa-cloud-arrow-up"></i></span>
                      <p class="tw-file-upload-dropzone-text">Drop video here or <strong>browse</strong></p>
                      <p class="tw-file-upload-dropzone-hint">MP4, MOV, WebM up to 50MB</p>
                    </div>
                  </div>
                </div>
                <div data-radio-reveal-target="panel" data-value="online" class="tw-form-group tw:mb-0" hidden>
                  <label for="insVideoUrl" class="tw-form-label">Video URL (YouTube, Vimeo, self-hosted)</label>
                  <input type="url" id="insVideoUrl" class="tw-form-control tw-form-control-sm" placeholder="https://..."
                         data-field="url"
                         data-action="input->grapes-editor#updateSelectedBlock">
                </div>
              </div>
            </template>
            <template data-grapes-editor-target="blockTemplate" data-block-type="heading">
              <div data-block-type="heading" data-block-label="Heading" data-block-icon="fa-heading" data-heading-color="neutral-900" class="tw:px-6 tw:py-4">
                <h3 class="tw:text-body-l tw:leading-body-l fw-bold tw:text-neutral-900 tw:mb-0">New heading</h3>
              </div>
            </template>
            <template data-grapes-editor-target="blockTemplate" data-block-type="text">
              <div data-block-type="text" data-block-label="Rich text" data-block-icon="fa-paragraph" data-text-size="body" data-text-line="normal" class="tw:px-6 tw:py-4">
                <p class="tw:mb-0">New paragraph. Edit this text to say what you want.</p>
              </div>
            </template>
            <template data-grapes-editor-target="blockTemplate" data-block-type="image">
              <div data-block-type="image" data-block-label="Image" data-block-icon="fa-image" data-image-src="" data-image-alt="" data-image-width="100" data-image-link="" class="tw:px-6 tw:py-4">
                <div class="tw:aspect-[2/1] tw:bg-neutral-100 tw:flex tw:items-center tw:justify-center tw:rounded">
                  <i class="fa-regular fa-image tw:text-3xl tw:text-neutral-400"></i>
                </div>
              </div>
            </template>
            <template data-grapes-editor-target="blockTemplate" data-block-type="button">
              <div data-block-type="button" data-block-label="Button" data-block-icon="fa-rectangle-wide" data-button-style="primary" data-button-size="medium" data-button-link="#" data-button-block="false" class="tw:text-center tw:py-4 tw:px-6">
                <a href="#" class="tw-btn tw-btn-primary tw:no-underline">Button text</a>
              </div>
            </template>
            <template data-grapes-editor-target="blockTemplate" data-block-type="divider">
              <div data-block-type="divider" data-block-label="Divider" data-block-icon="fa-horizontal-rule" data-divider-color="neutral-200" data-divider-thickness="1" data-divider-style="solid" class="tw:px-6 tw:py-4">
                <hr class="tw:border-t tw:border-neutral-200 tw:m-0">
              </div>
            </template>
            <template data-grapes-editor-target="blockTemplate" data-block-type="spacer">
              <div data-block-type="spacer" data-block-label="Spacer" data-block-icon="fa-arrows-up-down" data-spacer-height="48" class="tw:px-6">
                <div class="tw:h-12"></div>
              </div>
            </template>
            <template data-grapes-editor-target="blockTemplate" data-block-type="columns">
              <div data-block-type="columns" data-block-label="Columns" data-block-icon="fa-columns-3" data-columns-layout="two-equal" data-columns-gap="16" class="tw:px-6 tw:py-4">
                <div class="tw:grid tw:grid-cols-2 tw:gap-4">
                  <p class="tw:mb-0">Left column content.</p>
                  <p class="tw:mb-0">Right column content.</p>
                </div>
              </div>
            </template>
            <template data-grapes-editor-target="blockTemplate" data-block-type="social">
              <div data-block-type="social" data-block-label="Social" data-block-icon="fa-share-nodes" data-social-style="solid" data-social-color="neutral" data-social-networks="facebook,x,instagram,linkedin" class="tw:text-center tw:py-4 tw:px-6">
                <div class="tw:flex tw:justify-center tw:gap-4">
                  <i data-network="facebook" class="fa-brands fa-facebook tw:text-xl tw:text-neutral-500"></i>
                  <i data-network="x" class="fa-brands fa-x-twitter tw:text-xl tw:text-neutral-500"></i>
                  <i data-network="instagram" class="fa-brands fa-instagram tw:text-xl tw:text-neutral-500"></i>
                  <i data-network="linkedin" class="fa-brands fa-linkedin tw:text-xl tw:text-neutral-500"></i>
                </div>
              </div>
            </template>
            <template data-grapes-editor-target="blockTemplate" data-block-type="video">
              <div data-block-type="video" data-block-label="Video" data-block-icon="fa-circle-play" data-video-source="upload" data-video-url="" data-video-filename="" class="tw:px-6 tw:py-4">
                <div class="tw:relative tw:aspect-[3/2] tw:bg-neutral-100 tw:flex tw:items-center tw:justify-center tw:rounded">
                  <i class="fa-regular fa-video tw:text-3xl tw:text-neutral-400"></i>
                  <div data-editor-guidance="true" class="tw:absolute tw:bottom-2 tw:left-2 tw:w-7 tw:h-7 tw:rounded-full tw:bg-neutral-900/70 tw:flex tw:items-center tw:justify-center">
                    <i class="fa-solid fa-play tw:text-xs tw:text-white"></i>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <div class="tw-tab-panel tw:h-full tw:min-h-0" role="tabpanel" data-tabs-target="panel">
            <div class="tw:h-full tw:min-h-0">
              <div class="tw:w-full tw:h-full tw:min-h-0 tw:max-w-none tw:mx-auto tw:transition-[max-width] tw:duration-200 tw:flex tw:flex-col" data-device-frame-target="frame">
                <div class="tw:shrink-0 tw:bg-neutral-100 tw:px-4 tw:py-3 tw:rounded-t-lg tw:border tw:border-neutral-200 tw:border-b-0">
                  <p class="tw:text-body-s tw:leading-body-s fw-semibold tw:text-neutral-900 tw:mb-0.5" data-grapes-editor-target="previewSubject">Welcome to Our School</p>
                  <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mb-1" data-grapes-editor-target="previewPreviewText">A warm welcome from our admissions team</p>
                  <p class="tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:mb-0" data-grapes-editor-target="previewMeta">From Arbor School Admissions <admissions@arborschool.edu> · Reply-to replies@arborschool.edu · To Patricia Wilson</p>
                </div>
                <div class="tw-card tw:rounded-t-none tw:flex-1 tw:min-h-0 tw:flex tw:flex-col">
                  <div class="tw-card-body tw:p-0 tw:flex-1 tw:min-h-0 tw:overflow-y-auto" data-grapes-editor-target="previewBody"></div>
                </div>
                <p class="tw:shrink-0 tw:text-body-xs tw:leading-body-xs tw:text-neutral-500 tw:text-center tw:px-4 tw:py-3">
                  <i class="fa-regular fa-circle-info tw:mr-1"></i>
                  <span data-grapes-editor-target="previewInfo">Preview only — no email will be sent. Tokens resolved for Patricia Wilson.</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</div>