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

interface Props {
  status?: string
}

defineOptions({ layout: AuthLayout })

defineProps<Props>()

const form = useForm({})

const submit = (): void => {
  form.post('/email/verification-notification')
}
</script>

<template>
  <VCardText>
    <h4 class="text-h4 mb-1">
      Verify your email
    </h4>
    <p class="mb-0">
      We've sent a verification link to your email. Please check your inbox and click the link to verify.
    </p>
  </VCardText>

  <VCardText>
    <VAlert
      v-if="status === 'verification-link-sent'"
      type="success"
      variant="tonal"
      class="mb-4"
    >
      A new verification link has been sent to your email address.
    </VAlert>

    <VForm @submit.prevent="submit">
      <VBtn
        type="submit"
        block
        :loading="form.processing"
        :disabled="form.processing"
      >
        Resend verification email
      </VBtn>
    </VForm>
  </VCardText>
</template>
