---
import Base from '../../layouts/Base.astro';
import { loadNotebooks, notebookUrl } from '../../lib/notebooks.mjs';

const notebooks = loadNotebooks();
const fmt = (iso) =>
  iso
    ? new Date(iso).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
        timeZone: 'America/New_York',
      })
    : null;
---

<Base
  title="notebooks"
  description="Interactive marimo notebooks — data science work from the homelab, executed against live data and snapshotted."
>
  <h1>notebooks</h1>
  <p>
    marimo notebooks from the homelab, re-executed against their real data
    sources on a schedule and snapshotted here. Code is shown alongside its
    output — these are the working documents, not writeups.
  </p>

  {
    notebooks.length === 0 ? (
      <p class="nb-empty">No notebooks are published right now.</p>
    ) : (
      <ul class="nb-list">
        {notebooks.map((nb) => (
          <li>
            <a href={notebookUrl(nb.slug)}>{nb.title}</a>
            {nb.description && <p class="nb-desc">{nb.description}</p>}
            {fmt(nb.exportedAt) && (
              <p class="nb-meta">last run {fmt(nb.exportedAt)}</p>
            )}
          </li>
        ))}
      </ul>
    )
  }

  <style>
    .nb-list {
      list-style: none;
      margin: 2rem 0 0;
      padding: 0;
    }
    .nb-list li {
      margin: 0 0 1.6rem;
      padding-left: 0.9rem;
      border-left: 2px solid var(--hair);
    }
    .nb-list > li > a {
      font-size: 1.05rem;
    }
    .nb-desc {
      margin: 0.3rem 0 0;
      color: var(--muted);
    }
    .nb-meta,
    .nb-empty {
      margin: 0.3rem 0 0;
      font-size: 0.75rem;
      color: var(--muted);
    }
  </style>
</Base>