<template>
   <transition name="modal">
      <div class="modal-mask">
         <!-- :: styles bootstrap :: -->
         <div class="modal-dialog" :class="modalDialogClass">
            <div class="modal-content">
               <div class="modal-header">
                  <slot name="header"></slot>
                  <button class="close btn" @click="$emit('close')">
                     <i class="fa fa-times" aria-hidden="true"></i></button>
               </div>
               <div class="body-head">
                  <slot name="body-head"></slot>
               </div>
               <div class="modal-body">
                  <slot name="body"></slot>
               </div>
               <div class="modal-footer">
                  <button class="btn btn-cancel" @click="$emit('close')">{{ $t('action.close') }}</button>
                  <slot name="footer"></slot>
               </div>
            </div>
         </div>
         <!-- :: end styles bootstrap :: -->
      </div>
   </transition>
</template> 

<script>
/*
 *    This Modal component is a mix between Vue3 modal implementation 
 *    [+] with 'v-if:showModal' directive:parameter, html scope is added/removed not just shown/hidden
 *    [+] with slot we can pass content from parent component
 *    [+] some classes are passed from parent component
 *    and Bootstrap 4.6 _modal.scss module
 *    [+] using bootstrap css classes, the modal have a responsive behaviour, 
 *    [+] modal design can be configured using css classes (size, scroll)
 */
export default {
   name: 'Modal',
   props: ['modalDialogClass'],
   emits: ['close']
}
</script>

<style lang="scss">
   .modal-mask {
      position: fixed;
      z-index: 9998;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.75);
      transition: opacity 0.3s ease;
   }
   .modal-header .close { 
      border-top-right-radius: 0.3rem;
   }
   /*
   * The following styles are auto-applied to elements with
   * transition="modal" when their visibility is toggled
   * by Vue.js.
   *
   * You can easily play with the modal transition by editing
   * these styles.
   */
   .modal-enter {
      opacity: 0;
   }
   .modal-leave-active {
      opacity: 0;
   }
   .modal-enter .modal-container,
   .modal-leave-active .modal-container {
      -webkit-transform: scale(1.1);
      transform: scale(1.1);
   }
</style>
