<template>
  <MainTemplate :useStagedOverviewLink="false">
    <template #topBar>
      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
        <h1 class="font-bold text-xl h-8">{{page}}</h1>
      </div>
    </template>
    <template #main>
      <div class="markdown-container">
        <component v-if="markdownComponent" :is="markdownComponent" />
        <p v-else>Diese Seite existiert nicht.</p>
      </div>
    </template>
  </MainTemplate>
</template>

<script setup lang="ts">
import { defineAsyncComponent, defineComponent, markRaw} from "vue";
import MainTemplate from "@/templates/Main.vue";
import 'highlight.js/styles/atom-one-dark.css';
</script>

<script lang="ts">
export default defineComponent({
  props: {
    page: String
  },
  watch:{
    page() {
      this.loadPage()
    }
  },
  data() {
    return {
      markdownComponent: null,
    };
  },
  async mounted() {
    this.loadPage()
  },
  methods:{
    loadPage(){
      this.markdownComponent = markRaw(defineAsyncComponent(() => import(`$/${this.page?.toLowerCase()}.md`)));
    }
  }
});
</script>