<template>
  <div v-html="html" />
</template>

<script lang="ts">
import { Component, Vue } from "@/ovd-vue";

@Component
export default class Message extends Vue {
  private html = require("@/assets/message_testdata.json");

  public created(): void {
    super.created();
  }

  public beforeDestroy(): void {
    super.beforeDestroy();
  }

  protected update(): void {
    // Update Message
    this.$ovdashboard.api_get_string(
      "text/get/html/message",
      (data) => (this.html = data)
    );
  }
}
</script>

<style lang="scss" scoped>
div:deep() {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  ul,
  ol {
    font-family: "Neue Praxis", sans-serif !important;
    margin-bottom: 0.4rem;
  }

  p {
    text-align: justify;
    hyphens: auto;
    margin-bottom: 0.4rem;
  }

  h1,
  h2,
  h3 {
    font-weight: normal;
  }

  h4,
  h5,
  h6 {
    font-weight: bold;
  }
}
</style>