OTP input verification code.

<!--
  IconPlaceholder (иконка "refresh-cw" у кнопки Resend) заменена
  инлайновым `<svg>` (lucide-react v0.545.0), тем же приёмом, что и в
  остальных адаптированных блоках.

  Правило 3 (текст — одним узлом): оригинал пишет
  `Having trouble signing in?{" "}<a>...</a>` — явный `{" "}` перед ссылкой
  даёт два смежных текстовых узла на стыке со ссылкой (тот же случай, что
  `block-empty` паттерн 4). Собрано одним текстовым узлом с обычным
  пробелом в конце. `{" "}` перед `<span>` в описании (не ссылка) этой
  проблеме не подвержен — оставлен как обычный текст с пробелом.
-->
<script setup lang="ts">
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Field, FieldLabel } from "@/components/ui/field"
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ui/input-otp"
</script>

<template>
  <div class="flex items-center justify-center">
    <Card class="mx-auto w-full max-w-md">
      <CardHeader>
        <CardTitle>Verify your login</CardTitle>
        <CardDescription>
          Enter the verification code we sent to your email address: <span class="text-foreground font-medium">m@example.com</span>.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <Field>
            <div class="flex items-center justify-between">
              <FieldLabel for="otp-verification">Verification code</FieldLabel>
              <Button variant="outline" size="xs">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  data-icon="inline-start"
                  aria-hidden="true"
                ><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" /><path d="M8 16H3v5" /></svg>
                Resend Code
              </Button>
            </div>
            <InputOTP id="otp-verification">
              <InputOTPGroup class="*:data-[slot=input-otp-slot]:h-9 *:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
                <InputOTPSlot :index="0" />
                <InputOTPSlot :index="1" />
                <InputOTPSlot :index="2" />
              </InputOTPGroup>
              <InputOTPSeparator />
              <InputOTPGroup class="*:data-[slot=input-otp-slot]:h-9 *:data-[slot=input-otp-slot]:w-11 *:data-[slot=input-otp-slot]:text-xl">
                <InputOTPSlot :index="3" />
                <InputOTPSlot :index="4" />
                <InputOTPSlot :index="5" />
              </InputOTPGroup>
            </InputOTP>
          </Field>
        </form>
      </CardContent>
      <CardFooter class="flex-col gap-2">
        <Button type="submit" class="w-full">Verify</Button>
        <div class="text-muted-foreground">
          Having trouble signing in? <a href="#" class="text-primary underline-offset-4 transition-colors hover:underline">Contact support</a>
        </div>
      </CardFooter>
    </Card>
  </div>
</template>