{% extends "item_base.html" %}
{% load static %}
{% load i18n %}
{% load l10n %}
{% load humanize %}
{% load mastodon %}
{% load strip_scheme %}
{% load thumb %}
{% block head %}
  <script src="{{ cdn_url }}/npm/shikwasa@2.2.1/dist/shikwasa.min.js"></script>
  <link href="{{ cdn_url }}/npm/shikwasa@2.2.1/dist/style.min.css"
        rel="stylesheet"></link>
<script src="{% static 'js/podcast.js' %}"></script>
{% endblock %}
{% block details %}
  <div>{% include '_people.html' with people=item.genre role='genre' max=5 %}</div>
  <div>{% include '_people.html' with people=item.host role='host' max=5 %}</div>
  <div>
    {% if item.official_site %}
      {% trans 'website' %}: {{ item.official_site|urlizetrunc:24 }}
    {% endif %}
  </div>
{% endblock %}
{% block content %}
  <h5>{% trans 'recent episodes' %}</h5>
  <div hx-get="{% url 'catalog:episode_data' item.uuid %}"
       hx-trigger="load"
       hx-swap="outerHTML"></div>
{% endblock %}
<!-- class specific sidebar -->
{% block left_sidebar %}
  <section>
    <center>
      <button href="#" class="podlove-subscribe-button-primary outline">{% trans 'subscribe in apps' %}</button>
    </center>
  </section>
  <script>
window.podcastData = {
  "title": "{{ item.display_title | escapejs }}",
  "subtitle": "",
  "description": "{{ item.display_description | escapejs }}",
  "cover": "{{ item.cover.url | escapejs }}",
  "feeds": [{"type": "audio", "format": "mp3", "url": "{{ item.feed_url | escapejs }}", "variant": "high"}]
}
$(()=>{
	{% if focus_item %}
	var position = 1 * "{{request.GET.position|escapejs}}";
	window.current_item_uuid = "{{focus_item.uuid}}";
	create_player({
		title: "{{ focus_item.display_title | escapejs }}",
		cover: "{{ focus_item.cover_url | default:item.cover.url | escapejs }}",
		src: "{{ focus_item.media_url | escapejs }}",
		album: "{{ item.display_title|escapejs }}",
		artist: "{{ item.host|join:' / '|escapejs }}"
	})
	if (position) window.player._initSeek = position;
  {% if request.user.is_authenticated %}
  set_podcast_comment_button("{% url 'journal:comment' focus_item.uuid %}")
  {% endif %}
	{% endif %}
});
  </script>
  <script class="podlove-subscribe-button"
          src="https://cdn.podlove.org/subscribe-button/javascripts/app.js"
          data-json-data="podcastData"
          data-buttonid="primary"
          data-language="en"
          data-hide="true"
          data-color="#1190C0"></script>
{% endblock %}