---
layout: "base"
eleventyComputed:
  bodyClasses: "episode season-{{season}}"
---
<div class="bg-body-tertiary p-4 my-2 rounded">
  <div class="row">
    <div class="col"><img src="{{{this.image}}}" class="img-fluid"></div>
    <div class="col">
      <h1>{{#if title}}{{{title}}}{{else}}Episode {{episode}}{{/if}}</h1>
      Season {{season}}, Episode {{episode}} <br>
      <date>{{formatDate this.date "MMMM d, yyyy"}}</date><br>
      {{#if podcast}}
      <a href="{{{podcast.enclosureUrl}}}">Download</a>
      {{#if podcast.transcriptUrl}}| <a href="{{{podcast.transcriptUrl}}}">Transcript</a>{{/if}}

      <div>
        <audio controls>
          <source src="{{{podcast.enclosureUrl}}}" id="audio-player" type="audio/mpeg">
        Your browser does not support the audio element.
        </audio>
      </div>
      <script>
        params = new URLSearchParams(document.location.search)
        let startAt = params.get('startAt')
        if (startAt) {
          document.getElementById("audio-player").currentTime = startAt
        }
      </script>
      {{/if}}
    <div class="d-flex felx-wrap m-1 gap-1">
      {{#each tags}}
        {{#unlessEq this "episode"}}
            {{#with (findPageByTag this ../collections) as |page|}}
              <a href="{{ page.url }}" class="badge text-bg-dark fw-light rounded-1">{{ page.data.title }}</a>
            {{/with}}
        {{/unlessEq}}

      {{/each}}
    </div>
    </div>
    
  </div>
</div>

{{{content}}}