Modal Dialog

<RzButton onclick="window.dispatchEvent(new CustomEvent('show-basic-modal'))">
    Open Basic Modal
</RzButton>

<RzModal @ref="basicModalRef" EventTriggerName="show-basic-modal" Title="Basic Modal Example" Size="ModalSize.Large">
    <ChildContent>
        <p>This is the content of the basic modal.</p>
        <p>You can close it using the 'X' button, pressing Escape, or clicking the backdrop.</p>
    </ChildContent>
    <FooterContent>
        <div class="flex justify-end gap-2">
             <RzButton Variant="ButtonVariant.Alternate" x-on:click="closeModal">Close (Alpine)</RzButton>
             <RzButton Variant="ButtonVariant.Primary">Okay</RzButton>
        </div>
    </FooterContent>
</RzModal>

@code {
    RzModal basicModalRef = default!;
}

<!-- Button to open small modal -->
<RzButton onclick="window.dispatchEvent(new CustomEvent('show-small-modal'))">
    Open Small (No Header)
</RzButton>

<!-- Small Modal without Header -->
<RzModal EventTriggerName="show-small-modal" Size="ModalSize.Small" ShowHeader="false">
    <ChildContent>
        <p>This modal has no header or default close button.</p>
        <div class="mt-4 text-right">
             <RzButton Variant="ButtonVariant.Alternate" x-on:click="closeModal">Close Me</RzButton>
        </div>
    </ChildContent>
</RzModal>

<!-- Button to open modal with custom title -->
<RzButton onclick="window.dispatchEvent(new CustomEvent('show-custom-title-modal'))">
    Open Custom Title
</RzButton>

<!-- Modal with Custom TitleContent -->
<RzModal EventTriggerName="show-custom-title-modal" Size="ModalSize.Medium">
    <TitleContent>
        <div class="flex items-center gap-2 font-semibold text-primary">
            <Blazicons.MdiIcon Svg="Blazicons.MdiIcon.Information" class="size-5"/>
            <span>Important Information</span>
        </div>
    </TitleContent>
    <ChildContent>
        <p>This modal uses custom `TitleContent` for the header.</p>
    </ChildContent>
</RzModal>

<RzButton hx-get="/demo/htmx-modal-sample"
          hx-target="#
" 
          hx-swap="innerHTML"
          onclick="window.dispatchEvent(new CustomEvent('show-htmx-load-modal'))">
    Open & Load Content via HTMX
</RzButton>

<RzModal @ref="htmxLoadModalRef" EventTriggerName="show-htmx-load-modal" Title="HTMX Loaded Content">
    <ChildContent>
        <div class="text-center p-4">
            <RzSpinner Size="Size.Large"/>
            <p class="mt-2">Loading content...</p>
        </div>
    </ChildContent>
</RzModal>

@code {
    RzModal htmxLoadModalRef = default!;
}

@page "/demo/htmx-modal-sample"
@layout RizzyUI.Docs.Components.Layout.EmptyLayout
@using RizzyUI

<p>This content was loaded dynamically via an HTMX request!</p>
<RzAlert Variant="AlertVariant.Success">
    <AlertTitle>Success</AlertTitle>
    <AlertDescription>Content loaded successfully.</AlertDescription>
</RzAlert>

<RzButton onclick="window.dispatchEvent(new CustomEvent('show-htmx-close-modal'))">
    Open HTMX Close Example
</RzButton>

<RzModal EventTriggerName="show-htmx-close-modal" Title="Close via HTMX Header" CloseEventName="rz:modal-close">
    <ChildContent>
        <form hx-post="/api/modal/htmx-close-action"
              hx-target="this"
              hx-swap="outerHTML">
            <p>Submit this form. The server response will include an HX-Trigger header to close this modal.</p>
            <div class="text-right mt-4">
                <RzButton type="submit" Variant="ButtonVariant.Success">Submit & Close</RzButton>
            </div>
        </form>
    </ChildContent>
</RzModal>

[HttpPost("/api/modal/htmx-close-action")]
public IResult CloseModalAction()
{
    // Process form data if needed...

    // Add the HX-Trigger header to close the modal
    // Uses the event name 'rz:modal-close' (matches RzModal default or explicit parameter)
    HttpContext.Response.Htmx(h => h.Trigger(RizzyUI.Constants.Events.ModalClose));

    // Can return swapped content for the form, or just Ok/NoContent if only closing
    return Ok("<p>Form Submitted! Modal closed by server.</p>"); 
}

// To open a modal listening for 'show-my-modal'
window.dispatchEvent(new CustomEvent('show-my-modal', { detail: { /* optional data */ } }));

// To close a modal listening for the default '
'
window.dispatchEvent(new CustomEvent('
'));

// To close a specific modal listening for 'close-my-modal-xyz'
window.dispatchEvent(new CustomEvent('close-my-modal-xyz', { detail: { /* optional data */ } }));

// In an event handler or another Alpine component
// Get the modal's Alpine data context
const modalElement = document.getElementById('my-modal-id');
const modalData = Alpine.$data(modalElement);

// Open or close programmatically
modalData.openModal();
modalData.closeModal();

// Check if modal is open
const isOpen = modalData.modalOpen;