---
import { Image } from "astro:assets";
import { getCollection, render } from "astro:content";
import BaseLayout from "@/layouts/BaseLayout.astro";

const notes = (await getCollection("notes", ({ data }) => !data.draft)).sort(
  (a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf(),
);

function capitalize(s: string) {
  return s.charAt(0).toUpperCase() + s.slice(1);
}

const renderedNotes = await Promise.all(
  notes.map(async (note) => ({ note, Content: (await render(note)).Content })),
);

function formatDate(date: Date) {
  return date.toLocaleDateString("de-DE", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
  });
}
---

<BaseLayout title="Notes" description="Kurze Notizen von Adrian Altner.">
  <div class="page">
    <main class="main">
      <a href="/" class="back">← Home</a>
      <h1 class="heading">Notes</h1>
      {
        renderedNotes.length === 0 ? (
          <p class="empty">Noch keine Notizen vorhanden.</p>
        ) : (
          <ul class="list">
            {renderedNotes.map(({ note, Content }) => (
              <li class="item">
                <time
                  class="item__date"
                  datetime={note.data.publishDate.toISOString()}
                >
                  {formatDate(note.data.publishDate)}
                </time>
                <a href={`/notes/${note.id}`} class="item__title">
                  {note.data.title}
                </a>
                {note.data.cover && (
                  <a href={`/notes/${note.id}`} class="item__cover">
                    <Image
                      src={note.data.cover}
                      alt={note.data.coverAlt ?? ""}
                    />
                  </a>
                )}
                <div class="item__body prose">
                  <Content />
                </div>
                {note.data.tags.length > 0 && (
                  <div class="item__tags">
                    {note.data.tags.map((tag) => (
                      <a href={`/tags/${tag}`} class="tag">
                        {capitalize(tag)}
                      </a>
                    ))}
                  </div>
                )}
              </li>
            ))}
          </ul>
        )
      }
    </main>
  </div>
</BaseLayout>

<style>
  .page {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100dvh;
    background: #f5f5f3;
    color: #111;
  }

  .main {
    max-width: var(--width-prose);
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    width: 100%;
  }

  .heading {
    font-size: 1.75rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    margin-bottom: 2.5rem;
  }

  .empty {
    color: #888;
    font-size: 0.95rem;
  }

  .back {
    display: inline-block;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #555;
    text-decoration: none;
  }

  .back:hover {
    color: var(--accent);
  }
  
  .list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .item {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.25rem 1.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid #e0e0de;
    align-items: baseline;
  }

  .item:first-child {
    border-top: 1px solid #e0e0de;
  }

  .item__date {
    font-size: 0.8rem;
    color: #888;
    white-space: nowrap;
    padding-top: 0.15rem;
  }

  .item__title {
    font-size: 1rem;
    font-weight: 500;
    color: #111;
    text-decoration: none;
  }

  .item__title:hover {
    color: var(--accent);
  }

  .item__cover {
    grid-column: 1 / -1;
    margin-top: 0.75rem;
    display: block;
  }

  .item__cover img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
  }

  .item__body {
    grid-column: 1 / -1;
    margin-top: 0.75rem;
  }

  .prose {
    font-size: 1rem;
    line-height: 1.7;
    color: #333;
  }

  .prose :global(h2) {
    font-size: 1.4rem;
    font-weight: 500;
    margin: 2rem 0 0.75rem;
    color: #111;
  }

  .prose :global(h3) {
    font-size: 1.15rem;
    font-weight: 500;
    margin: 1.5rem 0 0.5rem;
    color: #111;
  }

  .prose :global(p) {
    margin-bottom: 1.25rem;
  }

  .prose :global(p:last-child) {
    margin-bottom: 0;
  }

  .prose :global(a) {
    color: var(--accent);
    text-underline-offset: 3px;
  }

  .prose :global(blockquote) {
    border-left: 3px solid var(--accent);
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    color: #555;
    font-style: italic;
  }

  .prose :global(code) {
    font-family: ui-monospace, monospace;
    font-size: 0.875em;
    background: #e8e8e6;
    padding: 0.1em 0.35em;
    border-radius: 3px;
  }

  .prose :global(pre) {
    background: #2b2b2b;
    color: #e0e0e0;
    padding: 1.25rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 1.5rem 0;
  }

  .prose :global(pre code) {
    background: none;
    padding: 0;
    font-size: 0.875rem;
  }

  .prose :global(ul),
  .prose :global(ol) {
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
  }

  .prose :global(li) {
    margin-bottom: 0.4rem;
  }

  .item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 2rem;
    grid-column: 1 / -1;
  }

  .tag {
    font-size: 0.75rem;
    color: #666;
    background: #e8e8e6;
    padding: 0.15em 0.55em;
    border-radius: 3px;
    text-decoration: none;
  }

  .tag:hover {
    background: var(--accent);
    color: #fff;
  }

  @media (max-width: 480px) {
    .item {
      grid-template-columns: 1fr;
      gap: 0.2rem;
    }
  }
</style>
