---
import Base from "@layouts/Base.astro";
import { type CollectionEntry } from 'astro:content';

interface Props {
  post: CollectionEntry<'blog'>;
}
const { post } = Astro.props;
const { title, pubDate, tags } = post.data;
---
<Base title={title}>
  <div class="body-container">
    <h1>
      <a href={post.slug}>
        {title}
      </a>
    </h1>

    <p>
      <i>
        <a href={post.slug}>
          <time datetime="{{ page.date | date: '%Y-%m-%dT%H:%M:%SZ' }}">
            {pubDate}
          </time>
        </a>
        <span>
          { tags.join(" ")}
        </span>
      </i>
      <article>
        <slot />
      </article>
      <!-- <p> -->
      <!--     {% if page.custom_js %} -->
      <!--     {% for file in page.custom_js %} -->
      <!--     <script type="text/javascript" src="{{ site.baseurl }}/assets/js/{{ file }}"></script> -->
      <!--     {% endfor %} -->
      <!--     {% endif %} -->
      <!--     {% if layout.medium_zoom %} -->
      <!--     <script crossorigin="anonymous" integrity="sha256-EdPgYcPk/IIrw7FYeuJQexva49pVRZNmt3LculEr7zM=" -->
      <!--             src="https://cdn.jsdelivr.net/npm/medium-zoom@1.0.6/dist/medium-zoom.min.js"></script> -->
      <!--     <script type="text/javascript"> -->
      <!--         mediumZoom("[data-zoomable]", {background: "#0e0e0e"}) -->
      <!--     </script> -->
      <!--     {% endif %} -->
    </p>
  </div>
  <hr />
</Base>