<template>
  <div class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-content">
      <base-card>
        <template v-slot:default>
          <div>
            <slot />
          </div>
        </template>
      </base-card>
    </div>
    <button class="modal-close is-large" @click="onClose" aria-label="close"></button>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator'

import ClickEvent from '../../core/events/ClickEvent'

import BaseCard from '../card/BaseCard.vue'

@Component({
  name: 'base-modal',
  components: {
    BaseCard
  }
})
export default class BaseModal extends Vue {
  onClose () {
    const event = new ClickEvent<void>()
    event.action = 'close'
    this.$emit('click', event)
  }
}
</script>

<style lang="scss" scoped>
button.modal-close {
  padding: 0px;
}

@import "../../core/base/bulma.scss";
@import "bulma/sass/components/modal.sass";
</style>
