---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getCollection } from 'astro:content';

const lists = (await getCollection('finds')).sort(
  (a, b) => b.data.date.valueOf() - a.data.date.valueOf()
);
const lastUpdated = lists[0]?.data.date;

const fmt = new Intl.DateTimeFormat('en-US', {
  year: 'numeric',
  month: 'short',
  day: 'numeric',
});
---

<BaseLayout
  title="Lists"
  description={`All ${lists.length} themed lists on Unique.`}
  subheader={`All ${lists.length} themed lists.`}
  lastUpdated={lastUpdated}
  noindex
>
  <ul class="lists-index">
    {lists.map((l) => (
      <li>
        <a href={`/finds/${l.id}/`}>{l.data.title}</a>
        <time datetime={l.data.date.toISOString()}>{fmt.format(l.data.date)}</time>
      </li>
    ))}
  </ul>

  <style>
    .lists-index {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .lists-index li {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 1rem;
      padding: 0.5rem 0;
      border-bottom: 1px solid var(--rule);
    }
    .lists-index li:last-child { border-bottom: 0; }
    .lists-index time {
      color: var(--muted);
      font-size: 0.85rem;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
  </style>
</BaseLayout>
