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

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


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

<template>
    <div class="no-sprite">
      <TableHeader></TableHeader>
    </div>

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

<style lang="scss" scoped>
h2 {
    margin-left: 20px;
}

p {
    margin-left: 30px;
}

.two-columns {
    display: flex;
    width: 100%;
}
</style>

<style lang="scss">
.no-sprite .undertable-wrapper {
  display: none;
}
</style>