<template>
  <div>
    <div class="modal-backdrop fade show" v-if="modalVisible"></div>
    <div class="modal fade" :class="{ 'show': modalVisible }" v-if="modalVisible" @click="hide">
      <dialog class="modal-dialog" @click.stop open="modalVisible">
        <div class="modal-content">
          <slot>

            <!-- This is fallback content, used for the docs page -->
            <h3>Hier komt de inhoud van het modal-element.</h3>

          </slot>
        </div>
      </dialog>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  dialog {
    background: transparent;
    border: 0;
    padding: 0;
  }

  .modal.show {
    display: flex;
    opacity: 1;
  }

  .modal.show .modal-dialog {
    margin-top: auto;
    margin-bottom: auto;

    max-width: 60vw; //override bootstrap styling
  }
</style>

<script>
export default {
  data() {
    return {
      modalVisible: false
    }
  },
  methods: {
    show: function() {
      this.modalVisible = true;
    }.doc('Toon de modal.', []),
    hide: function() {
      this.modalVisible = false;
    }.doc('Verberg de modal.')
  }
}
</script>
