<script lang="ts" setup>
import { useForm, Link } from '@inertiajs/vue3'
import AuthLayout from '@/Layouts/AuthLayout.vue'

interface Props {
  status?: string
}

defineOptions({ layout: AuthLayout })

defineProps<Props>()

const form = useForm({
  email: '',
})

const submit = (): void => {
  form.post('/forgot-password')
}
</script>

<template>
  <VCardText>
    <h4 class="text-h4 mb-1">
      Forgot Password?
    </h4>
    <p class="mb-0">
      Enter your email and we'll send you a reset link
    </p>
  </VCardText>

  <VCardText>
    <VAlert
      v-if="status"
      type="success"
      variant="tonal"
      class="mb-4"
    >
      {{ status }}
    </VAlert>

    <VForm @submit.prevent="submit">
      <VRow>
        <VCol cols="12">
          <VTextField
            v-model="form.email"
            label="Email"
            type="email"
            required
            autofocus
            placeholder="john@example.com"
            :error-messages="form.errors.email ? [form.errors.email] : []"
          />
        </VCol>

        <VCol cols="12">
          <VBtn
            type="submit"
            block
            :loading="form.processing"
            :disabled="form.processing"
          >
            Send Reset Link
          </VBtn>
        </VCol>

        <VCol cols="12">
          <Link
            href="/login"
            class="d-flex align-center justify-center"
          >
            <VIcon
              icon="tabler-chevron-left"
              size="20"
              class="me-1"
            />
            <span>Back to login</span>
          </Link>
        </VCol>
      </VRow>
    </VForm>
  </VCardText>
</template>
