<script setup lang="ts">
import FixedLayout from '~/components/layouts/FixedLayout.vue';
import TableHeader from '~/components/parts/TableHeader.vue';
import api from '~/composables/api'

const { get, post } = api();
const { locale } = useI18n();

// Move useAsyncData to top level — NOT inside onMounted
const { data: markdown } = await useAsyncData(`fixed-root`, async () =>
 await queryCollection(`fixed`).path(`/fixed/${locale.value}/root`).first()
, {watch: [locale]})

onMounted(async () => {
  try {
    console.log("Getting")
    const response = await get('/test');
    console.log('API Response:', response);
  } catch (error) {
    console.error('API Error:', error);
  }
});
</script>

<template>
  <TableHeader></TableHeader>
  
  <FixedLayout>
    <Container>
      <ContentRenderer v-if="markdown" :value="markdown"></ContentRenderer>
    </Container>    
  </FixedLayout>
  <Footer></Footer>
</template>