<template>
  <validation-observer tag="div" ref="validationObserver" v-slot="{ handleSubmit }">
    <div v-if="resend_validation_email" class="top-margin-x-large">
      <p>{{ email_not_validated }}</p>
    </div>
    <form
      ref="form"
      @submit.prevent="handleSubmitForm(handleSubmit)"
      :action="action"
      method="post"
      autocomplete="off"
    >
      <base-alert v-show="alert.type" :apperance="alert.type" @close="alert = {}">
        <span v-html="alert.message"></span>
      </base-alert>

      <validation-provider
        tag="div"
        class="top-margin-x-large"
        rules="required|email"
        name="email_login"
        v-slot="{ errors, valid }"
      >
        <base-input
          type="text"
          name="email_login"
          label="E-mail"
          v-model="email_login"
          maxlength="96"
          required
          :error="errors[0]"
          :valid="valid"
          :disabled="disableForm"
        ></base-input>
      </validation-provider>

      <validation-provider
        tag="div"
        class="top-margin-large"
        rules="required"
        name="password"
        v-slot="{ errors, valid }"
      >
        <base-input v-if="!resend_validation_email"
          :type="showPassword ? 'text' : 'password'"
          label="Senha"
          name="password"
          :secret="true"
          v-model="password"
          maxlength="96"
          required
          :error="errors[0]"
          :valid="valid"
          :disabled="disableForm"
        ></base-input>
      </validation-provider>

      <div v-show="google_captcha" class="top-margin-large">
        <div ref="grecaptcha" class="g-recaptcha"></div>
      </div>

      <div v-if="default_captcha" class="top-margin-large">
        <validation-provider
          tag="div"
          rules="required"
          name="captcha"
          v-slot="{ errors, valid }"
        >
          <base-input
            type="text"
            name="captcha"
            :label="text_captcha"
            v-model="captcha"
            :placeholder="text_captcha_code_placeholder"
            required
            :error="errors[0]"
            :valid="valid"
            :disabled="disableForm"
          ></base-input>
        </validation-provider>

        <img
          src="index.php?route=account/login_new/captcha"
          alt=""
          class="visible-block top-margin-small"
        />
      </div>

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

      <base-button v-if="!resend_validation_email"
        type="submit"
        class="top-margin-large"
        full
        :disabled="disableForm"
        :loading="btnSubmitLoading"
      >
        {{ text_enter }}
      </base-button>

      <div class="top-margin-large text-center vertical-padding-x-small">
        <a
          href="#"
          class="link-default text-medium text-decoration-none padding-small"
          @click.prevent="$emit('page', 'forgotten')"
        >
          {{ text_forgotten }}
        </a>
      </div>
    </form>
    <div v-if="facebook_enable || google_enable" class="row small-space-xs">
      <div class="col-xs-6">
        <base-button
          v-if="facebook_enable"
          type="button"
          class="btn-full btn-facebook horizontal-padding-small"
          style="
            background-color: #1877f2 !important;
            height: 40px;
            border: 1px solid #dadce0;
          "
          :disabled="disableForm"
          @click.native="facebookLogin"
        >
          <i
            class="fa-brands fa-facebook fa-xl right-margin-small"
            aria-hidden="true"
          ></i>

          <b class="vertical-middle btn-facebook-text right-padding-x-small"
            >Entrar com o Facebook</b
          >
        </base-button>
      </div>

      <div id="buttondiv" class="col-xs-6"></div>
    </div>
  </validation-observer>
</template>

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

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