<template>
  <b-modal
    :id="id"
    centered
    :size="size"
    :body-class="bodyClass"
    :hide-footer="isFooterHide"
    :header-class="headerClass"
    :no-close-on-esc="noCloseOnEsc"
    @hide="$emit('modal-close')"
    :no-close-on-backdrop="noCloseOnBackdrop"
  >
    <template v-slot:modal-header v-if="isHeaderShow">
      <slot name="header"></slot>
    </template>
    <template v-slot:modal-title>
      <slot name="title"></slot>
    </template>
    <template v-slot:default>
      <slot name="body"></slot>
    </template>
    <template v-slot:modal-footer="{ close }">
      <slot name="footer" :closeModal="close"></slot>
    </template>
  </b-modal>
</template>

<script>
export default {
  name: 'ModalTemplate',
  props: {
    size: { type: String, default: 'lg' },
    id: { type: String, default: 'modal' },
    isHeaderShow: { type: Boolean, default: false },
    isFooterHide: { type: Boolean, default: false },
    noCloseOnEsc: { type: Boolean, default: false },
    noCloseOnBackdrop: { type: Boolean, default: true },
    headerClass: { type: [Array, String], default: () => [] },
    bodyClass: { type: [Array, String], default: () => [] },
  },
}
</script>
