<template>
  <t-modal
    v-model="vModel"
    id="_email-sent-modal"
    :clickToClose="clickToClose"
    @before-open="onBeforeOpen"
    @closed="onClosed"
    class="_modal-overlay"
    :style="{
      zIndex: zIndex
    }"
  >

    <!-- Email sent icon -->
    <p class="text-center mb-8">
      <v-icon name="paper-plane" scale="5"/>
    </p>

    <!-- Text content -->
    <i18n path="models.user.emailVerificationLinkSent" tag="p">
      <!-- ref {0} -->
      <code class="bg-black p-1 rounded">{{ $root.auth.user() ? $root.auth.user().email : '' }}</code><!-- eslint-disable-line -->
      <!-- ref {1} -->
      <br><br>
    </i18n>

    <!-- Footer -->
    <template v-slot:footer>
      <div class="flex justify-center">
        <Button @click.native="vModel = false">
          {{ $t('global.ok') | capitalize }}
        </Button>
      </div>
    </template>

  </t-modal>

</template>

<script>
// BaseModal component
import BaseModal from './BaseModal'
/**
 * EmailSentModal component
 */
export default {
  name: 'EmailSentModal',
  extends: BaseModal
}
</script>

<style lang="scss">
#_email-sent-modal {
  //
}
</style>
