<template>
  <div class="modal-dialog">
    <div class="modal-content" style="width:900px">
      <div class="modal-header">
        <h5 class="modal-title">{{ htmlDoc.title }}</h5>
        <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" @click="$emit('close')"></button>
      </div>
      <div class="modal-body" v-html="htmlDoc.content"></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>
import axios from 'axios';
import { SDLUtil } from '@/utils';

export default {
  data() {
    return {
      htmlDoc: {},
    };
  },
  props: {
    id: {
      type: String,
    },
  },
  methods: {
    loadHtmlDoc() {
      // Loading bar execution
      SDLUtil.showLoadingBar(true);
      axios
        .get(`${SDLUtil.API_URL}/templates/${this.id}`)
        .then(response => {
          this.htmlDoc = response.data;

          // Loading bar hidden
          SDLUtil.showLoadingBar(false);
        })
        .catch(error => {
          SDLUtil.showLoadingBar(false);
          console.log(error);
        });
    },
  },

  created() {
    this.loadHtmlDoc();
  },
  computed: {},
};
</script>
<style></style>
