<commit_before><template>
  <b-card :header="header" header-tag="h2" class="basic-form">
    <b-form :id="id" @submit="$emit('submit', $event)">
      <slot />
    </b-form>

    <template v-if="!noFooter" v-slot:footer>
      <slot name="buttons">
        <b-button type="submit" :form="id" variant="success">
          {{ submit ? submit : $t('save') }}
        </b-button>
      </slot>
    </template>
  </b-card>
</template>

<script>
export default {
  name: 'BasicForm',

  props: {
    header: { type: String, required: true },
    id: { type: String, default: 'ynh-form' },
    submit: { type: String, default: null },
    noFooter: { type: Boolean, default: false }
  }
}
</script>

<style lang="scss">
.basic-form .card-footer {
  display: flex;
  justify-content: flex-end;

  & > *:not(:first-child) {
    margin-left: .5rem;
  }
}<commit_msg>update BasicForm to receive validations object and some base behavior<commit_after><template>
  <b-card class="basic-form">
    <template v-slot:header>
      <h2><icon v-if="icon" :iname="icon" /> {{ title }}</h2>
    </template>

    <slot name="disclaimer"></slot>

    <b-form :id="id" @submit.prevent="onSubmit" novalidate>
      <slot name="default" />

      <slot name="server-error">
        <b-alert variant="danger" :show="serverError !== ''" v-html="serverError" />
      </slot>
    </b-form>

    <template v-if="!noFooter" v-slot:footer>
      <slot name="buttons">
        <b-button
          type="submit" variant="success"
          :form="id" :disabled="disabled"
        >
          {{ submitText ? submitText : $t('save') }}
        </b-button>
      </slot>
    </template>
  </b-card>
</template>

<script>

export default {
  name: 'BasicForm',

  props: {
    id: { type: String, default: 'ynh-form' },
    title: { type: String, required: true },
    icon: { type: String, default: null },
    submitText: { type: String, default: null },
    noFooter: { type: Boolean, default: false },
    validation: { type: Object, default: null },
    serverError: { type: String, default: '' }
  },

  computed: {
    disabled () {
      return this.validation ? this.validation.$invalid : false
    }
  },

  methods: {
    onSubmit (e) {
      const v = this.validation
      if (v) {
        v.$touch()
        if (v.$pending || v.$invalid) return
      }
      this.$emit('submit', e)
    }
  }
}
</script>

<style lang="scss">
.basic-form .card-footer {
  display: flex;
  justify-content: flex-end;

  & > *:not(:first-child) {
    margin-left: .5rem;
  }
}
{'fraction_non_alphanumeric': 0.1881656804733728, 'fraction_numerical': 0.0019723865877712033, 'mean_word_length': 2.6176890156918686, 'pattern_counts': {'":': 0, '<': 45, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '341308', 'n_tokens_mistral': 880, 'n_tokens_neox': 866, 'n_words': 193}