<template>
  <!-- SUB Contents -->
  <div class="ui--content-wrapper">
    <sdl-breadcrumb></sdl-breadcrumb>
    <!--Contents Area -->
    <div class="ui--form-container">
      <div class="modal-body" v-html="htmlDoc.content"></div>
    </div>
  </div>
</template>

<script>
import {SDLUtil} from '@/utils';
import axios from "axios";

export default {
  data() {
    return {
      templateKey: '',
      htmlDoc: {},
    };
  },
  methods: {
    loadHtmlDoc() {
      // Loading bar execution
      SDLUtil.showLoadingBar(true);
      axios
        .get(`${SDLUtil.API_URL}/html-templates/group/STAFF/key/${this.templateKey}`)
        .then(response => {
          this.htmlDoc = response.data;

          // Loading bar hidden
          SDLUtil.showLoadingBar(false);
        })
        .catch(error => {
          SDLUtil.showLoadingBar(false);
          console.log(error);
        });
    },
  },
  created() {
    const routePathArr = this.$route.path.split('/');
    this.templateKey = routePathArr[routePathArr.length-1];
    this.loadHtmlDoc();
  },
};
</script>

<style scoped></style>
