<script setup lang="ts">
import TableHeader from '~/components/parts/TableHeader.vue';
import { useAsyncData } from '#app';
const { locale } = useI18n();
const localePath = useLocalePath()

const {data: posts} = useAsyncData('posts', async () => 
await queryCollection(`blog`).where('path', 'LIKE', `/blog/${locale.value}/%`).order('date', 'DESC').all()
, {watch: [locale]});
</script>

<template>
    <TableHeader></TableHeader>
    <Container>
    <h2>Blog</h2>
    <ul>
      <li v-for="post in posts" :key="post.slug">
        <NuxtLink :to="localePath({ name: 'blog-slug', params: { slug: post.slug } })">{{ post.title }}</NuxtLink>
        <span class="dash">-</span>
        <span>{{ post.date }}</span>
        <span class="dash">-</span>
        <span>{{ post.description }}</span>
      </li>
    </ul>
    </Container>
    <Footer></Footer>
</template>

<style lang="scss" scoped>
.dash 
{
  margin-left: 10px;
  margin-right: 10px;
}
</style>