<template>
  <form ref="form" autocomplete="off" @submit.prevent="save">
    <div>
      <slot/>
      <div v-if="showButons" class="form-actions mt-2">
        <hr>
        <button v-if="!readonly" type="button" class="btn btn-primary" @click="save">
          <i v-if="loading" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" />
          {{t("ui.save")}}
        </button>
        <button type="button" class="btn btn-light" @click="$router.go(-1)">
          {{t("ui.cancel")}}
        </button>
      </div>
    </div>
  </form>
</template>

<script>
import { useI18n } from 'vue-i18n'
import { provide } from 'vue'
export default {
  setup(props) {
    const { t } = useI18n()
    provide('definition', props.definition)
    provide('labelSize', props.labelSize)
    provide('readonlyForm', props.readonly)

    return { t }
  },
  props: {
    definition: {
      type: Object,
      required: true
    },
    labelSize: {
      type: Number,
      default: 4
    },
    save: {
      type: Function,
      required: true
    },
    showButons: {
      type: Boolean,
      default: true
    },
    readonly:{
      type: Boolean,
      default: false
    },
    loading:{
      type: Boolean,
      required: true
    }
  }
}
</script>
