<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>POPUP:</strong> Modal dialog for essential information or actions<br> <strong>TYPES:</strong> Rich Content (default) | Informative (.popup-seamless) | Minimal (.popup-minimal)<br> <strong>ALIGNMENT:</strong> Left (default) | Center (.popup-center)<br> <strong>SIZES:</strong> Small (.popup-sm) | Default | Large (.popup-lg) | Extra Large (.popup-xl) </p> <p class="tw:mb-0 tw:text-sm"> Popups block user interaction until dismissed. Use for confirmations, settings panels, and informational dialogs. Supports layered stacking with dimming and configurable dismiss modes. </p> </div> <!-- ============================================ Type: Rich Content (Default) ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Type: Rich Content (Default)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Rich Content:</strong> Header has a visible bottom border separating it from the body. Body scrolls when content exceeds viewport. Footer stays fixed at the bottom with no top border. Best for settings panels, table configurations, and form inputs. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div data-controller="popup"> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#show"> Open Rich Content Popup </button> <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="tw-popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="rich-title"> <div class="tw-popup-header"> <div> <h2 class="tw-popup-header-title" id="rich-title">Table View Settings</h2> <p class="tw-popup-header-subtitle">Configure visible columns and their order</p> </div> <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="tw-popup-body"> <p class="tw:mb-3">Select which columns to display in the applicant list view. Drag to reorder.</p> <div class="tw:space-y-2"> <label class="tw-form-check"> <input type="checkbox" class="tw-form-check-input" checked> <span class="tw-form-check-label">Applicant Name</span> </label> <label class="tw-form-check"> <input type="checkbox" class="tw-form-check-input" checked> <span class="tw-form-check-label">Application Date</span> </label> <label class="tw-form-check"> <input type="checkbox" class="tw-form-check-input" checked> <span class="tw-form-check-label">Status</span> </label> <label class="tw-form-check"> <input type="checkbox" class="tw-form-check-input"> <span class="tw-form-check-label">Year Group</span> </label> <label class="tw-form-check"> <input type="checkbox" class="tw-form-check-input"> <span class="tw-form-check-label">Parent Email</span> </label> </div> </div> <div class="tw-popup-footer"> <button class="tw-btn tw-btn-secondary" type="button" data-action="click->popup#close">Cancel</button> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#close">Apply Settings</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="tw-popup-panel" role="dialog" aria-modal="true"&gt;</code><br> <code>&nbsp;&nbsp;&lt;div class="tw-popup-header"&gt;...&lt;/div&gt;</code><br> <code>&nbsp;&nbsp;&lt;div class="tw-popup-body"&gt;...&lt;/div&gt;</code><br> <code>&nbsp;&nbsp;&lt;div class="tw-popup-footer"&gt;...&lt;/div&gt;</code><br> <code>&lt;/div&gt;</code> </div> </div> <!-- ============================================ Type: Informative (Seamless) ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Type: Informative (.popup-seamless)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Informative:</strong> Header flows seamlessly into the body with no border. Best for confirmation dialogs with explanatory text and information popups. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div data-controller="popup"> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#show"> Open Informative Popup </button> <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="tw-popup-panel tw-popup-seamless" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="info-title"> <div class="tw-popup-header"> <div> <h2 class="tw-popup-header-title" id="info-title">How does the Sorting Hat really sort?</h2> </div> <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="tw-popup-body"> <p class="tw:mb-3"> The admissions scoring algorithm takes multiple factors into account when evaluating each application. Understanding these factors helps ensure fair and consistent decision-making across all applicants. </p> <p class="tw:mb-3"> <strong>Academic Performance</strong> — Prior school reports and assessment results are weighted based on the entry year requirements. For Year 7 entry, Key Stage 2 results carry the highest weight. </p> <p class="tw:mb-3"> <strong>Interview Scores</strong> — Both individual and group interview scores are normalised across different interviewers to reduce bias. The system tracks inter-rater reliability automatically. </p> <p> <strong>Special Considerations</strong> — Sibling priority, bursary eligibility, and catchment area are applied as separate flags rather than modifying the base score, ensuring transparency in the final ranking. </p> </div> <div class="tw-popup-footer"> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#close">Got it</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="tw-popup-panel <strong>popup-seamless</strong>"&gt;...&lt;/div&gt;</code> </div> </div> <!-- ============================================ Type: Minimal ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Type: Minimal (.popup-minimal)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Minimal:</strong> No header at all — body content starts immediately with extra top padding. Best for simple confirmations with an icon, success messages, and yes/no prompts. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div data-controller="popup"> <button class="tw-btn tw-btn-success" type="button" data-action="click->popup#show"> Open Minimal Popup </button> <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="tw-popup-panel tw-popup-minimal tw-popup-center tw-popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-label="Action completed"> <div class="tw-popup-body"> <div class="tw:text-green-500 tw:mx-auto tw:mb-4 tw:text-5xl tw:text-center"> <i class="fa-solid fa-circle-check"></i> </div> <p class="tw-h3 tw:mb-2">Application Submitted!</p> <p class="text-muted">The application for Year 7 entry has been successfully submitted. The family will receive a confirmation email shortly.</p> </div> <div class="tw-popup-footer"> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#close">Done</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="tw-popup-panel <strong>tw-popup-minimal tw-popup-center tw-popup-sm</strong>"&gt;...&lt;/div&gt;</code> </div> </div> <!-- ============================================ Center Alignment ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Center Alignment (.popup-center)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Center:</strong> Centers text in header, body, and footer. Combine with any type. Best for confirmation dialogs and simple prompts. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div data-controller="popup"> <button class="tw-btn tw-btn-danger" type="button" data-action="click->popup#show"> Open Centered Confirmation </button> <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="tw-popup-panel tw-popup-seamless tw-popup-center tw-popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="center-title"> <div class="tw-popup-header"> <div> <h2 class="tw-popup-header-title" id="center-title">Delete Application?</h2> </div> </div> <div class="tw-popup-body"> <p class="text-muted"> Are you sure you want to permanently delete the application for <strong>James Thompson</strong>? This action cannot be undone and all associated documents will be removed. </p> </div> <div class="tw-popup-footer"> <button class="tw-btn tw-btn-secondary" type="button" data-action="click->popup#close">Cancel</button> <button class="tw-btn tw-btn-danger" type="button" data-action="click->popup#close">Delete Application</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="tw-popup-panel <strong>popup-center</strong>"&gt;...&lt;/div&gt;</code> </div> </div> <!-- ============================================ Size Variants ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Size Variants</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Sizes:</strong> <code>.popup-sm</code> (400px) | Default (520px) | <code>.popup-lg</code> (680px) | <code>.popup-xl</code> (860px). All sizes are responsive and shrink gracefully on mobile. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <!-- Small --> <div data-controller="popup"> <button class="tw-btn tw-btn-outline-primary tw-btn-sm" type="button" data-action="click->popup#show"> Small (400px) </button> <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="tw-popup-panel tw-popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="size-sm-title"> <div class="tw-popup-header"> <div> <h2 class="tw-popup-header-title" id="size-sm-title">Small Popup</h2> </div> <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="tw-popup-body"> <p>This popup is 400px wide. Ideal for simple confirmations and quick prompts.</p> </div> <div class="tw-popup-footer"> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#close">Close</button> </div> </div> </div> <!-- Default --> <div data-controller="popup"> <button class="tw-btn tw-btn-outline-primary tw-btn-sm" type="button" data-action="click->popup#show"> Default (520px) </button> <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="tw-popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="size-md-title"> <div class="tw-popup-header"> <div> <h2 class="tw-popup-header-title" id="size-md-title">Default Popup</h2> </div> <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="tw-popup-body"> <p>This popup is 520px wide. The standard size for most use cases including forms and settings.</p> </div> <div class="tw-popup-footer"> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#close">Close</button> </div> </div> </div> <!-- Large --> <div data-controller="popup"> <button class="tw-btn tw-btn-outline-primary tw-btn-sm" type="button" data-action="click->popup#show"> Large (680px) </button> <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="tw-popup-panel tw-popup-lg" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="size-lg-title"> <div class="tw-popup-header"> <div> <h2 class="tw-popup-header-title" id="size-lg-title">Large Popup</h2> </div> <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="tw-popup-body"> <p>This popup is 680px wide. Good for rich content, multi-column forms, and detailed settings.</p> </div> <div class="tw-popup-footer"> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#close">Close</button> </div> </div> </div> <!-- Extra Large --> <div data-controller="popup"> <button class="tw-btn tw-btn-outline-primary tw-btn-sm" type="button" data-action="click->popup#show"> Extra Large (860px) </button> <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="tw-popup-panel tw-popup-xl" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="size-xl-title"> <div class="tw-popup-header"> <div> <h2 class="tw-popup-header-title" id="size-xl-title">Extra Large Popup</h2> </div> <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="tw-popup-body"> <p>This popup is 860px wide. Suitable for complex settings panels, large data tables, and multi-step flows.</p> </div> <div class="tw-popup-footer"> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#close">Close</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="tw-popup-panel <strong>popup-sm</strong>"&gt;</code> | <code>&lt;div class="tw-popup-panel"&gt;</code> | <code>&lt;div class="tw-popup-panel <strong>popup-lg</strong>"&gt;</code> | <code>&lt;div class="tw-popup-panel <strong>popup-xl</strong>"&gt;</code> </div> </div> <!-- ============================================ Scrollable Body ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Scrollable Body</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Scrollable:</strong> When body content exceeds the viewport, only the body scrolls. Header and footer remain fixed in place. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div data-controller="popup"> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#show"> Open Scrollable Popup </button> <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="tw-popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="scroll-title"> <div class="tw-popup-header"> <div> <h2 class="tw-popup-header-title" id="scroll-title">Terms and Conditions</h2> <p class="tw-popup-header-subtitle">Please read carefully before proceeding</p> </div> <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="tw-popup-body"> <h3 class="tw-h4 tw:mb-3">1. Data Protection</h3> <p class="tw:mb-4">All personal data collected through the admissions process is handled in accordance with the Data Protection Act 2018 and UK GDPR. The school acts as a data controller and processes applicant information solely for the purpose of managing admissions decisions.</p> <h3 class="tw-h4 tw:mb-3">2. Application Process</h3> <p class="tw:mb-4">Applications must be submitted by the published deadline. Late applications may be considered at the school's discretion but will not be given priority over timely submissions. All information provided must be accurate and complete.</p> <h3 class="tw-h4 tw:mb-3">3. Assessment and Selection</h3> <p class="tw:mb-4">The school reserves the right to assess applicants through interviews, entrance examinations, or portfolio reviews as appropriate. Selection criteria are published annually and applied consistently to all applicants.</p> <h3 class="tw-h4 tw:mb-3">4. Offer and Acceptance</h3> <p class="tw:mb-4">Offers of places are conditional upon acceptance within the specified timeframe. Failure to respond by the deadline may result in the offer being withdrawn and the place offered to the next applicant on the waiting list.</p> <h3 class="tw-h4 tw:mb-3">5. Waiting Lists</h3> <p class="tw:mb-4">Where the school is oversubscribed, a waiting list will be maintained until the end of the autumn term. Position on the waiting list is determined by the admissions criteria and may change as new applications are received.</p> <h3 class="tw-h4 tw:mb-3">6. Appeals</h3> <p class="tw:mb-4">Parents have the right to appeal against a decision to refuse admission. Appeals are heard by an independent panel and the school will provide information about the appeals process with any refusal notification.</p> <h3 class="tw-h4 tw:mb-3">7. Fees and Deposits</h3> <p>A non-refundable registration fee is required at the time of application. Upon acceptance of a place, a deposit is payable which will be credited against the first term's fees. Full fee schedules are available from the admissions office.</p> </div> <div class="tw-popup-footer"> <button class="tw-btn tw-btn-secondary" type="button" data-action="click->popup#close">Decline</button> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#close">Accept Terms</button> </div> </div> </div> </div> </div> <!-- ============================================ Without Close Button ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Without Close Button</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>No Close Button:</strong> The close button (<code>.popup-close</code>) is optional. Omit it when the user must make an explicit choice from the footer actions. The popup can still be closed via overlay click or Escape key. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div data-controller="popup"> <button class="tw-btn tw-btn-warning" type="button" data-action="click->popup#show"> Open Without Close Button </button> <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="tw-popup-panel tw-popup-seamless tw-popup-center tw-popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="noclose-title"> <div class="tw-popup-header"> <div> <h2 class="tw-popup-header-title" id="noclose-title">Unsaved Changes</h2> </div> </div> <div class="tw-popup-body"> <p class="text-muted"> You have unsaved changes. Would you like to save before leaving this page? </p> </div> <div class="tw-popup-footer"> <button class="tw-btn tw-btn-secondary" type="button" data-action="click->popup#close">Discard</button> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#close">Save Changes</button> </div> </div> </div> </div> </div> <!-- ============================================ Layered Popups (Stacking) ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Layered Popups (Stacking)</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Stacking:</strong> When a second popup opens, the first popup is dimmed (<code>.popup-dimmed</code>) and the new overlay is transparent to avoid double-darkening. Closing the top popup un-dims the one underneath. Focus is trapped in the topmost popup. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div data-controller="popup"> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#show"> Open First Popup </button> <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="tw-popup-panel" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="layer1-title"> <div class="tw-popup-header"> <div> <h2 class="tw-popup-header-title" id="layer1-title">Admission Settings</h2> <p class="tw-popup-header-subtitle">Configure admissions for Year 7 entry 2026</p> </div> <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="tw-popup-body"> <p class="tw:mb-4">Manage the settings for this admissions cycle. Changes will apply to all new applications.</p> <div data-controller="popup"> <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button" data-action="click->popup#show"> Open Confirmation (Second Popup) </button> <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="tw-popup-panel tw-popup-seamless tw-popup-center tw-popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="layer2-title"> <div class="tw-popup-header"> <div> <h2 class="tw-popup-header-title" id="layer2-title">Confirm Reset?</h2> </div> </div> <div class="tw-popup-body"> <p class="text-muted"> This will reset all admissions settings to their default values. Are you sure you want to continue? </p> </div> <div class="tw-popup-footer"> <button class="tw-btn tw-btn-secondary" type="button" data-action="click->popup#close">Cancel</button> <button class="tw-btn tw-btn-danger" type="button" data-action="click->popup#close">Reset Settings</button> </div> </div> </div> </div> <div class="tw-popup-footer"> <button class="tw-btn tw-btn-secondary" type="button" data-action="click->popup#close">Cancel</button> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#close">Save Settings</button> </div> </div> </div> </div> </div> <!-- ============================================ Dismiss Modes ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Dismiss Modes</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Dismiss Mode:</strong> Controls what happens when the overlay is clicked or Escape is pressed.<br> <code>data-popup-dismiss-mode-value="single"</code> (default) — Closes only the topmost popup.<br> <code>data-popup-dismiss-mode-value="all"</code> — Closes all open popups at once. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <!-- Single dismiss mode --> <div data-controller="popup" data-popup-dismiss-mode-value="single"> <button class="tw-btn tw-btn-outline-primary tw-btn-sm" type="button" data-action="click->popup#show"> Single Dismiss (default) </button> <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="tw-popup-panel tw-popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="dismiss-single-title"> <div class="tw-popup-header"> <div> <h2 class="tw-popup-header-title" id="dismiss-single-title">Single Dismiss</h2> </div> <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="tw-popup-body"> <p>Click the overlay or press Escape to close only this popup. This is the default behavior.</p> </div> <div class="tw-popup-footer"> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#close">Close</button> </div> </div> </div> <!-- All dismiss mode --> <div data-controller="popup" data-popup-dismiss-mode-value="all"> <button class="tw-btn tw-btn-outline-primary tw-btn-sm" type="button" data-action="click->popup#show"> Dismiss All </button> <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="tw-popup-panel tw-popup-sm" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="dismiss-all-title"> <div class="tw-popup-header"> <div> <h2 class="tw-popup-header-title" id="dismiss-all-title">Dismiss All</h2> </div> <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="tw-popup-body"> <p>With <code>data-popup-dismiss-mode-value="all"</code>, clicking the overlay or pressing Escape closes all open popups at once.</p> </div> <div class="tw-popup-footer"> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#close">Close</button> </div> </div> </div> </div> </div> <!-- ============================================ Real-World: Email Processor ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Real-World: Email Processor</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>REAL-WORLD:</strong> Email Processor — Complex two-column popup-xl<br> <strong>COMPOSES:</strong> Popup | Form | Tag Input | RTE | Badge | Table | Tooltip | Button </p> <p class="tw:mb-0 tw:text-sm"> Demonstrates how popup accommodates dense, multi-section scrollable content. Composes form controls, tag input, rich text editor, badges, toggles, table, and tooltips inside a single popup-xl panel. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div data-controller="popup"> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#show"> <i class="fa-regular fa-envelope tw:mr-2"></i>Open Email Processor </button> <div class="tw-popup-overlay" data-popup-target="overlay" data-action="click->popup#handleOverlayClick"></div> <div class="tw-popup-panel tw-popup-xl" data-popup-target="panel" role="dialog" aria-modal="true" aria-labelledby="email-processor-title"> <div class="tw-popup-header"> <div> <h2 class="tw-popup-header-title" id="email-processor-title">Email Processor</h2> </div> <button class="tw-popup-close" type="button" aria-label="Close" data-action="click->popup#close"> <i class="fa-solid fa-xmark"></i> </button> </div> <div class="tw-popup-body"> <div class="tw:grid tw:grid-cols-1 tw:lg:grid-cols-2 tw:gap-6"> <!-- ====== LEFT COLUMN: Recipients & Settings ====== --> <div class="tw:space-y-4"> <p class="tw:text-body-xs tw:text-neutral-600 tw:mb-2">To optionally import text from an email template, please choose a template from the list below and click on 'Add Template':</p> <!-- Template --> <div class="tw:mb-3"> <label class="tw-form-label">Template</label> <div class="tw:flex tw:gap-2"> <select class="tw-form-select tw:flex-1"> <option value="">Search and select email template</option> <optgroup label="General"> <option value="archive-email" selected>Archive email test</option> <option value="automated-response">Automated response to event - Open Day</option> <option value="event-guest">Event guest Email</option> <option value="personalised-greeting">Personalised Greeting</option> </optgroup> </select> <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button">Add Template</button> </div> </div> <!-- From --> <div class="tw:mb-3"> <label class="tw-form-label tw-form-label-required">From</label> <input type="email" class="tw-form-control" value="phamha2613@gmail.com"> </div> <!-- Reply to email --> <div class="tw:mb-3"> <label class="tw-form-label">Reply to email</label> <span class="tw-form-text tw:mb-1">Select the reply to emails</span> <div class="tw-tag-input" data-controller="tag-input" data-action="click->tag-input#focus"> <div class="tw-tag-input-tags"> <span class="tw-tag" data-tag-input-target="tag" data-value="phamha2613@gmail.com"> phamha2613@gmail.com <button class="tw-tag-close" type="button" aria-label="Remove phamha2613@gmail.com" data-action="click->tag-input#removeTag"> <i class="fa-solid fa-xmark"></i> </button> </span> <span class="tw-tag" data-tag-input-target="tag" data-value="oanhnt10+staff@gmail.com"> oanhnt10+staff@gmail.com <button class="tw-tag-close" type="button" aria-label="Remove oanhnt10+staff@gmail.com" data-action="click->tag-input#removeTag"> <i class="fa-solid fa-xmark"></i> </button> </span> <input class="tw-tag-input-field" type="text" placeholder="Add email..." data-tag-input-target="input" data-action="keydown->tag-input#keydown" aria-label="Add reply-to email"> </div> <div class="tw-tag-input-chevron"> <i class="fa-solid fa-chevron-down"></i> </div> </div> </div> <!-- To --> <div class="tw:mb-3"> <label class="tw-form-label">To</label> <div class="tw-form-check"> <input type="radio" name="emailProcessorTo" id="ep-toParents" class="tw-form-check-input" checked> <label for="ep-toParents" class="tw-form-check-label">Parent(s)</label> </div> </div> <!-- Priority --> <div class="tw:mb-3"> <label class="tw-form-label">Priority</label> <div class="tw:flex tw:flex-wrap tw:gap-1.5"> <span class="tw-badge tw-badge-circle tw-badge-primary tw:cursor-pointer">1</span> <span class="tw-badge tw-badge-circle tw-badge-primary tw:cursor-pointer">2</span> <span class="tw-badge tw-badge-circle tw:cursor-pointer">3</span> <span class="tw-badge tw-badge-circle tw:cursor-pointer">4</span> <span class="tw-badge tw-badge-circle tw:cursor-pointer">5</span> <span class="tw-badge tw-badge-circle tw:cursor-pointer">6</span> <span class="tw-badge tw-badge-circle tw:cursor-pointer">7</span> <span class="tw-badge tw-badge-circle tw:cursor-pointer">8</span> <span class="tw-badge tw-badge-circle tw:cursor-pointer">9</span> <span class="tw-badge tw-badge-circle tw:cursor-pointer">10</span> </div> </div> <!-- Parental Responsibility toggle --> <div class="tw:mb-3"> <div class="tw-form-switch"> <input class="tw-form-check-input" type="checkbox" id="ep-parentalResp" role="switch" data-controller="tooltip" data-tooltip-content-value="Only email contacts where Parental Responsibility is ticked" data-tooltip-placement-value="top"> <label class="tw-form-check-label" for="ep-parentalResp">Parental Responsibility</label> </div> </div> <!-- Live with student toggle --> <div class="tw:mb-3"> <div class="tw-form-switch"> <input class="tw-form-check-input" type="checkbox" id="ep-liveWithStudent" role="switch" data-controller="tooltip" data-tooltip-content-value="Only email contacts where parent lives with the student" data-tooltip-placement-value="top"> <label class="tw-form-check-label" for="ep-liveWithStudent">Live with the student</label> </div> </div> <!-- Sending count + actions --> <div class="tw:mb-3 tw:flex tw:items-center tw:justify-between tw:text-body-xs"> <span>Sending to <strong>1</strong> users.</span> <div class="tw:flex tw:items-center tw:gap-2"> <button class="tw-btn tw-btn-tertiary tw-btn-sm" type="button">Download list</button> <button class="tw-btn tw-btn-tertiary tw-btn-sm" type="button">Hide all</button> </div> </div> <!-- Recipients table --> <div class="tw:mb-3"> <table class="tw-table tw-table-sm"> <thead> <tr> <th>NAME</th> <th>EMAIL</th> </tr> </thead> <tbody> <tr> <td>Sarah Johnson</td> <td>sarah.johnson@email.com</td> </tr> </tbody> </table> </div> <!-- Warning text --> <div class="tw-inline-notification tw-inline-notification-warning" role="status"> <div class="tw-inline-notification-icon"> <i class="fa-solid fa-triangle-exclamation"></i> </div> <div class="tw-inline-notification-content"> <p class="tw-inline-notification-message">Please note, the 'From' email must be a verified email sender. If you haven't configured your sending domain, emails may not be delivered.</p> </div> </div> <!-- Subject --> <div class="tw:mb-3"> <label class="tw-form-label tw-form-label-required">Subject</label> <input type="text" class="tw-form-control" value="Archive email test - Year 7 Entry 2026"> </div> <!-- Key Email toggle --> <div class="tw:mb-3"> <div class="tw-form-switch"> <input class="tw-form-check-input" type="checkbox" id="ep-keyEmail" role="switch"> <div> <label class="tw-form-check-label" for="ep-keyEmail">Key Email</label> <span class="tw-form-text"><em>If enabled, this email will be used for tracking engagement score calculation.</em></span> </div> </div> </div> <!-- Attachments --> <div class="tw:mb-3"> <label class="tw-form-label">Attachments</label> <div class="tw:space-y-2"> <select class="tw-form-select"> <option value="">Select from uploaded files</option> <option value="uk_tower">uk_tower.jpg</option> <option value="image002">image002.png</option> <option value="beneden1">Beneden1.jpg</option> <option value="year7-flyer">year 7 flyer.pdf</option> </select> <div class="tw:flex tw:items-center tw:gap-2 tw:text-body-xs tw:text-neutral-500"> <span>or upload from your computer</span> <input type="file" class="tw-form-control tw-form-control-sm tw:flex-1"> </div> </div> </div> </div> <!-- ====== RIGHT COLUMN: Content & Mail Merge ====== --> <div class="tw:space-y-4 tw:border-l tw:border-neutral-200 tw:pl-6"> <p class="tw:text-body-xs tw:text-neutral-600 tw:mb-2">By using personalisation tokens, you can mail merge personalised content to your recipients.</p> <!-- Mail Merge Field --> <div class="tw:mb-3"> <label class="tw-form-label">Mail Merge Field</label> <div class="tw:flex tw:gap-2"> <select class="tw-form-select tw:flex-1"> <option value="">Type here to select token</option> <optgroup label="Enquiry Children"> <option value="enquiry_child_first_name">Enquiry Child First Name</option> <option value="enquiry_child_last_name">Enquiry Child Last Name</option> </optgroup> <optgroup label="Contact Tokens"> <option value="contact_first_name">Contact First Name</option> <option value="contact_last_name">Contact Last Name</option> <option value="contact_title">Contact Title</option> </optgroup> </select> <button class="tw-btn tw-btn-primary tw-btn-sm" type="button"> <i class="fa-solid fa-plus tw:mr-1"></i>Insert Field </button> <span data-controller="tooltip" data-tooltip-content-value="Select a merge field and click Insert to add a personalisation token into the email content" data-tooltip-placement-value="top"> <i class="fa-solid fa-circle-info tw:text-neutral-400 tw:cursor-help"></i> </span> </div> </div> <!-- Content (RTE) --> <div class="tw:mb-3"> <label class="tw-form-label tw-form-label-required">Content</label> <div class="tw-rte"> <div class="tw-rte-toolbar" role="toolbar" aria-label="Formatting options"> <div class="tw-rte-toolbar-group" role="group" aria-label="Block format"> <button class="tw-rte-toolbar-select" type="button"> Paragraph <i class="fa-solid fa-chevron-down tw-rte-toolbar-select-chevron"></i> </button> </div> <div class="tw-rte-toolbar-group" role="group" aria-label="Text formatting"> <button class="tw-rte-toolbar-btn" type="button" aria-label="Bold" aria-pressed="false"> <i class="fa-solid fa-bold"></i> </button> <button class="tw-rte-toolbar-btn" type="button" aria-label="Italic" aria-pressed="false"> <i class="fa-solid fa-italic"></i> </button> <button class="tw-rte-toolbar-btn" type="button" aria-label="Underline" aria-pressed="false"> <i class="fa-solid fa-underline"></i> </button> </div> <div class="tw-rte-toolbar-group" role="group" aria-label="Alignment"> <button class="tw-rte-toolbar-btn tw-active" type="button" aria-label="Align left" aria-pressed="true"> <i class="fa-solid fa-align-left"></i> </button> <button class="tw-rte-toolbar-btn" type="button" aria-label="Align center" aria-pressed="false"> <i class="fa-solid fa-align-center"></i> </button> <button class="tw-rte-toolbar-btn" type="button" aria-label="Align right" aria-pressed="false"> <i class="fa-solid fa-align-right"></i> </button> <button class="tw-rte-toolbar-btn" type="button" aria-label="Align justify" aria-pressed="false"> <i class="fa-solid fa-align-justify"></i> </button> </div> <div class="tw-rte-toolbar-group" role="group" aria-label="Insert"> <button class="tw-rte-toolbar-btn" type="button" aria-label="Strikethrough" aria-pressed="false"> <i class="fa-solid fa-strikethrough"></i> </button> <button class="tw-rte-toolbar-btn" type="button" aria-label="Insert link"> <i class="fa-solid fa-link"></i> </button> <button class="tw-rte-toolbar-btn" type="button" aria-label="More options"> <i class="fa-solid fa-ellipsis-vertical"></i> </button> </div> </div> <div class="tw-rte-content" contenteditable="true" role="textbox" aria-multiline="true" aria-label="Email content"> <p>Dear <span class="tw-badge tw-badge-info-subtle">{{CONTACT_FIRST_NAME}}</span>,</p> <p>Thank you for your interest in our Year 7 entry programme. We are pleased to confirm that we have received the enquiry for <span class="tw-badge tw-badge-info-subtle">{{ENQUIRY_CHILD_FIRST_NAME}}</span>.</p> <p>Archive test</p> </div> <div class="tw-rte-footer">Please press Shift + Enter for new line</div> </div> </div> </div> </div> </div> <div class="tw-popup-footer"> <button class="tw-btn tw-btn-secondary" type="button">Manage template &amp; send test</button> <button class="tw-btn tw-btn-primary" type="button" data-action="click->popup#close">Send email</button> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="tw-popup-panel <strong>popup-xl</strong>"&gt;</code><br> <code>&nbsp;&nbsp;&lt;div class="tw-popup-header"&gt;...&lt;/div&gt;</code><br> <code>&nbsp;&nbsp;&lt;div class="tw-popup-body"&gt;</code><br> <code>&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="tw:grid tw:grid-cols-1 tw:lg:grid-cols-2 tw:gap-6"&gt;</code><br> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div&gt;...left column...&lt;/div&gt;</code><br> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class="tw:border-l tw:border-neutral-200 tw:pl-6"&gt;...right column...&lt;/div&gt;</code><br> <code>&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;</code><br> <code>&nbsp;&nbsp;&lt;/div&gt;</code><br> <code>&nbsp;&nbsp;&lt;div class="tw-popup-footer"&gt;...&lt;/div&gt;</code><br> <code>&lt;/div&gt;</code> </div> </div> <!-- ============================================ Keyboard & Accessibility ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Keyboard &amp; Accessibility</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Accessibility:</strong> Popups use <code>role="dialog"</code> with <code>aria-modal="true"</code>. Focus is trapped inside the popup — Tab cycles through focusable elements and wraps at boundaries. Escape closes the popup. Focus returns to the trigger element on close. Use <code>aria-labelledby</code> to link to the title, or <code>aria-label</code> for minimal popups without a visible title. </p> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <table class="tw-table tw-table-sm"> <thead> <tr> <th>Key</th> <th>Action</th> </tr> </thead> <tbody> <tr> <td><code>Escape</code></td> <td>Closes the topmost popup (or all, based on dismiss mode)</td> </tr> <tr> <td><code>Tab</code></td> <td>Cycles forward through focusable elements within the popup</td> </tr> <tr> <td><code>Shift + Tab</code></td> <td>Cycles backward through focusable elements within the popup</td> </tr> </tbody> </table> </div> </div> </div>