<template>
  <div class="subs-modal">
    <div :class="['subs-modal__backdrop', { active: open }]" @click="$emit('close')"></div>
    <div :class="['subs-modal__wrapper', { open: open }, contentClass]">
      <div class="subs-modal__bg">
        <div class="subs-modal__content">
          <strong class="subs-modal__title">
            <slot name="title"></slot>
          </strong>
          <div class="subs-modal__body">
            <slot name="body"></slot>
          </div>
        </div>

        <div class="subs-modal__footer">
          <slot name="footer"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'Modal',
  props: {
    open: {
      type: Boolean,
      default: false
    },
    contentClass: {
      type: String,
      default: ''
    }
  },
  watch: {
    open (newBool) {
      if (newBool) {
        document.body.classList.add('modal--opened')
      } else {
        document.body.classList.remove('modal--opened')
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.subs-modal__backdrop {
  background-color: rgba($color_title, 0.5);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 11;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s ease 0s, opacity 0s ease 0s;

  &.active {
    opacity: 1;
    visibility: visible;
  }
}
.subs-modal__wrapper {
  width: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 12;
  transform: translate(-50%, -20%);
  opacity: 0;
  padding: 0 15px;
  visibility: hidden;
  transition: visibility 0s ease, opacity 0s ease-in-out, transform .2s ease-in-out;

  &.open {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
  }
}
.subs-modal__bg {
  background-color: white;
  border-radius: 12px;
}

.subs-modal__content {
  padding: 2*$gutter_mobile 2*$gutter_mobile 0;
}

.subs-modal__title {
  font-size: 18px;
  margin-bottom: 2*$gutter;
  display: block;
}
.subs-modal__body {
  margin-bottom: 2*$gutter_mobile;
  line-height: normal;
}

.subs-modal__footer {
  background-color: $color_gray;
  display: flex;
  justify-content: flex-end;
  padding: $gutter_mobile;
  border-bottom-right-radius: 12px;
  border-bottom-left-radius: 12px;
}
.subs-modal__btn {
  background-color: $color_pink;
  border-radius: 12px;
  border: 0;
  color: #fff;
  padding: 3*$gutter $gutter_mobile;
  outline: none;

  &:hover {
    background-color: $color_title;
  }

  &--confirm {
    width: 126px;
  }

  &--cancel {
    background-color: white;
    color: $color_title;
    border: 1px solid white;
    margin-right: $gutter_mobile;
    width: auto;

    &:hover {
      background-color: white;
      border-color: $color_title;
      color: $color_title;
    }
  }
}

@media (min-width: $screen_tablet) {
  .subs-modal__wrapper {
    width: 700px;

    &--deviceupdate {
      width: 400px;
      .float-label {
        flex-grow: 1;
      }
    }
  }
}
</style>
