<template>
  <div>
    <div class="modal" role="dialog">
      <div class="modal-dialog modal-dialog-centered" :class="modalClass" role="document">
        <div class="modal-content" :class="{'bg-danger': error}">
          <div class="modal-header text-light" :class="{'bg-danger': danger, 'bg-primary': !error&&!danger}">
            <h5 class="modal-title">
              <slot name="header"/>
            </h5>
            <a ref="modal_close" type="button" class="text-light" aria-label="Close" @click="$emit('close')"><i class="fa fa-times"/></a>
          </div>
          <div class="modal-body">
            <slot name="body"/>
          </div>
          <div v-if="hasFooter" class="modal-footer">
            <slot name="footer">
              <button type="button" class="btn btn-primary modal-default-button" @click="$emit('close')">
                {{t('ui.ok')}}
              </button>
            </slot>
          </div>
        </div>
      </div>
    </div>
    <div class="modal-backdrop fade show" />
  </div>
</template>

<script>
import { useI18n } from 'vue-i18n'
export default {
  setup: () => {
    const {t} = useI18n()

    return {t}
  },
  props: {
    modalClass: {
      type: String,
      required: false,
      default: null
    },
    error:{
      type: Boolean,
      required: false,
      default: false
    },
    danger:{
      type: Boolean,
      required: false,
      default: false
    },
    hasFooter:{
      type: Boolean,
      required: false,
      default: true
    }
  },
  emits : ['close']
}
</script>
