---js
{
  layout: "base",
  latest_episodes: function(episodes) {
    return episodes.sort().reverse().slice(0,4)
  }
}
---
<div class="hero">
  <h1>{{title}}</h1>
  <section class="text-muted">
    {{{content}}}
  </section>
  <section>
    {{#if links.podcastRss}}
      <a href="{{{links.podcastRss}}}" class="btn btn-outline-primary"><i class="bi bi-rss-fill me-1"></i>RSS</a>
    {{/if}}
  </section>
</div>
<section class="py-5">
  <h1 class="text-center fs-2">Latest Episodes</h1>
  <div class="container" style="max-width:500px">
    <div class="row row-cols-2 g-1">
      {{#each (latest_episodes collections.episode)}}
          <div class="col">
            <div class="card m-2">
              <a href={{{this.url}}}><img src="{{this.data.image}}" class="card-img-top"></a>
              <div class="card-body">
                <h5 class="card-title"><a href={{{this.url}}}>{{#if data.title}}{{{data.title}}}{{else}}Episode {{data.episode}}{{/if}}</a></h5>
                <h6 class="card-subtitle mb-2 text-body-secondary">Season {{data.season}}, Episode {{data.episode}}</h6>
                <span class="card-subtitle mb-2 text-body-secondary">{{{date this.date "MMM D, YYYY"}}}</h6>
              </div>
            </div>
          </div>
      {{/each}}
    </div>
  </div>
  </section>