---js
{
  layout: "base",
  latest_episodes: function(episodes) {
    return episodes.sort().reverse().slice(0,3)
  }
}
---
<div class="p-5 my-5 text-center bg-body-tertiary">
    <div>
      <h1 class="text-uppercase">{{title}}</h1>
      <section>
        {{{content}}}
      </section>
      <section>
        {{#if links.podcastRss}}
          <a href="{{{site.url}}}{{{links.podcastRss}}}" class="btn btn-outline-primary"><i class="bi bi-rss-fill me-1"></i>RSS</a>
        {{/if}}
      </section>
    </div>
</div>
<section class="py-5">
  <h1>Latest Episodes</h1>
    <div class="row row-cols-1 row-cols-md-3 g-1">
      {{#each (latest_episodes collections.episode)}}
        <div class="col">
          <div class="card m-2">
                <img src="{{this.url}}../image.jpg" class="card-img-left">
                <div class="card-body">
                  <h5 class="card-title"><a href={{{this.url}}}>{{{data.title}}}</a></h5>
                  <h6 class="card-subtitle mb-2 text-body-secondary"> Season {{{data.season}}}</h6>
                  <span class="card-subtitle mb-2 text-body-secondary"> {{{date this.date "ddd, MMM D, YYYY, LT"}}}</h6>
                </div>
          </div>
        </div>
      {{/each}}
    </div>
  </section>