<template>
  <validation-observer ref="form"   v-slot="{invalid}">
    <b-form @submit.prevent="submit" v-on:keyup.enter="submit">
      <slot name="fields">
        <h1>Form fields</h1>
      </slot> 
      <div class="form-inline">
        <button class="btn btn-primary w-100" type="submit" :disabled="invalid||loading">
          <i v-if="loading" class="far fa-spinner-third fa-spin"></i> Sign In
        </button>
      </div>
    </b-form>
  </validation-observer>
</template>
<script>
module.exports = {
  props: ["loading"],

  data: () => ({
    firstName: "",
    lastName: "",
    email: "",
  }),
  methods: {
    submit() { 
      this.$refs.form.validate().then((success) => {
        if (!success) {
          return;
        }
        console.log(this.$refs.form.invalid)
        this.$emit("submit");
      });
    },
  },
};
</script>