<template>
  <article class="blog-post">
    <div class="blog-post__meta">
      <a :href="'/blog/' + post.fullSlug">
        <time :datetime="new Date(post.date).toISOString()">
          {{ post.date }}
        </time>
      </a>
    </div>
    <div class="blog-post__inner">
      <header class="blog-post__title">
        <h1>
          <template v-if="detail">
            {{ post.title }}
          </template>
          <template v-else>
            <a :href="'/blog/' + post.fullSlug">{{ post.title }}</a>
          </template>
        </h1>
      </header>
      <div class="blog-post__content" v-html="post.html"></div>
      <div class="blog-post__footer">
        <div class="blog-post__tags">
          <a
            v-for="tag of post.tags"
            :href="'/blog/tags/' + tag"
            class="blog-post__tag"
            >#{{ tag }}</a
          >
        </div>
      </div>
    </div>
  </article>
</template>

<script setup lang="ts">
defineProps<{ post: any; detail?: boolean }>();
</script>
