<script lang="ts">
  import { Button } from "$lib/components/ui/button/index.js";
  import * as Card from "$lib/components/ui/card/index.js";
  import { Input } from "$lib/components/ui/input/index.js";
  import { Label } from "$lib/components/ui/label/index.js";

  let { loggedin = $bindable() } = $props();
</script>

<div class="pt-48">
  <form
    onsubmit={() => {
      loggedin = true;
    }}
    class="flex justify-center items-center overflow-hidden"
  >
    <Card.Root class="w-full max-w-sm">
      <Card.Header>
        <Card.Title class="text-2xl">Login</Card.Title>
        <Card.Description>Please enter kiosk credentials.</Card.Description>
      </Card.Header>
      <Card.Content class="grid gap-4">
        <div class="grid gap-2">
          <Label for="password">Token</Label>
          <Input id="password" type="password" required autofocus />
        </div>
      </Card.Content>
      <Card.Footer>
        <Button class="w-full" type="submit">Sign in</Button>
      </Card.Footer>
    </Card.Root>
  </form>
</div>
