{% load static %}
{% load i18n %}
{% load l10n %}
{% load humanize %}
{% for ep in episodes %}
  <p>
    <h6>
      <a data-media="{{ ep.media_url }}"
         data-cover="{{ ep.cover_url|default:item.cover.url }}"
         class="episode gg-play-button-o"
         href="{{ ep.url }}"
         data-uuid="{{ ep.uuid }}"
         data-title="{{ ep.display_title }}"
         data-album="{{ item.display_title }}"
         data-hosts="{{ item.host|join:' / ' }}"
         {% if request.user.is_authenticated %} data-comment-href="{% url 'journal:comment' ep.uuid %}" {% endif %}
         style="top:4px;
                margin-right: 8px"></a>
      &nbsp;
      {% if request.user.is_authenticated %}
        <a style="margin-right: 10px"
           title="{% trans "comment this episode" %}"
           href="#"
           hx-get="{% url 'journal:comment' ep.uuid %}"
           hx-target="body"
           hx-swap="beforeend"><i class="fa-regular fa-comment-dots"></i></a>
      {% endif %}
      <a title="{% trans "original website" %}"
         target="_blank"
         rel="noopener"
         href="{{ ep.link }}"><i class="fa-solid fa-link"></i></a>
      {{ ep.display_title }}
      <small style="color:lightgrey;">{{ ep.pub_date|date }}</small>
    </h6>
    <small class="tldr-2 muted" _="on click toggle .tldr-2">{{ ep.display_description | linebreaksbr }}</small>
  </p>
  {% if forloop.last %}
    <button class="outline"
            hx-get="{% url 'catalog:episode_data' item.uuid %}?last={{ ep.pub_date|date:'Y-m-d H:i:s.uO'|urlencode }}"
            hx-trigger="click"
            hx-swap="outerHTML">{% trans "show more" %}</button>
  {% endif %}
{% empty %}
  <div>{% trans 'nothing more.' %}</div>
{% endfor %}