<route>
{
  meta:{
    layout: 'posts'
  }
}
</route>

<template>
  <div>
    <h1>Blog</h1>
    <div>
      <ei:spinner-3 v-if="post.loading" class="text-4xl text-fly-600 dark:text-fly-500 animate-spin" />
      <ul
        v-if="post.postList && post.loading === false" key="test" v-motion class="list-none"
        :initial="{ opacity: 0 }" :enter="{opacity: 1, transition: {delay: 0.5,} }"
      >
        <router-link v-for="p in post.postList" :key="p.slug" class="no-underline dark:hover:text-fly-500" :to="`/posts/${p.slug}`">
          <li>
            <div class="text-xl">
              {{ p.title }}
            </div>
            <div class="flex justify-start flex-row">
              <div class="text-xs">
                {{ convertDate(p.date_created) }}
              </div>
            </div>
          </li>
        </router-link>
      </ul>
      <div
        v-if="post.loading === false && post.postList.length === 0" class="text-xl"
      >
        No Posts found
      </div>
      <div v-if="post.errors.length > 0" class="flex">
        <ic:baseline-error class="text-xl mr-2 text-fly-600 dark:text-fly-500" /> {{ post.errors[0].message }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'
import { usePostStore } from '~/stores/post'

useHead({
  title: 'Blog – Flycro',
  meta: [
    { name: 'description', content: 'Posts about thoughts, projects and what inspires me.' },
  ],
})

const post = usePostStore()

function convertDate(date: string): string {
  return dayjs(date).format('DD. MMMM YYYY')
}

onMounted(() => {
  post.fetchPosts()
})

</script>

<style scoped>
article.prose.m-auto div div ul.list-none a.no-underline
{
    @apply no-underline
}
</style>
