<template>
  <!-- Main container -->
  <div class="xl:w-1/4 lg:w-1/3 md:w-2/5 sm:w-1/2 w-full mx-auto py-16 px-4">

    <!-- Title -->
    <h1 class="text-center">{{ $t('views.ForgotPassword.title') | capitalize }}</h1>

    <!-- Form container -->
    <div>
      <!-- ForgotPasswordForm -->
      <ForgotPasswordForm
        v-if="!emailSent"
        @email-sent="emailSent = true"
      />
      <div v-else>
        <div class="text-center mb-4">
          <v-icon name="paper-plane" scale="5" class="text-action"/>
        </div>
        <p>{{ $t('user.resetPasswordEmailSent') }}</p>
      </div>
    </div>

  </div>
</template>

<script>
// Components
import ForgotPasswordForm from './ForgotPasswordForm.vue'
/**
 * ForgotPassword component
 */
export default {
  name: 'ForgotPassword',
  components: {
    ForgotPasswordForm
  },
  data () {
    return {
      emailSent: false
    }
  }
}
</script>
