<template>
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-xl" style="max-height: fit-content;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">PreView</h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" @click="$emit('close')"></button>
      </div>
      <div class="modal-body">
        <div v-html="content"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="$emit('close')">
          {{ $t('sdl.common.label.close') }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    content: {
      required: true,
      type: String,
    },
  },
  data() {
    return {};
  },
};
</script>
