<template>
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-container">

        <div class="ui basic modal" style="display: block;">
          <div class="ui icon header">
            <i class="archive icon"></i>
            <slot name="header"></slot>
          </div>
          <div class="content">
            <slot name="text"></slot>
          </div>
          <div class="actions">
            <button class="ui red basic cancel inverted button" @click="$emit('close')">
              <i class="remove icon"></i>
              <span v-lang.general.cancel></span>
            </button>
            <button class="ui green ok inverted button" v-on:click="$emit('submit')">
              <i class="checkmark icon"></i>
              <span v-lang.general.approve></span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'modal',
    props: {
      header: ''
    },
    mounted: function () {
      document.addEventListener('keydown', (e) => {
        // Close the model when escape is pressed
        if (e.keyCode === 27) {
          this.$emit('close')
        }
        // Send it when enter is pressed
        /* if (e.keyCode === 13) {
          this.$emit('submit')
        } */
      })
    }
  }
</script>

<style>
  .modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .8);
    transition: opacity .15s ease;
  }

  .modal-container {
    transition: all .15s ease;
    position: relative;
    width: 100%;
    height: 100%;
  }

  .modal-container .modal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(0, -50%);
    text-align: center;
  }

  /* Transitions */

  .modal-enter {
    opacity: 0;
  }

  .modal-leave-active {
    opacity: 0;
  }

  .modal-enter .modal-container,
  .modal-leave-active .modal-container {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
</style>
