@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Basic Dialog" Code="@_codeDialogBasic">
    <Dialog @bind-Open="_dialog1Open">
        <DialogTrigger>
            <Button Variant="Button.ButtonVariant.Outline">Open Dialog</Button>
        </DialogTrigger>
        <DialogContent>
            <DialogHeader>
                <DialogTitle>Edit Profile</DialogTitle>
                <DialogDescription>Make changes to your profile here. Click save when done.</DialogDescription>
            </DialogHeader>
            <Stack Gap="3" Class="py-4">
                <Stack Gap="1.5">
                    <Label>Name</Label>
                    <Input placeholder="Your name" />
                </Stack>
                <Stack Gap="1.5">
                    <Label>Username</Label>
                    <Input placeholder="username" />
                </Stack>
            </Stack>
            <DialogFooter>
                <Button OnClick="() => _dialog1Open = false">Save changes</Button>
            </DialogFooter>
        </DialogContent>
    </Dialog>
</PatternCard>
<PatternCard Label="Confirmation Dialog" Code="@_codeDialogConfirm">
    <Dialog @bind-Open="_dialog2Open">
        <DialogTrigger>
            <Button Variant="Button.ButtonVariant.Destructive">Delete Account</Button>
        </DialogTrigger>
        <DialogContent>
            <DialogHeader>
                <DialogTitle>Are you absolutely sure?</DialogTitle>
                <DialogDescription>This action cannot be undone. This will permanently delete your account and remove all data.</DialogDescription>
            </DialogHeader>
            <DialogFooter>
                <Button Variant="Button.ButtonVariant.Outline" OnClick="() => _dialog2Open = false">Cancel</Button>
                <Button Variant="Button.ButtonVariant.Destructive" OnClick="() => _dialog2Open = false">Delete</Button>
            </DialogFooter>
        </DialogContent>
    </Dialog>
</PatternCard>
</Stack>

@code {
    private bool _dialog1Open;

    private bool _dialog2Open;

        private string _codeDialogBasic = @"<Dialog @bind-Open=""_open"">
        <DialogTrigger>
            <Button Variant=""Button.ButtonVariant.Outline"">Open Dialog</Button>
        </DialogTrigger>
        <DialogContent>
            <DialogHeader>
                <DialogTitle>Edit Profile</DialogTitle>
                <DialogDescription>Make changes to your profile here.</DialogDescription>
            </DialogHeader>
            <div class=""space-y-3 py-4"">
                <div class=""space-y-1.5"">
                    <Label>Name</Label>
                    <Input placeholder=""Your name"" />
                </div>
            </div>
            <DialogFooter>
                <Button OnClick=""() => _open = false"">Save changes</Button>
            </DialogFooter>
        </DialogContent>
    </Dialog>";

        private string _codeDialogConfirm = @"<Dialog @bind-Open=""_open"">
        <DialogTrigger>
            <Button Variant=""Button.ButtonVariant.Destructive"">Delete Account</Button>
        </DialogTrigger>
        <DialogContent>
            <DialogHeader>
                <DialogTitle>Are you absolutely sure?</DialogTitle>
                <DialogDescription>This action cannot be undone.</DialogDescription>
            </DialogHeader>
            <DialogFooter>
                <Button Variant=""Button.ButtonVariant.Outline"" OnClick=""() => _open = false"">Cancel</Button>
                <Button Variant=""Button.ButtonVariant.Destructive"" OnClick=""() => _open = false"">Delete</Button>
            </DialogFooter>
        </DialogContent>
    </Dialog>";
}
