<script setup lang="ts">
const { slug } = useRoute().params
</script>

<template>
  <article
    class="scrollbar fade-mask-sm d-flex flex-column gap-3 flex-grow-1 overflow-x-hidden overflow-y-auto py-sm-4 pe-sm-3"
  >
    <ContentDoc :path="`/blog/${slug}`">
      <template #default="{ doc }">
        <div class="post-preamble">
          <h3 class="alex">{{ doc.title }}</h3>
          <img
            draggable="false"
            :src="doc.thumbnail"
            :alt="doc.title"
            class="post-preamble-thumb rounded-4"
          />
        </div>

        <div class="post-content">
          <ContentRenderer :value="doc" />
        </div>
      </template>

      <template #not-found>
        <div
          class="d-flex flex-column justify-content-center align-items-center gap-3"
        >
          <span>Blog post not found 🙁</span>
          <NuxtLink to="/blog" class="link-hi">Back to blog</NuxtLink>
        </div>
      </template>
    </ContentDoc>
  </article>
</template>

<style scoped lang="scss"></style>
