Advanced clean login form card

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "eye"/"eye-off"/"github") — см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { ref } from "vue"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Field, FieldGroup, FieldLabel, FieldSeparator } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "@/components/ui/input-group"

const isVisible = ref(false)
</script>

<template>
  <Card class="mx-auto w-full max-w-xs">
    <CardHeader>
      <CardTitle>Sign in</CardTitle>
      <CardDescription>
        Enter your email and password to access your account
      </CardDescription>
    </CardHeader>
    <CardContent>
      <form class="grid gap-6" @submit.prevent>
        <FieldGroup>
          <Field>
            <FieldLabel for="email-12">Email address</FieldLabel>
            <Input
              id="email-12"
              type="email"
              placeholder="name@example.com"
              required
            />
          </Field>
          <Field>
            <div class="flex items-center justify-between">
              <FieldLabel for="password-12">Password</FieldLabel>
              <a
                href="#"
                class="text-muted-foreground text-xs underline-offset-4 hover:underline"
              >
                Forgot password?
              </a>
            </div>
            <InputGroup>
              <InputGroupInput
                id="password-12"
                placeholder="Password"
                :type="isVisible ? 'text' : 'password'"
                required
              />
              <InputGroupAddon align="inline-end">
                <InputGroupButton
                  size="icon-sm"
                  :aria-label="isVisible ? 'Hide password' : 'Show password'"
                  @click="isVisible = !isVisible"
                >
                  <svg
                    v-if="isVisible"
                    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"
                    aria-hidden="true"
                    class="lucide lucide-eye-off"
                  ><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" /><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242" /><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" /><path d="m2 2 20 20" /></svg>
                  <svg
                    v-else
                    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"
                    aria-hidden="true"
                    class="lucide lucide-eye"
                  ><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" /><circle cx="12" cy="12" r="3" /></svg>
                </InputGroupButton>
              </InputGroupAddon>
            </InputGroup>
          </Field>
        </FieldGroup>
        <div class="flex flex-col gap-6">
          <Button type="submit" class="w-full">
            Sign in
          </Button>
          <FieldSeparator class="text-xs">
            Or continue with
          </FieldSeparator>
          <Button variant="outline" class="w-full">
            <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"
              aria-hidden="true"
              class="lucide lucide-github"
            ><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" /><path d="M9 18c-4.51 2-5-2-7-2" /></svg>
            Github
          </Button>
        </div>
      </form>
    </CardContent>
    <CardFooter>
      <p class="text-muted-foreground w-full text-center text-xs">
        By clicking continue, you agree to our
        <a
          href="#"
          class="hover:text-primary underline underline-offset-4"
        >
          Terms of Service
        </a>
      </p>
    </CardFooter>
  </Card>
</template>