---
import FormFooter from '@ui/FormFooter.astro'
import SingleLayout from '@shared/layouts/SingleLayout.astro'
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import CardTitle from '@ui/CardTitle.astro'
import OtpInput from '@ui/OtpInput.astro'
---

<SingleLayout title="2-step verification">
  <form class="card card-md" action="./" method="get" novalidate>
    <div class="card-body">
      <CardTitle as="h1" class="text-center mb-4">Authenticate your account</CardTitle>

      <p class="my-4 text-center">
        Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.
      </p>

      <fieldset class="my-5 border-0 p-0 m-0">
        <legend class="visually-hidden">Verification code</legend>
        <div class="d-flex justify-content-center">
          <OtpInput length={6} groups={[3, 3]} size="lg" ariaLabel="Verification code" />
        </div>
      </fieldset>

      <div class="my-4">
        <label class="form-check">
          <input type="checkbox" class="form-check-input" />
          Don't ask for codes again on this device
        </label>
      </div>

      <FormFooter>
        <ButtonList class="flex-nowrap">
          <Button text="Cancel" block href="2-step-verification.html" />
          <Button type="submit" text="Verify" block color="primary" />
        </ButtonList>
      </FormFooter>
    </div>
  </form>

  <div class="text-center text-secondary mt-3">
    It may take a minute to receive your code. Haven't received it? <a href="./">Resend a new code.</a>
  </div>
</SingleLayout>