<template>
  <div>
    <div class="flex items-center border-b mb-3 border-color">
      <Button icon="pi pi-arrow-left" variant="link" @click="$router.go(-1)"></Button>
      <h1>{{ Title }}</h1>
      <Skeleton width="85%" v-if="isLoading"></Skeleton>
    </div>
    <div class="m-3">
      <div v-if="isLoading">
        <Skeleton></Skeleton>
        <Skeleton width="85%" class="my-2"></Skeleton>
        <Skeleton width="75%"></Skeleton>
      </div>
      <div v-html="Content"></div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  const Title = ref()
  const Content = ref()
  const route = useRoute()
  const isLoading = ref(true)

  onMounted(async()=>{
    const {data} = await useFetch('https://olcsoberauto.hu/rest/getPage', { query:{id:route.params.id}})
    if(data.value?.success){
      Title.value = data.value?.page.post_title
      Content.value = data.value?.page.post_content
    }
    isLoading.value = false
  })
</script>

<style>

</style>