<template>
  <validation-observer tag="div" ref="validationObserver" v-slot="{ handleSubmit }" id="container-forgotten">
    <p class="top-margin-small text-medium">{{ text_recover_password_subtitle }}</p>
    <form ref="form" @submit.prevent="handleSubmit(onSubmit)" :action="action" method="post" autocomplete="off">
      <base-alert
        v-show="alert.type"
        :apperance="alert.type"
        @close="alert = {}">
        <span v-text="alert.message"></span>
      </base-alert>
      
      <validation-provider
        tag="div"
        class="top-margin-x-large"
        rules="required|email"
        name="email_forgotten"
        v-slot="{ errors, valid }"
      >
        <base-input
          type="text"
          name="email_forgotten"
          :label="entry_email"
          v-model="email_forgotten"
          maxlength="96"
          required
          :error="errors[0]"
          :valid="valid"
          :disabled="disableForm"
        ></base-input>
      </validation-provider>

      <base-button
        type="submit"
        class="top-margin-large"
        full
        :disabled="disableForm"
        :loading="btnSubmitLoading"
      >
        {{ text_send }}
      </base-button>

      <div class="top-margin-large text-center vertical-padding-x-small">
        <a
          href="#"
          id="link-login"
          class="link-default text-medium text-decoration-none padding-small"
          @click.prevent="$emit('page', 'login')"
        >
          {{ text_back_to_login }}
        </a>
      </div>
    </form>
  </validation-observer>
</template>

<style src="../../identity.css"></style>
<style scoped src="./styles.css"></style>

<script src="./scripts.js"></script>
