<script setup lang="ts">
import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
import { useDynamicPageStore } from '~/stores/dynamic-page';
const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());

const route = useRoute();
const store = reactive({
  dynamicPage: useDynamicPageStore(),
});

await useAsyncData('index', () => store.dynamicPage.fetchPageByCode(route.path === '/' ? 'trang-chu' : route.path.replace('/', '')))
useHead({
  title: 'Trang chủ'
})
</script>

<template>
  <main class="h-screen" v-if="currentPage">
    <DynamicTemplate :settings="currentPage.settings">
        <DynamicSection
          v-for="(section, index) in sectionPublished"
          :key="index"
          :settings="section.settings"
          :content="section.content ? JSON.parse(section.content) : null"
          :section="section"
        />
    </DynamicTemplate>
  </main>
</template>