---
import FeatureImage from "../components/FeatureImage.astro";
import AuthorList from "../components/AuthorList.astro";
import { formatDate } from "../utils";
import type { Settings, Post } from "@matthiesenxyz/astro-ghostcms/api";
export type Props = {
  post: Post;
  settings: Settings;
};
const { post, settings } = Astro.props as Props;
---

<header class="article-header gh-canvas">
  {post.primary_tag && (
    <section class="article-tag">
      <a href={`/tag/${post.primary_tag.slug}`}>{post.primary_tag.name}</a>
    </section>
  )}
  <h1 class="article-title" transition:name={post.title}>{post.title}</h1>

  {post.custom_excerpt && <p class="article-excerpt">{post.custom_excerpt}</p>}
  <div class="article-byline">
    <section class="article-byline-content">
      <AuthorList post={post} settings={settings} />
      <div class="article-byline-meta">
        { post.authors && post.authors.length > 1 && (
          <h4 class="author-name">
          {post.authors.map((author) => author.name).join(", ")}
        </h4>
        )}
        <div class="byline-meta-content">
          <time class="byline-meta-date" datetime={formatDate(post.created_at)}
            >{formatDate(post.created_at)}
          </time>
          <span class="byline-reading-time"
            ><span class="bull">&bull;</span>
            {post.reading_time} min read
          </span>
        </div>
      </div>
    </section>
  </div>
  {post.feature_image && (
    <FeatureImage
      image={post.feature_image}
      alt={post.feature_image_alt ? post.feature_image_alt : post.title}
      caption={post.feature_image_caption || "" }
      settings={settings}
      transitionName={`img-${post.title}`}
    />
  )}
</header>

<style lang="scss">
  .article-byline {
    display: flex;
    justify-content: space-between;
    margin: 20px 0 0;
  }

  .article-byline-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
  }

  .article-byline-content .author-list {
    justify-content: flex-start;
    padding: 0 12px 0 0;
  }

  .article-byline-meta {
    color: color-mod(var(--color-midgrey));
    font-size: 1.4rem;
    line-height: 1.2em;
  }

  .article-byline-meta h4 {
    margin: 0 0 3px;
    font-size: 1.6rem;
  }

  .article-byline-meta .bull {
    display: inline-block;
    margin: 0 2px;
    opacity: 0.6;
  }

  .basic-info .avatar-wrapper {
    position: relative;
    margin: 0;
    width: 60px;
    height: 60px;
    border: none;
    background: rgba(229, 239, 245, 0.1);
  }

  .basic-info .avatar-wrapper svg {
    margin: 0;
    width: 60px;
    height: 60px;
    opacity: 0.15;
  }

  .page-template .article-title {
    margin-bottom: 0;
  }
</style>
