<template>
  <div ref="modal" class="modal fade show in background-darken" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <slot name="header"></slot>
        </div>
        <div class="modal-body">
          <slot name="body"></slot>
        </div>
        <div v-if="showFooter" class="modal-footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
 export default {
     props: {
         show: {
             type: Boolean,
             required: true,
             twoWay: true
         },
         showFooter: {
             type: Boolean,
             default: false
         }
     }
 }
</script>

<style scoped>
 .background-darken {
     background: rgba(0, 0, 0, 0.5);
     overflow-y: auto;
 }
</style>
