---
import BaseLayout from "../layouts/BaseLayout.astro";
import ContentCard from "../components/ContentCard.astro";
import MediaModal from "../components/MediaModal.astro";
import { readContentCache } from "../lib/content/cache";
import { podcastEpisodes } from "../lib/content/selectors";

const cache = await readContentCache();
const episodes = podcastEpisodes(cache).sort(
  (a, b) => Date.parse(b.publishedAt) - Date.parse(a.publishedAt),
);
---

<BaseLayout
  title="Podcast | Irregular Mind"
  description="Episodes from the Irregular Mind podcast."
  canonicalPath="/podcast"
>
  <section class="section">
    <div class="section-header">
      <h2>Irregular Mind</h2>
      <span class="muted">{episodes.length} episodes</span>
    </div>
    {
      episodes.length > 0 ? (
        <div class="grid">
          {episodes.map((item) => (
            <ContentCard item={item} placement="podcast.list" />
          ))}
        </div>
      ) : (
        <div class="empty">
          No episodes yet. Set <code>PODCAST_RSS_URL</code> and run{" "}
          <code>npm run fetch-content</code>.
        </div>
      )
    }
  </section>
  
  <MediaModal />
</BaseLayout>
