<template>
  <section class="BlogArticle content">
    <NuxtLink class="text inline-flex-row" to="/blog">
      <Icon name="ph:arrow-left-duotone"/>
      Zurück zur Übersicht
    </NuxtLink>

    <p v-if="!article">
      Sorry bro, aber der Artikel existiert einfach nicht.
    </p>

    <div v-else>
      <header>
        <div class="image z-2">
          <img :src="article.image" alt="Artikelbild" aria-hidden="true"/>
        </div>
        <h1 class="margin-top">{{ article.title }}</h1>
        <h2>{{ article.description }}</h2>
      </header>
      <div class="flex-col gap-default">
        <ContentRenderer v-if="article" :value="article" :style="{ display: 'contents' }"/>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
const route = useRoute()

const { data: article } = await useAsyncData('article', () => queryCollection('blog').path(route.path).where('date', '<', tomorrow(new Date())).first())
</script>

<style scoped>

</style>