---
import { Image } from "astro:assets";
import { getCollection } from "astro:content";
import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import Layout from "./Layout.astro";
import Navbar from "@/components/Navbar.astro";
import moods from "@/utils/moods";

import outerBBS from "@/assets/guild-bbs.png";
import innerBBS from "@/assets/guild-bbs-content.png";
import sideBBS from "@/assets/guild-bbs-list.png";

interface Props {
  title: string;
  date: Date;
  currently?: {
    mood?: string;
    reading?: string;
    listening?: string;
    watching?: string;
    playing?: string;
  }
}

const { title, date, currently } = Astro.props;

const blog = await getCollection("blog");
blog.length = Math.min(blog.length, 5);
blog.sort((a, b) => a.data.pubDate!.valueOf() - b.data.pubDate!.valueOf());
dayjs.extend(utc);
---
<Layout {title}>
  <Navbar />

  <main>
    <nav id="blog-links">
      <div class="inner">
        <hgroup>
          <h1><span class="title">recent posts</span></h1>
          <ul>
            {blog.map(entry => (
              <li>
                <span class="item">
                  <a href={`/blog/${entry.id}`}>{entry.data.title}</a>
                  <time datetime={dayjs(entry.data.pubDate!).utc(true).toISOString()}>
                    {dayjs(entry.data.pubDate).utc(true).format("M/D/YY")}
                  </time>
                </span>
              </li>
            ))}
          </ul>
        </hgroup>
        <hgroup>
          <h1><span class="title">other links</span></h1>
          <ul>
            <li><span class="item"><a href="/blog">archive</a></span></li>
            <li><span class="item"><a href="/blog/rss.xml">rss feed</a></span></li>
          </ul>
        </hgroup>
      </div>
    </nav>

    <section>
      <article>
        <div class="inner">
          <header>
            <h1>{title}</h1>
            <hr />
            <div class="info">
              <time datetime={dayjs(date).utc(true).toISOString()}>
                <span class="title">Date</span>
                <span class="desc">{dayjs(date).utc(true).format("MMMM DD, YYYY")}</span>
              </time>
            </div>
          </header>

          <div class="content">
            <slot />
          </div>

          {currently && (
            <aside>
              <h2>Current</h2>
              {currently?.mood && (
                <dl>
                  <dt class="title">Mood</dt>
                  <dd class="desc">
                    <Image src={`/src/assets/moods/${moods.find(mood => mood === currently?.mood)}.png`} width={36} height={36} alt="" />
                    {currently.mood}
                    </dd>
                </dl>
              )}
              {currently.playing && (
                <dl>
                  <dt class="title">Game</dt>
                  <dd class="desc">{currently.playing}</dd>
                </dl>
              )}
              {currently.watching && (
                <dl>
                  <dt class="title">Show</dt>
                  <dd class="desc">{currently.watching}</dd>
                </dl>
              )}
              {currently.reading && (
                <dl>
                  <dt class="title">Book</dt>
                  <dd class="desc">{currently.reading}</dd>
                </dl>
              )}
              {currently.listening && (
                <dl>
                  <dt>Currently listening</dt>
                  <dd>{currently.listening}</dd>
                </dl>
              )}
            </aside>
          )}
        </div>
      </article>
    </section>
    <slot name="pagination" />
  </main>
</Layout>

