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

export async function getStaticPaths() {
  const categories = await getCollection("projects_categories");
  return categories.map((category) => ({
    params: { slug: category.id },
    props: { category },
  }));
}

const { category } = Astro.props;

const projects = (
  await getCollection(
    "projects",
    ({ data }) => !data.draft && data.category?.id === category.id,
  )
).sort((a, b) => b.data.publishDate.valueOf() - a.data.publishDate.valueOf());

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

<BaseLayout
  title={`Projects: ${category.data.title}`}
  description={category.data.description}
>
  <div class="page">
    <main class="main">
      <a href="/projects" class="back">← Projects</a>
      <h1 class="heading">{category.data.title}</h1>
      {category.data.description && (
        <p class="description">{category.data.description}</p>
      )}
      {category.data.cover && (
        <Image class="category-cover" src={category.data.cover} alt={category.data.coverAlt ?? ""} />
      )}
      {
        projects.length === 0 ? (
          <p class="empty">Keine Projekte in dieser Kategorie.</p>
        ) : (
          <ul class="list">
            {projects.map((project) => (
              <li class="item">
                <div class="item__meta">
                  <a href={`/projects/${project.id}`} class="item__title">
                    {project.data.title}
                  </a>
                  <div class="item__links">
                    {project.data.url && (
                      <a href={project.data.url} class="item__link" target="_blank" rel="noopener noreferrer">
                        Live ↗
                      </a>
                    )}
                    {project.data.github && (
                      <a href={project.data.github} class="item__link" target="_blank" rel="noopener noreferrer">
                        GitHub ↗
                      </a>
                    )}
                  </div>
                </div>
                {project.data.description && (
                  <p class="item__description">{project.data.description}</p>
                )}
                {project.data.tags.length > 0 && (
                  <div class="item__tags">
                    {project.data.tags.map((tag) => (
                      <span class="tag">{capitalize(tag)}</span>
                    ))}
                  </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: 0.75rem;
  }

  .description {
    color: #555;
    font-size: 0.95rem;
    margin-bottom: 2rem;
  }

  .category-cover {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
    margin-bottom: 2rem;
  }

  .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 {
    padding: 1.25rem 0;
    border-bottom: 1px solid #e0e0de;
  }

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

  .item__meta {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
  }

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

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

  .item__links {
    display: flex;
    gap: 0.75rem;
  }

  .item__link {
    font-size: 0.8rem;
    color: #888;
    text-decoration: none;
  }

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

  .item__description {
    font-size: 0.9rem;
    color: #555;
    margin-top: 0.4rem;
    line-height: 1.5;
  }

  .item__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.75rem;
  }

  .tag {
    font-size: 0.75rem;
    color: #666;
    background: #e8e8e6;
    padding: 0.15em 0.55em;
    border-radius: 3px;
  }
</style>
