@namespace Lumeo.Docs.Shared.Patterns

<Stack Gap="3">
<PatternCard Label="Basic Drawer" Code="@_codeDrawerBasic">
    <Drawer @bind-Open="_drawer1Open">
        <DrawerTrigger>
            <Button Variant="Button.ButtonVariant.Outline">Open Drawer</Button>
        </DrawerTrigger>
        <DrawerContent>
            <DrawerHeader>
                <DrawerTitle>Move Goal</DrawerTitle>
                <DrawerDescription>Set your daily activity goal.</DrawerDescription>
            </DrawerHeader>
            <Stack Class="px-4 pb-4">
                <Flex Gap="4" Justify="center" Align="center" Class="py-4">
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Icon" Class="h-8 w-8 shrink-0 rounded-full">
                        <DynamicIcon Name="Minus" Class="h-4 w-4" />
                    </Button>
                    <Stack Gap="1" Align="center">
                        <Lumeo.Text Size="5xl" Weight="bold" Color="foreground" Class="tracking-tighter">350</Lumeo.Text>
                        <Lumeo.Text Size="xs" Color="muted" Class="uppercase">Calories/day</Lumeo.Text>
                    </Stack>
                    <Button Variant="Button.ButtonVariant.Outline" Size="Button.ButtonSize.Icon" Class="h-8 w-8 shrink-0 rounded-full">
                        <DynamicIcon Name="Plus" Class="h-4 w-4" />
                    </Button>
                </Flex>
            </Stack>
            <DrawerFooter>
                <Button OnClick="() => _drawer1Open = false">Submit</Button>
                <Button Variant="Button.ButtonVariant.Outline" OnClick="() => _drawer1Open = false">Cancel</Button>
            </DrawerFooter>
        </DrawerContent>
    </Drawer>
</PatternCard>
<PatternCard Label="Drawer With Form" Code="@_codeDrawerForm">
    <Drawer @bind-Open="_drawer2Open">
        <DrawerTrigger>
            <Button Variant="Button.ButtonVariant.Outline">Edit Profile</Button>
        </DrawerTrigger>
        <DrawerContent>
            <DrawerHeader>
                <DrawerTitle>Edit Profile</DrawerTitle>
                <DrawerDescription>Update your personal information.</DrawerDescription>
            </DrawerHeader>
            <Stack Gap="3" Class="px-4">
                <Stack Gap="1.5">
                    <Label>Name</Label>
                    <Input placeholder="Your name" />
                </Stack>
                <Stack Gap="1.5">
                    <Label>Email</Label>
                    <Input placeholder="you@example.com" />
                </Stack>
            </Stack>
            <DrawerFooter>
                <Button OnClick="() => _drawer2Open = false">Save</Button>
                <Button Variant="Button.ButtonVariant.Outline" OnClick="() => _drawer2Open = false">Cancel</Button>
            </DrawerFooter>
        </DrawerContent>
    </Drawer>
</PatternCard>
<PatternCard Label="Nested Content" Code="@_codeDrawerNested">
    <Drawer @bind-Open="_drawer3Open">
        <DrawerTrigger>
            <Button Variant="Button.ButtonVariant.Outline">Settings</Button>
        </DrawerTrigger>
        <DrawerContent>
            <DrawerHeader>
                <DrawerTitle>Settings</DrawerTitle>
                <DrawerDescription>Manage your preferences.</DrawerDescription>
            </DrawerHeader>
            <Stack Gap="1" Class="px-4 pb-2">
                <Button Class="flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm hover:bg-accent transition-colors">
                    <DynamicIcon Name="User" Class="h-4 w-4 text-muted-foreground" />
                    <Lumeo.Text As="span" Color="foreground">Account</Lumeo.Text>
                </Button>
                <Button Class="flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm hover:bg-accent transition-colors">
                    <DynamicIcon Name="Bell" Class="h-4 w-4 text-muted-foreground" />
                    <Lumeo.Text As="span" Color="foreground">Notifications</Lumeo.Text>
                </Button>
                <Button Class="flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm hover:bg-accent transition-colors">
                    <DynamicIcon Name="Shield" Class="h-4 w-4 text-muted-foreground" />
                    <Lumeo.Text As="span" Color="foreground">Privacy</Lumeo.Text>
                </Button>
            </Stack>
            <DrawerFooter>
                <Button Variant="Button.ButtonVariant.Outline" OnClick="() => _drawer3Open = false">Close</Button>
            </DrawerFooter>
        </DrawerContent>
    </Drawer>
</PatternCard>
</Stack>

@code {
    private bool _drawer1Open;

    private bool _drawer2Open;

    private bool _drawer3Open;

        private string _codeDrawerBasic = @"<Drawer @bind-Open=""_open"">
        <DrawerTrigger>
            <Button Variant=""Button.ButtonVariant.Outline"">Open Drawer</Button>
        </DrawerTrigger>
        <DrawerContent>
            <DrawerHeader>
                <DrawerTitle>Move Goal</DrawerTitle>
                <DrawerDescription>Set your daily activity goal.</DrawerDescription>
            </DrawerHeader>
            <div class=""px-4 pb-4 text-center"">
                <div class=""text-5xl font-bold"">350</div>
                <div class=""text-xs text-muted-foreground"">Calories/day</div>
            </div>
            <DrawerFooter>
                <Button>Submit</Button>
                <Button Variant=""Button.ButtonVariant.Outline"">Cancel</Button>
            </DrawerFooter>
        </DrawerContent>
    </Drawer>";

        private string _codeDrawerForm = @"<Drawer @bind-Open=""_open"">
        <DrawerTrigger>
            <Button Variant=""Button.ButtonVariant.Outline"">Edit Profile</Button>
        </DrawerTrigger>
        <DrawerContent>
            <DrawerHeader>
                <DrawerTitle>Edit Profile</DrawerTitle>
            </DrawerHeader>
            <div class=""px-4 space-y-3"">
                <Label>Name</Label>
                <Input placeholder=""Your name"" />
                <Label>Email</Label>
                <Input placeholder=""you@example.com"" />
            </div>
            <DrawerFooter>
                <Button>Save</Button>
                <Button Variant=""Button.ButtonVariant.Outline"">Cancel</Button>
            </DrawerFooter>
        </DrawerContent>
    </Drawer>";

        private string _codeDrawerNested = @"<Drawer @bind-Open=""_open"">
        <DrawerTrigger>
            <Button Variant=""Button.ButtonVariant.Outline"">Settings</Button>
        </DrawerTrigger>
        <DrawerContent>
            <DrawerHeader>
                <DrawerTitle>Settings</DrawerTitle>
            </DrawerHeader>
            <div class=""px-4 space-y-1"">
                <button class=""flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm hover:bg-accent"">Account</button>
                <button class=""flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm hover:bg-accent"">Notifications</button>
                <button class=""flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm hover:bg-accent"">Privacy</button>
            </div>
            <DrawerFooter>
                <Button Variant=""Button.ButtonVariant.Outline"">Close</Button>
            </DrawerFooter>
        </DrawerContent>
    </Drawer>";
}
