---
import { toMilitaryDTG } from '@/lib/content/dates'
import { trailOf } from '@/lib/site/navigation'
import type { Article } from '@/lib/site/types'

type Props = {
  article: Article
}

const { article } = Astro.props

const trail = trailOf(article)
---

<div class="overline dark">
  <div class="wrapper">
    {trail.length > 1 && (
      <nav aria-label="Breadcrumb" class="breadcrumbs">
        <ol>
          {trail.map((step, index) => (
            <li>
              {index === trail.length - 1 ? (
                <span aria-current="page">{step.title}</span>
              ) : (
                <a href={step.path}>{step.title}</a>
              )}
            </li>
          ))}
        </ol>
      </nav>
    )}
    {article.published ? (
      <time class="publicationdate" datetime={article.published.toISOString()}>
        {toMilitaryDTG(article.published)}
      </time>
    ) : (
      <span class="publicationdate">No publication date set</span>
    )}
  </div>
</div>

<style>
  .overline {
    font-family: var(--font-mono);
    font-size: var(--type--1);
    line-height: 1;
    color: var(--color-text-secondary);
    letter-spacing: var(--tracking-0);

    background-color: var(--color-surface-elevated-2);
  }

  .wrapper {
    @mixin layout-wrapper;
    @mixin py var(--size-4);

    display: flex;
    gap: var(--size-4);
    align-items: baseline;
    justify-content: space-between; /* breadcrumbs left, date right */
  }

  .breadcrumbs {
    & ol {
      display: flex;
      gap: var(--size-2);

      margin: 0;
      padding: 0;

      list-style: none;

      & li {
        &:not(:last-child) {
          &::after {
            content: '⟫' / '';
            margin-inline-start: var(--size-2);
          }
        }
      }
    }
  }

  .publicationdate {
    font-weight: 700;

    &::before {
      content: '⟫' / '';
      margin-inline-end: var(--size-2);
    }
  }
</style>