<template>
  <div class="modalWindow" ref="modalWindowEl">
    <div class="modalWindow__wrapper" :class="wrapperClass">
      <div v-if="has_restricted_access" class="warning_msg">
          Вы не сможете добавить комплекс, так как у вас не оплачен тариф
      </div>
      <div class="modalWindow__title">{{ props.title }}</div>
      <button class="modalWindow__close" @click="$emit('closeModel')">
        <svg
          width="18"
          height="18"
          viewBox="0 0 18 18"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M0.93511 18C0.698006 18 0.460901 17.9099 0.280756 17.7284C-0.0808901 17.3667 -0.0808901 16.7804 0.280756 16.4187L16.4283 0.271235C16.7899 -0.0904116 17.3762 -0.0904116 17.7379 0.271235C18.0995 0.632881 18.0995 1.2192 17.7379 1.58107L1.59059 17.7284C1.40909 17.9087 1.17199 18 0.93511 18Z"
            fill="#757579"
          />
          <path
            d="M17.0838 18C16.8466 18 16.6098 17.9099 16.4294 17.7284L0.280756 1.58107C-0.0808901 1.2192 -0.0808901 0.632881 0.280756 0.271235C0.642403 -0.0904116 1.22872 -0.0904116 1.59059 0.271235L17.7379 16.4187C18.0995 16.7804 18.0995 17.3667 17.7379 17.7284C17.5564 17.9087 17.3195 18 17.0838 18Z"
            fill="#757579"
          />
        </svg>
      </button>
      <slot />
      <slot name="formBtns" />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

const emits = defineEmits(["closeModel"]);
const props = defineProps ({
  title: String,
  wrapperClass: {
    type: String,
    default: ''
  },
})

const has_restricted_access = ref(!!Number(document.getElementById('has_restricted_access')?.value))
const hasDeveloper = ref(!!Number(document.getElementById('has_developer')?.value))

const modalWindowEl = ref(HTMLElement);

document.addEventListener("click", (e) => {
  if (e.target === modalWindowEl.value) {
    emits("closeModel");
  }
});
</script>

<style scoped lang="scss">
.modalWindow {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s all ease-in-out;

  &.open {
    opacity: 1;
    visibility: visible;
    transition: 0.3s all ease-in-out;
  }

  &__wrapper {
    position: relative;
    width: 760px;
    height: 80vh;
    @apply bg-white;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-y: scroll;
  }

  &__title {
    font-size: 28px;
    line-height: 100%;
  }

  &__close {
    position: absolute;
    right: 30px;
    top: 30px;
    width: 20px;
    height: 20px;
    svg {
      width: 100%;
      height: 100%;
    }
  }
}

.warning_msg
{
  background-color: #f2dede;
  border: 1px solid #ebcccc;
  border-radius: 4px;
  color: #a94442;
  padding: 10px 20px 12px;
  margin-bottom: 30px;
  font-size: 16px;
  font-family: "Lato";
  line-height: 1.5;
}
</style>
