<script setup lang="ts">
import {
    Card,
    CardHeader,
    CardTitle,
    CardDescription,
    CardContent,
    CardFooter,
} from '@/components/ui/card';

definePageMeta({
    layout: 'auth',
});

// TODO: Get this from the backend
const OPEN_ID = false;
</script>

<template>
    <Card class="w-full max-w-sm">
        <CardHeader>
            <CardTitle class="text-2xl">Login</CardTitle>
            <CardDescription>
                Enter your email and password to your account.
            </CardDescription>
        </CardHeader>
        <CardContent class="grid gap-4">
            <div class="grid gap-2">
                <Label for="email">Email</Label>
                <Input
                    id="email"
                    type="email"
                    placeholder="your@email.com"
                    required
                />
            </div>
            <div class="grid gap-2">
                <Label for="password">Password</Label>
                <Input id="password" type="password" required />
            </div>
        </CardContent>
        <CardFooter class="flex-col gap-2">
            <Button class="w-full">Sign in</Button>
            <Button class="w-full" variant="outline" :disabled="!OPEN_ID"
                >OpenID Connect</Button
            >
            <NuxtLink to="/register" class="w-full">
                <Button class="w-full" variant="ghost">Register instead</Button>
            </NuxtLink>
        </CardFooter>
    </Card>
</template>
