@page "/cards"

<PageTitle>Cards</PageTitle>

<div class="space-y-8 max-w-lg">
    <div>
        <h1 class="text-3xl font-bold tracking-tight">Cards Demo</h1>
        <p class="text-muted-foreground">Card components with multiple layouts.</p>
    </div>

    @* ── Basic card ── *@
    <Card data-testid="card-basic">
        <CardHeader>
            <CardTitle>Card Title</CardTitle>
            <CardDescription>Card Description</CardDescription>
        </CardHeader>
        <CardContent>
            <p>Card Content</p>
        </CardContent>
        <CardFooter>
            <p>Card Footer</p>
        </CardFooter>
    </Card>

    @* ── Card with action in header ── *@
    <Card data-testid="card-login">
        <CardHeader>
            <CardTitle>Login to your account</CardTitle>
            <CardAction>
                <Button Variant="@ButtonVariant.Link" Class="text-sm">Sign Up</Button>
            </CardAction>
            <CardDescription>Enter your email below to login to your account</CardDescription>
        </CardHeader>
        <CardContent>
            <div class="space-y-4">
                <FormField Label="Email" For="email">
                    <TextInput Id="email" Type="email" Placeholder="m@example.com" />
                </FormField>
                <FormField Label="Password" For="password">
                    <TextInput Id="password" Type="password" />
                </FormField>
            </div>
        </CardContent>
        <CardFooter Class="flex-col gap-2">
            <Button Class="w-full">Login</Button>
            <Button Variant="@ButtonVariant.Outline" Class="w-full">Login with Google</Button>
        </CardFooter>
    </Card>

    @* ── Image card ── *@
    <Card data-testid="card-image">
        <CardImage Src="https://placehold.co/600x300/2a2a2a/2a2a2a" Alt="Event cover" WrapperClass="h-48" />
        <CardHeader>
            <CardTitle>Design systems meetup</CardTitle>
            <CardAction>
                <span class="rounded-full border border-border px-3 py-0.5 text-xs font-medium text-muted-foreground">
                    Featured
                </span>
            </CardAction>
            <CardDescription>A practical talk on component APIs, accessibility, and shipping faster.</CardDescription>
        </CardHeader>
        <CardFooter>
            <Button Class="w-full">View Event</Button>
        </CardFooter>
    </Card>
</div>