<template>
  <PageContainer :document="document">
    <template #header>
      <AppBreadcrumb :items="[{ path: '/blog', title: 'Blog' }, document]" />
      <div
        class="relative flex flex-col-reverse px-8 mb-8 mt-1.5"
        style="height: 450px"
      >
        <PageHeader :document="document" class="text-white" />
        <img
          :src="`https://picsum.photos/id/${
            1017 + +document.title.replace(/[^0-9]*/, '')
          }/1280/450`"
          class="absolute inset-0 -z-10"
        />
        <div
          class="absolute inset-0 -z-1 bg-gradient-to-t from-black via-transparent opacity-50"
        />
      </div>
    </template>

    <template #sidebar>
      <BlogMeta />

      <AppReadingTime
        v-if="document.readingTime"
        :reading-time="document.readingTime"
      />

      <PageToc v-if="document.toc" :document="document" class="mb-8" />
    </template>

    <template #footer>
      <BlogNextPrev :prev="prev" :next="next" />
    </template>
  </PageContainer>
</template>

<script>
import { headDocument as head } from '~/libs/helpers'

export default {
  name: 'BlogSlug',
  async asyncData({ $content, params }) {
    const document = await $content('blog', params.slug).fetch()

    const [prev, next] = await $content('blog')
      .only(['title', 'path'])
      .sortBy('createdAt', 'asc')
      .surround(params.slug)
      .fetch()

    return {
      document,
      prev,
      next,
    }
  },
  head,
}
</script>