<script setup lang="ts">
import AuthForm from '@/components/AuthForm.vue'
import AuthLayout from '@/components/AuthLayout.vue'
import AuthTextField from '@/components/AuthTextField.vue'
</script>

<template>
  <AuthLayout
    eyebrow="Build your momentum"
    title="Start your journey"
    description="Create your space to turn ambitious goals into steady progress."
  >
    <AuthForm submit-label="Create account">
      <AuthTextField
        id="signup-name"
        label="Full name"
        type="text"
        autocomplete="name"
        placeholder="Your full name"
      />
      <AuthTextField
        id="signup-email"
        label="Email address"
        type="email"
        autocomplete="email"
        placeholder="you@example.com"
      />
      <AuthTextField
        id="signup-password"
        label="Password"
        type="password"
        autocomplete="new-password"
        placeholder="Create a password"
      />
      <AuthTextField
        id="signup-password-confirmation"
        label="Confirm password"
        type="password"
        autocomplete="new-password"
        placeholder="Repeat your password"
      />
    </AuthForm>

    <template #footer>
      Already have an account?
      <RouterLink to="/login">Log in</RouterLink>
    </template>
  </AuthLayout>
</template>
