---
import LinksLayout from "@/components/links/LinksLayout.astro";
import { getLinks } from "@/lib/collections";
import { filterByTag, getUniqueTags } from "@/lib/links";

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

<LinksLayout title="Tags" description="Alle Link-Tags." {links}>
  <div class="page">
    <header class="page__header">
      <h1 class="page__title">Tags</h1>
      <span class="page__count">{tags.length}</span>
    </header>
    <ul class="tag-list">
      {tags.map((tag) => (
        <li>
          <a href={`/links/tag/${encodeURIComponent(tag.toLowerCase())}`} class="tag-item">
            <span class="tag-item__name">#{tag}</span>
            <span class="tag-item__count">{filterByTag(links, tag).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;
  }

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

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

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

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

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

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