---
import BaseLayout from '../../layouts/BaseLayout.astro';
import { getAllFinds } from '../../lib/find-items';

const finds = await getAllFinds();
const lastUpdated = finds[0]?.data.date;

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

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

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