Dialog

<div class="flex items-center justify-center p-4">
    <twig:ui:Button
        data-dialog-show="simple-dialog"
    >
        Open Simple Dialog
    </twig:ui:Button>
</div>

<twig:ui:Dialog id="simple-dialog">
    <twig:ui:Dialog:Content>
        <twig:ui:Dialog:Header>
            <twig:ui:Dialog:Title>
                Simple Dialog
            </twig:ui:Dialog:Title>
            <twig:ui:Dialog:Description>
                This is a simple dialog with just text content. Click anywhere outside or press Escape to close.
            </twig:ui:Dialog:Description>
        </twig:ui:Dialog:Header>
        <twig:ui:Dialog:CloseIcon modalId="simple-dialog">
            <twig:ux:icon name="lucide:x" class="size-4" />
        </twig:ui:Dialog:CloseIcon>
    </twig:ui:Dialog:Content>
</twig:ui:Dialog>

<div class="flex items-center justify-center p-4">
    <twig:ui:Button
        data-dialog-show="form-dialog"
    >
        Open form
    </twig:ui:Button>
</div>

<twig:ui:Dialog id="form-dialog">
    <twig:ui:Dialog:Content>
        <twig:ui:Dialog:Header>
            <twig:ui:Dialog:Title>
                Account Settings
            </twig:ui:Dialog:Title>
            <twig:ui:Dialog:Description>
                Make changes to your account here. Click save when you're done.
            </twig:ui:Dialog:Description>
        </twig:ui:Dialog:Header>
        <form method="dialog">
            <div class="grid gap-4 py-4">
                <div class="grid grid-cols-4 items-center gap-4">
                    <label for="username" class="text-right text-sm font-medium">
                        Username
                    </label>
                    <input
                        disabled
                        id="username"
                        value="@johndoe"
                        class="col-span-3 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                    />
                </div>
                <div class="grid grid-cols-4 items-center gap-4">
                    <label for="name" class="text-right text-sm font-medium">
                        First Name
                    </label>
                    <input
                        id="name"
                        value="John"
                        class="col-span-3 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                    />
                </div>
                <div class="grid grid-cols-4 items-center gap-4">
                    <label for="lastname" class="text-right text-sm font-medium">
                        Last Name
                    </label>
                    <input
                        id="lastname"
                        value="Doe"
                        class="col-span-3 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                    />
                </div>
                <div class="grid grid-cols-4 items-center gap-4">
                    <label for="email" class="text-right text-sm font-medium">
                        Email
                    </label>
                    <input
                        id="email"
                        type="email"
                        value="[email protected]"
                        class="col-span-3 flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                    />
                </div>
            </div>

            <twig:ui:Dialog:Footer>
                <button
                    type="button"
                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
                    data-dialog-close="form-dialog"
                    data-action="close"
                >
                    Cancel
                </button>

                <twig:ui:Button
                    onclick="confirm('Are you sure?') && this.closest('hui-dialog').hide()"
                >
                    Close using JS
                </twig:ui:Button>
                <twig:ui:Button type="submit">
                    Close submit button
                </twig:ui:Button>
            </twig:ui:Dialog:Footer>
        </form>
        <twig:ui:Dialog:CloseIcon modalId="form-dialog">
            <twig:ux:icon name="lucide:x" class="size-4"/>
        </twig:ui:Dialog:CloseIcon>
    </twig:ui:Dialog:Content>
</twig:ui:Dialog>

<div class="flex items-center justify-center p-4">
    <twig:ui:Button
        data-dialog-show="custom-backdrop"
    >
        Open Simple Dialog
    </twig:ui:Button>
</div>

<twig:ui:Dialog id="custom-backdrop" class="backdrop:bg-(--primary)/30 data-[leave]:backdrop:bg-(--primary)/0">
    <twig:ui:Dialog:Content>
        <twig:ui:Dialog:Header>
            <twig:ui:Dialog:Title>
                Simple Dialog
            </twig:ui:Dialog:Title>
            <twig:ui:Dialog:Description>
                This is a simple dialog with just text content. Click anywhere outside or press Escape to close.
            </twig:ui:Dialog:Description>
        </twig:ui:Dialog:Header>
        <twig:ui:Dialog:CloseIcon modalId="custom-backdrop">
            <twig:ux:icon name="lucide:x" class="size-4" />
        </twig:ui:Dialog:CloseIcon>
    </twig:ui:Dialog:Content>
</twig:ui:Dialog>