<template>
  <modal name="password-modal" width="30%" height="400">
    <div>
      <b-row class="d-flex justify-content-between mb-2 mt-1">
        <b-col class="d-flex modal-text-color ml-2" cols="8">
          <div class="d-flex align-self-center justify-content-center rounded-div mr-2 mt-1">
            <font-awesome-icon icon="key" class="align-self-center" />
          </div>
          <div class="pt-1">
            <div class="inline-block akkurat-regular min-header-text">
              Mude a sua senha
            </div>
            <div class="akkurat-bold max-header-text">Alterar Senha</div>
          </div>
        </b-col>
        <b-col class="d-flex justify-content-end mr-2 mt-1">
          <span class="close-icon" @click="closeModal">
            <font-awesome-icon icon="times" class="align-self-center" />
          </span>
        </b-col>
      </b-row>
      <b-form>
        <b-form-row class="px-5 mx-3" style="">
          <div class="text-left label">
            <label for="current-password">Senha Atual:</label>
          </div>
          <b-form-input
            id="current-password"
            class="radius-theme"
            type="password"
            v-model.trim="currentPassword"
          ></b-form-input>
          <div class="d-flex flex-fill flex-column align-items-center justify-content-center">
            <div class="akkurat-bold upper-middle-text">
              Crie uma nova senha com a seguinte regra:
            </div>
            <div class="akkurat-regular upper-middle-text">
              Conter no mínimo 8 e no máximo 20 dígitos:
            </div>
            <div class="akkurat-regular upper-middle-text">
              No mínimo 2 números:
            </div>
            <div class="akkurat-regular upper-middle-text">
              Os números não podem ser sequenciais (ex: 123):
            </div>
          </div>
        </b-form-row>
        <b-form-row class="px-5 mx-3" style="">
          <div class="text-left label">
            <label for="new-password">Nova Senha:</label>
          </div>
          <b-form-input
            id="new-password"
            class="radius-theme"
            type="password"
            v-model.trim="newPassword"
          ></b-form-input>
        </b-form-row>
        <b-form-row class="px-5 mx-3" style="">
          <div class="text-left label">
            <label for="confirm-password">Confirmar Nova Senha:</label>
          </div>
          <b-form-input
            id="confirm-password"
            class="radius-theme"
            type="password"
            v-model.trim="confirmPassword"
          ></b-form-input>
        </b-form-row>
        <div class="
          d-flex
          flex-fill
          align-items-center
          justify-content-center
          px-5
          min-middle-text">
            Após salvar as informações será enviado um e-mail com a confirmação da sua
            nova senha para o seguinte endereço: mar**@email.com
          </div>
      </b-form>


      <b-row class="mt-3">
        <b-col class="d-flex justify-content-center">
          <b-button
            class="mr-2 btn shadow-none border-0 btn-default"
            @click="sendData"
          >
            Salvar
          </b-button>
          <b-button
            class="btn shadow-none border-0 btn-default btn-red"
            @click="closeModal"
          >
            Cancelar
          </b-button>
        </b-col>
      </b-row>
    </div>
  </modal>
</template>

<script>
export default {
  name: 'password-modal',
  data: () => ({
    currentPassword: '',
    newPassword: '',
    confirmPassword: '',
  }),
  methods: {
    closeModal() {
      this.$modal.hide('password-modal');
    },
    sendData() {
      console.log('uploading picture');
    },
  },
};
</script>

<style scoped lang="scss">
@import '../../assets/css/main.scss';
@import '../../assets/css/cards.scss';

.default-modal {
  border-radius: 10px;
  background: white;
}

.modal-text-color {
  color: #3E3E3E;
}

.min-header-text {
  letter-spacing: 0.2px;
  font-size: 9px;
}

.max-header-text {
  letter-spacing: 0.4px;
  font-size: 16px;
}

.upper-middle-text {
  font-size: 11px;
  letter-spacing: 0.28px;
  color: #3E3E3E;
}

.min-middle-text {
  font-size: 9px;
  letter-spacing: 0.23px;
  color: #7A7A7A;
}

.close-icon {
  color: #979797;
  font-size: 20px;
}

.btn-default {
  border-radius: 20px;
  width: 148px;
  height: 35px;
  background: #278937;
}

.btn-red {
  background: #CB2D2D;
}

</style>
