---
import LinksLayout from "@/components/links/LinksLayout.astro";
import { getLinks } from "@/lib/collections";
import {
  collectionColor,
  filterByCollection,
  getUniqueCollections,
} from "@/lib/links";

const links = await getLinks();
const collections = getUniqueCollections(links).sort((a, b) =>
  a.localeCompare(b),
);
---

<LinksLayout title="Collections" description="Alle Link-Collections." {links}>
  <div class="page">
    <header class="page__header">
      <h1 class="page__title">Collections</h1>
      <span class="page__count">{collections.length}</span>
    </header>
    <ul class="col-list">
      {collections.map((col) => (
        <li>
          <a href={`/links/collection/${encodeURIComponent(col.toLowerCase())}`} class="col-item">
            <div class="col-item__left">
              <span class="col-item__folder" style={`background: ${collectionColor(col)}`} aria-hidden="true">
                <svg width="10" height="10" viewBox="0 0 24 24" fill="white" stroke="none">
                  <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
                </svg>
              </span>
              <span class="col-item__name">{col}</span>
            </div>
            <span class="col-item__count">{filterByCollection(links, col).length}</span>
          </a>
        </li>
      ))}
    </ul>
  </div>
</LinksLayout>

<style>
  .page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .page__header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
  }

  .page__title {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #111;
  }

  .page__count {
    font-size: 0.875rem;
    color: #999;
  }

  .col-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .col-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0;
    border-bottom: 1px solid #e8e8e6;
    text-decoration: none;
    color: inherit;
  }

  .col-list li:last-child .col-item {
    border-bottom: none;
  }

  .col-item:hover .col-item__name {
    color: var(--accent);
  }

  .col-item__left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .col-item__folder {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .col-item__name {
    font-size: 0.9rem;
    color: #444;
    transition: color 0.1s;
  }

  .col-item__count {
    font-size: 0.75rem;
    color: #bbb;
    font-variant-numeric: tabular-nums;
  }
</style>
