<div class="tw:min-h-screen tw:flex tw:bg-background"
     data-controller="applicant-portal"
     data-applicant-portal-tab-active-class="tw:text-primary tw:border-primary tw:font-semibold"
     data-applicant-portal-tab-inactive-class="tw:text-muted tw:border-transparent">
  <!-- ============ Left icon rail (portal nav — DS tokens, not the staff shell) ============ -->
  <nav class="tw:w-20 tw:bg-white tw:border-r tw:border-neutral-200 tw:flex tw:flex-col tw:items-center tw:shrink-0" aria-label="Applicant portal navigation">
    <div class="tw:flex tw:flex-col tw:items-center tw:gap-1 tw:py-3 tw:w-full tw:border-b tw:border-neutral-100">
      <span class="tw:w-9 tw:h-9 tw:rounded-md tw:bg-primary tw:text-white tw:font-black tw:inline-flex tw:items-center tw:justify-center tw:leading-none" aria-hidden="true">A<sup class="tw:text-secondary-500">+</sup></span>
    </div>
    <button type="button" aria-current="page" class="tw:w-full tw:flex tw:flex-col tw:items-center tw:gap-1 tw:py-3.5 tw:bg-primary-100 tw:text-primary tw:border-0 tw:cursor-pointer">
      <i class="fa-solid fa-house tw:text-xl" aria-hidden="true"></i>
      <span class="tw:text-xs tw:font-semibold tw:tracking-wide">HOME</span>
    </button>
    <button type="button" class="tw:w-full tw:flex tw:flex-col tw:items-center tw:gap-1 tw:py-3.5 tw:bg-transparent tw:text-muted tw:border-0 tw:cursor-pointer tw:hover:bg-neutral-100">
      <i class="fa-regular fa-comment-dots tw:text-xl" aria-hidden="true"></i>
      <span class="tw:text-xs tw:tracking-wide">MESSAGES</span>
    </button>
    <button type="button" class="tw:w-full tw:flex tw:flex-col tw:items-center tw:gap-1 tw:py-3.5 tw:bg-transparent tw:text-muted tw:border-0 tw:cursor-pointer tw:hover:bg-neutral-100">
      <i class="fa-regular fa-folder tw:text-xl" aria-hidden="true"></i>
      <span class="tw:text-xs tw:tracking-wide">DOCUMENTS</span>
    </button>
    <button type="button" class="tw:w-full tw:flex tw:flex-col tw:items-center tw:gap-1 tw:py-3.5 tw:bg-transparent tw:text-muted tw:border-0 tw:cursor-pointer tw:hover:bg-neutral-100">
      <i class="fa-regular fa-calendar-days tw:text-xl" aria-hidden="true"></i>
      <span class="tw:text-xs tw:tracking-wide">CALENDAR</span>
    </button>
  </nav>
  <!-- ============ Content column ============ -->
  <div class="tw:flex-1 tw:min-w-0 tw:overflow-y-auto">
    <div class="tw:max-w-7xl tw:mx-auto tw:px-8 tw:py-6">
      <!-- Top bar: greeting (left) + bell & avatar (right) -->
      <div class="tw:flex tw:items-start tw:justify-between tw:gap-6 tw:mb-6">
        <div class="tw:min-w-0" data-controller="collapsible">
          <h1 class="tw:mb-2"><span class="tw:text-4xl tw:font-bold tw:leading-tight tw:text-primary">Hello Priya,</span></h1>
          <p class="tw:text-body-m tw:leading-body-m tw:text-neutral-600 tw:max-w-2xl tw:mb-1">Hillcrest is a community of curious, ambitious young people — and one thing unites them all: a genuine love of learning.</p>
          <div class="tw-collapsible-content" data-collapsible-target="content">
            <div class="tw:overflow-hidden">
              <p class="tw:text-body-m tw:leading-body-m tw:text-neutral-600 tw:max-w-2xl tw:mb-1">Our students are supported by a dedicated progression team from day one, in small classes where staff know every name. Whether you're joining us for A Levels, a BTEC or a T Level, this is where your next step begins — we can't wait to welcome you in September.</p>
            </div>
          </div>
          <button type="button" class="tw:inline-flex tw:items-center tw:gap-1.5 tw:bg-transparent tw:border-0 tw:p-0 tw:mt-1 tw:cursor-pointer tw:text-body-s tw:font-semibold tw:text-primary tw:hover:underline"
                  data-action="click->collapsible#toggle" aria-expanded="false">
            <span>Show full message</span>
            <i class="fa-solid fa-chevron-down tw:text-xs tw:transition-transform" data-collapsible-target="icon" aria-hidden="true"></i>
          </button>
        </div>
        <div class="tw:flex tw:items-center tw:gap-3 tw:shrink-0">
          <button type="button" class="tw-btn tw-btn-tertiary tw-btn-icon tw:relative" aria-label="Notifications, 99 unread">
            <i class="fa-regular fa-bell" aria-hidden="true"></i>
            <span class="tw-badge tw-badge-danger tw-badge-notification">99</span>
          </button>
          <span class="tw-avatar tw-avatar-red" title="Priya Kaur">PK</span>
        </div>
      </div>
      <!-- Two columns: applications (left) + Meetings & Events (right) -->
      <div class="tw:grid tw:gap-6 tw:lg:grid-cols-[1fr_340px]">
        <!-- LEFT: New Application + application card -->
        <div class="tw:min-w-0">
          <div class="tw:flex tw:justify-end tw:mb-4">
            <button type="button" class="tw-btn tw-btn-primary"><i class="fa-solid fa-plus" aria-hidden="true"></i> New Application</button>
          </div>
          <div class="tw-card">
            <div class="tw-card-body">
              <!-- Card header: name + code + status + action icons -->
              <div class="tw:flex tw:items-start tw:justify-between tw:gap-4">
                <div class="tw:min-w-0">
                  <div class="tw:flex tw:items-center tw:gap-2 tw:flex-wrap">
                    <h2 class="tw-card-title tw:mb-0">Priya Kaur</h2>
                    <span class="tw-badge tw-badge-info-subtle tw-badge-dot">Under review</span>
                  </div>
                  <div class="tw:flex tw:items-center tw:gap-1.5 tw:mt-1 tw:text-body-xs tw:leading-body-xs tw:text-muted">
                    <span>Student Code: HIL-0YHQ</span>
                    <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" aria-label="Copy student code"
                            data-controller="clipboard" data-action="click->clipboard#copy" data-clipboard-value-param="HIL-0YHQ">
                      <i class="fa-regular fa-copy" data-clipboard-target="icon" aria-hidden="true"></i>
                      <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span>
                    </button>
                  </div>
                  <div class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-700 tw:mt-1">Hillcrest Sixth Form College</div>
                </div>
                <div class="tw:flex tw:items-center tw:gap-1 tw:shrink-0">
                  <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" aria-label="Messages"><i class="fa-regular fa-comment" aria-hidden="true"></i></button>
                  <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" aria-label="Notifications for this application"><i class="fa-regular fa-bell" aria-hidden="true"></i></button>
                  <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" aria-label="Share"><i class="fa-regular fa-paper-plane" aria-hidden="true"></i></button>
                  <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" aria-label="Print"><i class="fa-regular fa-print" aria-hidden="true"></i></button>
                  <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm tw-btn-icon" aria-label="More actions"><i class="fa-solid fa-ellipsis-vertical" aria-hidden="true"></i></button>
                </div>
              </div>
              <!-- Body: photo + info grid | taster-day box -->
              <div class="tw:grid tw:gap-4 tw:md:grid-cols-[1fr_260px] tw:mt-4">
                <div class="tw:flex tw:gap-4">
                  <span class="tw-avatar tw-avatar-xl tw-avatar-primary tw:shrink-0">PK</span>
                  <dl class="tw-info-grid tw:flex-1 tw:mb-0">
                    <dt class="tw-info-grid-label">Year of Entry</dt>
                    <dd class="tw-info-grid-value">Year 12</dd>
                    <dt class="tw-info-grid-label">Term of Entry</dt>
                    <dd class="tw-info-grid-value">Autumn</dd>
                    <dt class="tw-info-grid-label">Year group</dt>
                    <dd class="tw-info-grid-value">Year 12</dd>
                    <dt class="tw-info-grid-label">Subjects</dt>
                    <dd class="tw-info-grid-value">A Level Biology, A Level Chemistry, A Level Psychology</dd>
                  </dl>
                </div>
                <div class="tw:rounded-lg tw:border tw:border-orange-200 tw:bg-orange-100/40 tw:p-4">
                  <div class="tw:text-body-xs tw:leading-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-orange-700 tw:mb-2">Taster day</div>
                  <div class="tw:flex tw:flex-col tw:gap-1.5 tw:text-body-s tw:leading-body-s tw:text-neutral-700">
                    <span class="tw:flex tw:items-center tw:gap-2"><i class="fa-regular fa-clock tw:text-neutral-400 tw:w-4 tw:text-center" aria-hidden="true"></i> 9:00am</span>
                    <span class="tw:flex tw:items-center tw:gap-2"><i class="fa-regular fa-calendar tw:text-neutral-400 tw:w-4 tw:text-center" aria-hidden="true"></i> Thursday 3 September 2026</span>
                    <span class="tw:flex tw:items-center tw:gap-2"><i class="fa-regular fa-location-dot tw:text-neutral-400 tw:w-4 tw:text-center" aria-hidden="true"></i> Hillcrest campus</span>
                    <span class="tw:flex tw:items-center tw:gap-2"><i class="fa-regular fa-user tw:text-neutral-400 tw:w-4 tw:text-center" aria-hidden="true"></i> Ms Adeyemi, Admissions</span>
                  </div>
                </div>
              </div>
              <!-- Boxed progress stepper (5 stages) -->
              <div class="tw:border-t tw:border-neutral-200 tw:mt-5 tw:pt-5">
                <div class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900 tw:mb-3">A Level programme — September 2026</div>
                <ol class="tw:flex tw:items-center tw:gap-1 tw:overflow-x-auto tw:list-none tw:p-0 tw:m-0 tw:pb-1">
                  <li class="tw:flex tw:items-center tw:gap-1 tw:shrink-0">
                    <div class="tw:flex tw:items-center tw:gap-2 tw:border tw:border-green-500 tw:rounded-lg tw:px-3 tw:py-2">
                      <span class="tw:w-6 tw:h-6 tw:shrink-0 tw:rounded-full tw:bg-green-500 tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                      <span class="tw:text-body-s tw:leading-body-s tw:font-medium tw:text-neutral-900 tw:whitespace-nowrap">Submitted</span>
                    </div>
                  </li>
                  <i class="fa-solid fa-chevron-right tw:text-neutral-300 tw:text-xs tw:shrink-0" aria-hidden="true"></i>
                  <li class="tw:flex tw:items-center tw:gap-1 tw:shrink-0">
                    <div class="tw:flex tw:items-center tw:gap-2 tw:border tw:border-green-500 tw:rounded-lg tw:px-3 tw:py-2">
                      <span class="tw:w-6 tw:h-6 tw:shrink-0 tw:rounded-full tw:bg-green-500 tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                      <span class="tw:text-body-s tw:leading-body-s tw:font-medium tw:text-neutral-900 tw:whitespace-nowrap">Reference</span>
                    </div>
                  </li>
                  <i class="fa-solid fa-chevron-right tw:text-neutral-300 tw:text-xs tw:shrink-0" aria-hidden="true"></i>
                  <li class="tw:flex tw:items-center tw:gap-1 tw:shrink-0" aria-current="step">
                    <div class="tw:flex tw:items-center tw:gap-2 tw:border tw:border-orange-500 tw:bg-orange-100/40 tw:rounded-lg tw:px-3 tw:py-2">
                      <span class="tw:w-6 tw:h-6 tw:shrink-0 tw:rounded-full tw:bg-orange-500 tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs"><i class="fa-solid fa-file-lines" aria-hidden="true"></i></span>
                      <span class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-orange-700 tw:whitespace-nowrap">Review</span>
                    </div>
                  </li>
                  <i class="fa-solid fa-chevron-right tw:text-neutral-300 tw:text-xs tw:shrink-0" aria-hidden="true"></i>
                  <li class="tw:flex tw:items-center tw:gap-1 tw:shrink-0">
                    <div class="tw:flex tw:items-center tw:gap-2 tw:border tw:border-neutral-200 tw:rounded-lg tw:px-3 tw:py-2">
                      <span class="tw:w-6 tw:h-6 tw:shrink-0 tw:rounded-full tw:bg-neutral-100 tw:text-neutral-400 tw:flex tw:items-center tw:justify-center tw:text-xs"><i class="fa-regular fa-file tw:text-xs" aria-hidden="true"></i></span>
                      <span class="tw:text-body-s tw:leading-body-s tw:font-medium tw:text-muted tw:whitespace-nowrap">Offer</span>
                    </div>
                  </li>
                  <i class="fa-solid fa-chevron-right tw:text-neutral-300 tw:text-xs tw:shrink-0" aria-hidden="true"></i>
                  <li class="tw:flex tw:items-center tw:gap-1 tw:shrink-0">
                    <div class="tw:flex tw:items-center tw:gap-2 tw:border tw:border-neutral-200 tw:rounded-lg tw:px-3 tw:py-2">
                      <span class="tw:w-6 tw:h-6 tw:shrink-0 tw:rounded-full tw:bg-neutral-100 tw:text-neutral-400 tw:flex tw:items-center tw:justify-center tw:text-xs"><i class="fa-regular fa-file tw:text-xs" aria-hidden="true"></i></span>
                      <span class="tw:text-body-s tw:leading-body-s tw:font-medium tw:text-muted tw:whitespace-nowrap">Enrolment</span>
                    </div>
                  </li>
                </ol>
              </div>
              <!-- Forms & tasks checklist (migrated Outstanding items) -->
              <div class="tw:mt-5">
                <div class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900 tw:mb-3">Your forms & tasks</div>
                <div class="tw:flex tw:flex-col tw:gap-3">
                  <div class="tw:flex tw:items-start tw:gap-3">
                    <span class="tw:w-5 tw:h-5 tw:shrink-0 tw:mt-0.5 tw:rounded-full tw:bg-green-500 tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                    <div class="tw:flex-1 tw:min-w-0">
                      <div class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900">Application form</div>
                      <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">Submitted 14 April 2026</div>
                    </div>
                  </div>
                  <div class="tw:flex tw:items-start tw:gap-3">
                    <span class="tw:w-5 tw:h-5 tw:shrink-0 tw:mt-0.5 tw:rounded-full tw:bg-green-500 tw:text-white tw:flex tw:items-center tw:justify-center tw:text-xs"><i class="fa-solid fa-check" aria-hidden="true"></i></span>
                    <div class="tw:flex-1 tw:min-w-0">
                      <div class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900">First reference</div>
                      <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">Received from Mr Okafor</div>
                    </div>
                  </div>
                  <div class="tw:flex tw:items-start tw:gap-3">
                    <span class="tw:w-5 tw:h-5 tw:shrink-0 tw:mt-0.5 tw:rounded-full tw:border-2 tw:border-orange-400 tw:bg-white" aria-hidden="true"></span>
                    <div class="tw:flex-1 tw:min-w-0">
                      <div class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900">Predicted grades form</div>
                      <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">Ask your school to complete this by 22 May 2026</div>
                    </div>
                    <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm tw:shrink-0">Send reminder</button>
                  </div>
                  <div class="tw:flex tw:items-start tw:gap-3">
                    <span class="tw:w-5 tw:h-5 tw:shrink-0 tw:mt-0.5 tw:rounded-full tw:border-2 tw:border-orange-400 tw:bg-white" aria-hidden="true"></span>
                    <div class="tw:flex-1 tw:min-w-0">
                      <div class="tw:text-body-s tw:leading-body-s tw:font-semibold tw:text-neutral-900">Second reference</div>
                      <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">Ms Adeyemi hasn't responded yet</div>
                    </div>
                    <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm tw:shrink-0">Chase referee</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- RIGHT: Meetings & Events -->
        <aside class="tw:lg:sticky tw:lg:top-6 tw:self-start">
          <h2 class="tw-h4 tw:mb-3">Meetings & Events</h2>
          <div role="tablist" aria-label="Filter meetings and events" class="tw:flex tw:gap-4 tw:border-b tw:border-neutral-200 tw:mb-4">
            <button type="button" role="tab" aria-selected="true" data-applicant-portal-target="tab"
                    data-action="click->applicant-portal#filterTab" data-applicant-portal-type-param="all"
              class="tw:bg-transparent tw:border-0 tw:border-b-2 tw:pb-2 tw:cursor-pointer tw:text-body-s tw:leading-body-s tw:text-primary tw:border-primary tw:font-semibold">All</button>
            <button type="button" role="tab" aria-selected="false" data-applicant-portal-target="tab"
                    data-action="click->applicant-portal#filterTab" data-applicant-portal-type-param="meeting"
              class="tw:bg-transparent tw:border-0 tw:border-b-2 tw:pb-2 tw:cursor-pointer tw:text-body-s tw:leading-body-s tw:text-muted tw:border-transparent">Meetings</button>
            <button type="button" role="tab" aria-selected="false" data-applicant-portal-target="tab"
                    data-action="click->applicant-portal#filterTab" data-applicant-portal-type-param="event"
              class="tw:bg-transparent tw:border-0 tw:border-b-2 tw:pb-2 tw:cursor-pointer tw:text-body-s tw:leading-body-s tw:text-muted tw:border-transparent">Events</button>
          </div>
          <div class="tw:flex tw:flex-col tw:gap-3">
            <!-- Taster Day — MEETING -->
            <article class="tw-event-card tw-event-card-pending" data-applicant-portal-target="event" data-type="meeting">
              <div class="tw:flex tw:gap-3">
                <div class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:bg-white tw:rounded-md tw:w-14 tw:shrink-0 tw:py-2 tw:border tw:border-neutral-200">
                  <span class="tw:text-2xl tw:font-bold tw:text-neutral-900 tw:leading-none">03</span>
                  <span class="tw-overline tw:mt-0.5">SEP</span>
                </div>
                <div class="tw:min-w-0 tw:flex-1">
                  <span class="tw-tag tw-tag-sm tw-tag-warning-subtle">MEETING</span>
                  <h3 class="tw-event-card-title tw:mt-1.5">Taster Day</h3>
                  <div class="tw:flex tw:flex-col tw:gap-1 tw:text-body-xs tw:leading-body-xs tw:text-neutral-600">
                    <span class="tw:flex tw:items-center tw:gap-1.5"><i class="fa-regular fa-calendar" aria-hidden="true"></i> Thu 3 Sep 2026, 9:00am</span>
                    <span class="tw:flex tw:items-center tw:gap-1.5"><i class="fa-regular fa-location-dot" aria-hidden="true"></i> Hillcrest campus</span>
                  </div>
                  <div class="tw:flex tw:items-center tw:justify-between tw:gap-2 tw:mt-2.5">
                    <div class="tw:flex tw:-space-x-2">
                      <span class="tw-avatar tw-avatar-xs tw-avatar-blue tw:ring-2 tw:ring-white">SA</span>
                      <span class="tw-avatar tw-avatar-xs tw-avatar-green tw:ring-2 tw:ring-white">PK</span>
                    </div>
                    <div class="tw:flex tw:gap-1.5" data-applicant-portal-actions>
                      <button type="button" class="tw-btn tw-btn-secondary tw-btn-sm" data-action="click->applicant-portal#rsvp" data-applicant-portal-kind-param="decline">Decline</button>
                      <button type="button" class="tw-btn tw-btn-primary tw-btn-sm" data-action="click->applicant-portal#rsvp" data-applicant-portal-kind-param="accept">Accept</button>
                    </div>
                  </div>
                </div>
              </div>
            </article>
            <!-- Open Evening — EVENT -->
            <article class="tw-event-card tw-event-card-confirmed" data-applicant-portal-target="event" data-type="event">
              <div class="tw:flex tw:gap-3">
                <div class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:bg-white tw:rounded-md tw:w-14 tw:shrink-0 tw:py-2 tw:border tw:border-neutral-200">
                  <span class="tw:text-2xl tw:font-bold tw:text-neutral-900 tw:leading-none">24</span>
                  <span class="tw-overline tw:mt-0.5">SEP</span>
                </div>
                <div class="tw:min-w-0 tw:flex-1">
                  <span class="tw-tag tw-tag-sm tw-tag-info-subtle">EVENT</span>
                  <h3 class="tw-event-card-title tw:mt-1.5">Open Evening</h3>
                  <div class="tw:flex tw:flex-col tw:gap-1 tw:text-body-xs tw:leading-body-xs tw:text-neutral-600">
                    <span class="tw:flex tw:items-center tw:gap-1.5"><i class="fa-regular fa-calendar" aria-hidden="true"></i> 24 Sep 2026, 5:30–8pm</span>
                    <span class="tw:flex tw:items-center tw:gap-1.5"><i class="fa-regular fa-location-dot" aria-hidden="true"></i> Hillcrest campus</span>
                  </div>
                  <div class="tw:flex tw:items-center tw:justify-between tw:gap-2 tw:mt-2.5">
                    <div class="tw:flex tw:-space-x-2">
                      <span class="tw-avatar tw-avatar-xs tw-avatar-magenta tw:ring-2 tw:ring-white">JD</span>
                      <span class="tw-avatar tw-avatar-xs tw-avatar-orange tw:ring-2 tw:ring-white">RP</span>
                    </div>
                    <div class="tw:flex tw:gap-1.5" data-applicant-portal-actions>
                      <button type="button" class="tw-btn tw-btn-primary tw-btn-sm" data-action="click->applicant-portal#rsvp" data-applicant-portal-kind-param="register">Register</button>
                    </div>
                  </div>
                </div>
              </div>
            </article>
            <!-- GCSE Results Day — EVENT -->
            <article class="tw-event-card" data-applicant-portal-target="event" data-type="event">
              <div class="tw:flex tw:gap-3">
                <div class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:bg-white tw:rounded-md tw:w-14 tw:shrink-0 tw:py-2 tw:border tw:border-neutral-200">
                  <span class="tw:text-2xl tw:font-bold tw:text-neutral-900 tw:leading-none">20</span>
                  <span class="tw-overline tw:mt-0.5">AUG</span>
                </div>
                <div class="tw:min-w-0 tw:flex-1">
                  <span class="tw-tag tw-tag-sm tw-tag-info-subtle">EVENT</span>
                  <h3 class="tw-event-card-title tw:mt-1.5">GCSE Results Day</h3>
                  <div class="tw:flex tw:flex-col tw:gap-1 tw:text-body-xs tw:leading-body-xs tw:text-neutral-600">
                    <span class="tw:flex tw:items-center tw:gap-1.5"><i class="fa-regular fa-calendar" aria-hidden="true"></i> 20 Aug 2026</span>
                    <span class="tw:flex tw:items-center tw:gap-1.5"><i class="fa-regular fa-location-dot" aria-hidden="true"></i> Hillcrest campus</span>
                  </div>
                </div>
              </div>
            </article>
            <!-- Enrolment — EVENT -->
            <article class="tw-event-card" data-applicant-portal-target="event" data-type="event">
              <div class="tw:flex tw:gap-3">
                <div class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:bg-white tw:rounded-md tw:w-14 tw:shrink-0 tw:py-2 tw:border tw:border-neutral-200">
                  <span class="tw:text-2xl tw:font-bold tw:text-neutral-900 tw:leading-none">28</span>
                  <span class="tw-overline tw:mt-0.5">AUG</span>
                </div>
                <div class="tw:min-w-0 tw:flex-1">
                  <span class="tw-tag tw-tag-sm tw-tag-info-subtle">EVENT</span>
                  <h3 class="tw-event-card-title tw:mt-1.5">Enrolment</h3>
                  <div class="tw:flex tw:flex-col tw:gap-1 tw:text-body-xs tw:leading-body-xs tw:text-neutral-600">
                    <span class="tw:flex tw:items-center tw:gap-1.5"><i class="fa-regular fa-calendar" aria-hidden="true"></i> 28–29 Aug 2026</span>
                    <span class="tw:flex tw:items-center tw:gap-1.5"><i class="fa-regular fa-location-dot" aria-hidden="true"></i> Hillcrest campus</span>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </aside>
      </div>
    </div>
  </div>
  <!-- Toast container (copy + RSVP confirmations) -->
  <div class="tw-toast-container" data-controller="toast" data-applicant-portal-target="toastContainer"></div>
  <div data-controller="applicant-emma"
     data-applicant-emma-surface-value="portal"
     data-applicant-emma-welcome-value="Hi Priya — I'm Emma. Ask me about your application, key dates, or anything Hillcrest has published. I can only see your own application, and I'll always show you my source."
     data-applicant-emma-hidden-class="tw-support-hidden"
     data-applicant-emma-fab-open-class="tw-support-fab--open"
     data-applicant-emma-invalid-class="tw-is-invalid">
    <button class="tw-support-fab" type="button" aria-label="Chat with Emma" aria-expanded="false"
          data-applicant-emma-target="fab" data-action="applicant-emma#toggle">
      <span class="tw-support-fab-ring"></span>
      <span class="tw-support-fab-av"><i class="fa-solid fa-message" aria-hidden="true"></i></span>
    </button>
    <div class="tw-support-panel tw-support-hidden" role="dialog" aria-label="Emma chat"
       data-applicant-emma-target="panel"
       data-action="keydown.esc->applicant-emma#close">
      <div class="tw-support-panel-hdr">
        <span class="tw:w-8 tw:h-8 tw:rounded-full tw:bg-white/20 tw:flex tw:items-center tw:justify-center tw:shrink-0" aria-hidden="true">
          <span class="tw:w-3.5 tw:h-3.5 tw:rounded-full tw:bg-white/90"></span>
        </span>
        <div class="tw-support-panel-hdr-info">
          <div class="tw-support-panel-hdr-name">Emma · Hillcrest Sixth Form</div>
          <div class="tw-support-panel-hdr-status">
            <i class="fa-solid fa-circle tw:text-[8px] tw:text-white/60" data-applicant-emma-target="dotIdle" aria-hidden="true"></i>
            <i class="fa-solid fa-circle tw:text-[8px] tw:text-green-400 tw-support-hidden" data-applicant-emma-target="dotLive" aria-hidden="true"></i>
            <span data-applicant-emma-target="status">Signed in as Priya · answers cite their source</span>
          </div>
        </div>
        <button type="button"
              class="tw-support-hidden tw:bg-white/10 tw:hover:bg-white/20 tw:text-white/90 tw:border-0 tw:rounded-lg tw:h-9 tw:px-2.5 tw:text-body-xs tw:leading-body-xs tw:font-semibold tw:cursor-pointer tw:shrink-0 tw:focus-visible:ring-4 tw:focus-visible:ring-white/40 tw:focus-visible:outline-none"
              data-applicant-emma-target="endChat" data-action="applicant-emma#endLive">End chat</button>
        <div class="tw-support-panel-hdr-btns">
          <button class="tw-support-panel-btn" type="button" aria-label="Close chat" data-action="applicant-emma#close">
            <i class="fa-solid fa-xmark" aria-hidden="true"></i>
          </button>
        </div>
      </div>
      <div class="tw-support-panel-thread" role="log" aria-live="polite" data-applicant-emma-target="thread"></div>
      <div class="tw-support-hidden tw:flex tw:items-center tw:gap-2 tw:px-3.5 tw:py-2.5 tw:bg-orange-100 tw:text-orange-800 tw:text-body-xs tw:leading-body-xs tw:border-t tw:border-orange-200"
         data-applicant-emma-target="rateStrip" role="status">
        <i class="fa-solid fa-hourglass-half" aria-hidden="true"></i>
        You've sent a lot of messages — please try again in a few minutes.
      </div>
      <div class="tw-support-panel-composer">
        <div class="tw-chat-input-area">
          <div class="tw-chat-input-row">
            <input type="text" class="tw-chat-input" placeholder="Ask Emma about Hillcrest…" aria-label="Message Emma"
                 data-applicant-emma-target="input"
                 data-action="keydown.enter->applicant-emma#send">
            <button class="tw-chat-send" type="button" aria-label="Send"
                  data-applicant-emma-target="send" data-action="applicant-emma#send">
              <i class="fa-solid fa-paper-plane" aria-hidden="true"></i>
            </button>
          </div>
        </div>
      </div>
      <a href="https://www.applicaa.com" target="_blank" rel="noopener"
       class="tw:flex tw:items-center tw:justify-center tw:gap-1 tw:px-3 tw:py-1.5 tw:bg-neutral-100 tw:border-t tw:border-neutral-200 tw:text-body-xs tw:leading-body-xs tw:text-muted tw:no-underline tw:hover:text-neutral-700 tw:shrink-0">
        Powered by <strong class="tw:font-bold tw:text-primary-500">Applicaa</strong>
      </a>
    </div>
    <template data-applicant-emma-target="tplEmma">
      <div class="tw-chat-msg">
        <div class="tw-chat-avatar" aria-hidden="true">E</div>
        <div class="tw:flex tw:flex-col tw:gap-2 tw:min-w-0">
          <div class="tw-chat-bubble tw:whitespace-pre-line" data-slot="text"></div>
          <div class="tw:flex tw:flex-col tw:gap-1.5 tw:items-start" data-slot="cites"></div>
          <div class="tw:flex tw:flex-wrap tw:gap-1.5" data-slot="chips"></div>
        </div>
      </div>
    </template>
    <template data-applicant-emma-target="tplUser">
      <div class="tw-chat-msg tw-chat-msg-user">
        <div class="tw-chat-bubble-user tw:whitespace-pre-line" data-slot="text"></div>
      </div>
    </template>
    <template data-applicant-emma-target="tplAgent">
      <div class="tw-chat-msg">
        <span class="tw-avatar tw-avatar-sm tw-support-av-agent" aria-hidden="true">SW</span>
        <div class="tw-chat-bubble tw:whitespace-pre-line">
          <div class="tw:text-body-xs tw:leading-body-xs tw:font-bold tw:uppercase tw:tracking-wide tw:text-primary-600 tw:mb-1">Sarah · Admissions team</div>
          <div data-slot="text"></div>
        </div>
      </div>
    </template>
    <template data-applicant-emma-target="tplSys">
      <div class="tw:text-center tw:text-body-xs tw:leading-body-xs tw:text-muted tw:px-5 tw:py-0.5">
        <i class="fa-solid fa-ticket tw:mr-1.5" data-slot="icon" aria-hidden="true"></i><span data-slot="text"></span>
      </div>
    </template>
    <template data-applicant-emma-target="tplTyping">
      <div class="tw-chat-msg">
        <div class="tw-chat-avatar" aria-hidden="true">E</div>
        <div class="tw-chat-bubble tw:flex tw:items-center tw:gap-1" aria-label="Emma is typing">
          <span class="tw:w-1.5 tw:h-1.5 tw:rounded-full tw:bg-neutral-400 tw:animate-bounce"></span>
          <span class="tw:w-1.5 tw:h-1.5 tw:rounded-full tw:bg-neutral-400 tw:animate-bounce tw:[animation-delay:120ms]"></span>
          <span class="tw:w-1.5 tw:h-1.5 tw:rounded-full tw:bg-neutral-400 tw:animate-bounce tw:[animation-delay:240ms]"></span>
        </div>
      </div>
    </template>
    <template data-applicant-emma-target="tplCite">
      <a class="tw:inline-flex tw:items-center tw:gap-1.5 tw:self-start tw:rounded-md tw:bg-blue-100 tw:hover:bg-blue-200 tw:px-2 tw:py-1 tw:text-body-xs tw:leading-body-xs tw:text-blue-700 tw:no-underline tw:cursor-pointer">
        <i class="fa-solid fa-link" aria-hidden="true"></i><span data-slot="label"></span>
      </a>
    </template>
    <template data-applicant-emma-target="tplChip">
      <button type="button" class="tw-chat-chip" data-action="applicant-emma#chip"></button>
    </template>
    <template data-applicant-emma-target="tplQueue">
      <div class="tw:rounded-xl tw:border tw:border-neutral-200 tw:bg-white tw:p-3.5 tw:flex tw:flex-col tw:items-center tw:gap-2 tw:text-center">
        <i class="fa-solid fa-user-clock tw:text-lg tw:text-primary" aria-hidden="true"></i>
        <div class="tw:text-body-s tw:leading-body-s tw:text-neutral-900"><strong>You're <span data-slot="pos">2nd</span> in the queue</strong></div>
        <div class="tw:text-body-xs tw:leading-body-xs tw:text-muted">Your position updates as chats finish.</div>
        <button type="button" class="tw-btn tw-btn-tertiary tw-btn-sm" data-action="applicant-emma#leaveQueueAsTicket">Leave it with us as a ticket instead</button>
      </div>
    </template>
    <template data-applicant-emma-target="tplEoi">
      <form class="tw:rounded-xl tw:border tw:border-neutral-200 tw:bg-white tw:p-3.5 tw:flex tw:flex-col tw:gap-3" novalidate
          data-emma-form="eoi" data-action="submit->applicant-emma#submitEoi">
        <div class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">Your details</div>
        <div class="tw-form-group">
          <label class="tw-form-label tw-form-label-required" for="portal-eoi-parent">Parent / carer name</label>
          <input type="text" id="portal-eoi-parent" class="tw-form-control" data-slot="eoi-parent" aria-required="true">
          <div class="tw-invalid-feedback">Please enter your name</div>
        </div>
        <div class="tw-form-group">
          <label class="tw-form-label tw-form-label-required" for="portal-eoi-email">Email address</label>
          <input type="email" id="portal-eoi-email" class="tw-form-control" data-slot="eoi-email" aria-required="true">
          <div class="tw-invalid-feedback">Enter a valid email address</div>
        </div>
        <div class="tw-form-group">
          <label class="tw-form-label tw-form-label-optional" for="portal-eoi-phone">Phone</label>
          <input type="tel" id="portal-eoi-phone" class="tw-form-control" data-slot="eoi-phone">
        </div>
        <div class="tw-form-group">
          <label class="tw-form-label tw-form-label-required" for="portal-eoi-child">Child's name</label>
          <input type="text" id="portal-eoi-child" class="tw-form-control" data-slot="eoi-child" aria-required="true">
          <div class="tw-invalid-feedback">Please enter your child's name</div>
        </div>
        <div class="tw-form-group">
          <label class="tw-form-label tw-form-label-required" for="portal-eoi-year">Expected year of entry</label>
          <select id="portal-eoi-year" class="tw-form-select" data-slot="eoi-year" aria-required="true">
            <option>Year 12 — September 2026</option>
            <option>Year 12 — September 2027</option>
            <option>Year 13 transfer</option>
          </select>
        </div>
        <div class="tw-form-check">
          <input type="checkbox" class="tw-form-check-input" id="portal-eoi-consent" data-slot="eoi-consent" aria-required="true">
          <label class="tw-form-check-label" for="portal-eoi-consent">
            Hillcrest may contact me about my enquiry. See the college's <a class="tw:underline">privacy notice</a>.
          </label>
          <div class="tw-invalid-feedback">Please confirm consent so the school can contact you</div>
        </div>
        <button type="submit" class="tw-btn tw-btn-primary tw-btn-block">Send to the school</button>
      </form>
    </template>
    <template data-applicant-emma-target="tplContact">
      <form class="tw:rounded-xl tw:border tw:border-neutral-200 tw:bg-white tw:p-3.5 tw:flex tw:flex-col tw:gap-3" novalidate
          data-emma-form="contact" data-action="submit->applicant-emma#submitContact">
        <div class="tw:text-body-s tw:leading-body-s tw:font-bold tw:text-neutral-900">Where should the school reply?</div>
        <div class="tw-form-group">
          <label class="tw-form-label tw-form-label-required" for="portal-ct-name">Your name</label>
          <input type="text" id="portal-ct-name" class="tw-form-control" data-slot="ct-name" aria-required="true">
          <div class="tw-invalid-feedback">Please enter your name</div>
        </div>
        <div class="tw-form-group">
          <label class="tw-form-label tw-form-label-required" for="portal-ct-email">Email address</label>
          <input type="email" id="portal-ct-email" class="tw-form-control" data-slot="ct-email" aria-required="true">
          <div class="tw-invalid-feedback">Enter a valid email address</div>
        </div>
        <button type="submit" class="tw-btn tw-btn-primary tw-btn-block">Send to the team</button>
      </form>
    </template>
  </div>
</div>