<script>

export default {
  name: 'VModal',
  components: {},
  props: {
    isOpen: {
      default: false,
      type: Boolean
    },
    close: {
      default: () => null,
      type: Function
    },
    containerClass: {
      default: "",
      type: String,
    }
  },
  data() {
    return {}
  },
  computed: {
  },
  mounted () {
    document.addEventListener("keydown", this.onEsc);
  },
  unmounted() {
    document.removeEventListener("keydown", this.onEsc);
  },
  methods: {
    onEsc (e) {
      if (e.key === "Escape") {
        this.close()
      }
    }
  }
}

</script>

<template>
  <div
    v-if="isOpen"
    class="absolute"
  >
    <div class="absolute">
      <div
        id="select_machines_modal"
        class="fixed z-[10000] inset-0"
      >
        <!-- VModal container -->
        <div class="h-screen flex items-center justify-center p-4">
          <!-- Overlay -->
          <div
            class="absolute z-0 inset-0 bg-gray-500 opacity-75"
            aria-hidden="true"
          />
          <!-- VModal box -->
          <div
            class="relative max-h-full overflow-y-auto bg-white rounded-lg shadow-xl "
            role="dialog"
            aria-modal="true"
            tabindex="0"
            autofocus=""
          >
            <button
              type="button"
              class="absolute top-2 right-2 text-gray-400 flex space-x-1 items-center"
              aria_label="close modal"
              @click="close"
            >
              <span class="text-sm">(esc)</span>
              <i class="ri ri-close-line text-2xl" />
            </button>

            <div
              class="min-w-[350px] min-h-[400px] py"
              :class="containerClass"
            >
              <slot />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