<style define:vars={{ outerBorder: `url(${outerBBS.src})`, innerBorder: `url(${innerBBS.src})`, sideBorder: `url(${sideBBS.src})` }}>
  body {
    image-rendering: pixelated;
    --bg-0: #fff;
    --bg-1: #eeffff;
    --bg-2: #eeeeff;
    --bg-3: #eee;
    --bg-4: #ddddee;
    --bg-5: #ddeeee;
    --bg-6: #ccccdd;
    --bg-7: #ccddee;
    --bg-8: #8888bb;
    --border-0: #000;
    --border-1: #334466;
    --border-2: #6699aa;
    --border-3: #7799bb;
    --border-4: #88aabb;
    --border-5: #99bbcc;
    --border-6: #bbccdd;
  }
  h1 { font: bold 1rem var(--arial-font); }
  h2 {
    font: normal 1.5rem var(--mplus-12-font);
    text-transform: uppercase;
  }
  main {
    font: 1rem var(--arial-font);
    display: grid;
    grid-template-columns: auto minmax(auto, 75ch);
    justify-content: center;

    @media screen and (max-width: 1360px) {
      margin: 0 1rem;
    }

    @media screen and (max-width: 76em) {
      grid-template-columns: 1fr;
    }
  }

  #blog-links {
    min-width: 28ch;
    border: 2px solid var(--border-0);
    border-image: var(--sideBorder) 22 8 40 7 fill / 44px 16px 80px 14px;
    background-color: var(--bg-0);
    padding: 42px 10px 78px;
    margin-right: -2px;

    .inner {
      display: flex;
      height: calc(100% - 34px);
      flex-flow: column wrap;
      background-color: var(--bg-3);
      padding: 2px;
      margin: 18px 6px;
      border: 2px solid var(--border-6);
    }

    h1 {
      padding: 6px 2px;
      border-block: 2px solid var(--border-3);

      .title {
        display: inline-block;
        background-color: var(--bg-8);
        color: var(--bg-0);
        font-weight: normal;
        text-transform: uppercase;
        padding: 5px 2px;
        text-align: center;
        width: 100%;
      }
    }

    ul {
      display: flex;
      flex-flow: column wrap;
      list-style: none;
      padding: 0;

      li {
        padding: 4px 2px;
        border-bottom: 2px solid var(--bg-4);

        .item {
          font-family: var(--mplus-10-font);
          font-size: 1.254rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          a {
            flex: 1;
            background-color: var(--bg-1);
            padding: 6px;
            color: var(--border-0);
            text-decoration: none;
          }

          time { 
            background-color: var(--bg-5);
            padding: 6px;
          }

          &:hover {
            a { background-color: var(--bg-7); }
            time { background-color: var(--border-6); }
          }
        }
        &:last-child { border: none; }
      }
    }

    hgroup {
      margin: 0 4px;
      background-color: var(--bg-0);

      &:first-child { margin-top: 4px; }
      &:last-child { 
        border-bottom: 2px solid var(--border-2);
        margin-bottom: 4px;
      }
    }

    @media screen and (max-width: 76em) {
      margin-right: 0;
      margin-bottom: -2px;
    }
  }
  
  article {
    letter-spacing: 1px;
    border: 2px solid var(--border-0);
    border-image: var(--outerBorder) 19 9 38 11 fill / 38px 18px 76px 22px;
    background-color: var(--bg-3);
    padding: 36px 16px 74px 20px;

    .inner {
      border: 2px solid var(--border-2);
      border-image: var(--innerBorder) 3 2 2 fill / 6px 4px 4px;
      margin: 14px 4px 8px;
      padding: 4px 2px 2px;
      background-color: var(--bg-0);
    }

    .title {
      font: normal 1.5rem var(--mplus-12-font);
      background-color: var(--bg-2);
      padding: 2px 6px;
    }

    .desc {
      background-color: var(--bg-4);
      padding: 4px 6px;
      flex: 1;
    }

    header {
      border-bottom: 2px solid var(--bg-6);

      h1 {
        text-align: center;
        margin: 6px 2px;
        padding: 2px 0;
        background-color: var(--border-6);
      }

      .info {
        display: flex;
        align-items: baseline;
        gap: 2px;
        border-style: solid;
        border-width: 2px;
        border-color: var(--bg-2) var(--bg-2) var(--bg-1) var(--bg-1);
        padding: 2px 4px;

        time, .section {
          display: flex;
          width: 100%;
        }
      }

      hr {
        background-color: var(--border-5);
        border: none;
        height: 2px;
      }
    }

    .content {
      position: relative;
      background-image: linear-gradient(to right, var(--bg-0) 5px, transparent 2px),  linear-gradient(var(--bg-4) 2px, transparent 2px); 
      background-size: 10px 1lh;
      background-position-y: 1.9lh;
      margin: 0 1rem 2rem;
      padding: 2rem 1rem 0;
      line-height: 2;
      margin-trim: block;

      p { margin-block: 1lh; }
      
      @supports not (margin-trim: block) {
        :first-child { margin-block-start: 0; }
        :last-child { margin-block-end: 0; }
      }

      @media screen and (max-width: 950px) {
        background-position-y: 0.8rem;
        padding: 1rem;
        margin: 0.25rem 0;
      }
    }

    aside {
      display: grid;
      grid-template-columns: auto 1fr;
      grid-template-rows: repeat(4, auto);
      border-top: 2px solid var(--border-4);

      h2 {
        display: grid;
        place-content: center;
        grid-area: 1 / 1 / -1;
        padding-top: -2px;
        padding-left: 2px;
        height: 100%;
        border-top: 2px solid var(--border-1);
        border-right: 2px solid var(--border-4);
        background-color: var(--bg-7);
      }

      dl {
        display: flex;
        align-items: center;
        padding: 2px 6px;
        border-bottom: 2px solid var(--border-4);
        border-top: 2px solid var(--border-1);
        border-left: 2px solid var(--border-1);

        &:first-of-type > dd {
          display: flex;
          align-items: center;
          gap: 6px;
          margin: -2px;
          padding: 0 6px;
        }
        &:last-child { border-bottom: none; }
      }
    }
  }
</style>