---
import Button from '@ui/Button.astro'
import Avatar from '@ui/Avatar.astro'
import CardTitle from '@ui/CardTitle.astro'
import { people } from '@shared/lib/people'
import { requireIndex } from '@shared/lib/array'

const person = requireIndex(people, 0)
---

<form class="card card-md" action="./" method="get" novalidate>
  <div class="card-body text-center">
    <div class="mb-4">
      <CardTitle as="h1">Account locked</CardTitle>
      <p class="text-secondary">Please enter your password to unlock your account</p>
    </div>

    <div class="mb-4">
      <Avatar person={person} size="xl" class="mb-3" />
      <h3>{person.full_name}</h3>
    </div>

    <div class="mb-4">
      <label class="visually-hidden" for="lock-password">Password</label>
      <input type="password" class="form-control" placeholder="Password…" id="lock-password" autocomplete="current-password" required />
    </div>

    <div>
      <Button type="submit" color="primary" block icon="lock-open" text="Unlock" />
    </div>
  </div>
</form>