<template>
    <section class="topSpace" v-if="currentPage">
      <div v-if="currentPage.pageSections[0].sectionText">
        <div class="container content" v-html="htmlContent(currentPage.pageSections[0].sectionText)"></div>
      </div>
    </section>
    <section class="topSpace" v-else>
      <h1>Seite nicht gefunden</h1>
      <p>Die angeforderte Seite existiert nicht.</p>
    </section>
  </template>
  
  <script setup>
  import { computed } from 'vue';
  import { useRoute } from 'vue-router';
  import { storeToRefs } from 'pinia';
  import { useMainStore } from '@/stores/main';
  import { useHtmlConverter } from '@/composables/useHTMLConverter';
  
  const route = useRoute();
  const mainStore = useMainStore();
  const { convertToHTML } = useHtmlConverter();
  
  // Aktuelle Seite über Getter und Route
  const currentPage = computed(() => mainStore.getPageByLink(route.path));
    
  // HTML-Konvertierung
  const htmlContent = (data) => convertToHTML(data);
  </script>
  
  <style lang="sass">
  section:first-of-type::before
    top: 0
    left: 0
    width: 10vw
  
  .content
    h2
      font-size: 1.1rem
      font-family: 'Mainfont-Bold'
      margin: 1rem 0
    h3
      font-size: 1rem
      font-family: 'Mainfont-Bold'
      margin: .6rem 0
    p
      font-size: 1rem
      margin: .5rem auto
  </style>
  