{% load static %}
{% load i18n %}
{% load l10n %}
{% load mastodon %}
{% load duration %}
{% load user_actions %}
{% if item.class_name == "tvseason" and not request.GET.last %}
  {% if item.all_episodes %}
    <div class="season-picker">
      <span class="season-number"><a class="current">{% trans "this season" %}</a></span>
      {% for ep in item.all_episodes %}
        <span class="season-number" id="ci_{{ ep.uuid }}">
          <a hx-swap="innerHTML"
             hx-get="{% url "catalog:comments_by_episode" item.url_path item.uuid %}?episode_uuid={{ ep.uuid }}"
             hx-target="#comments">{{ ep.episode_number }}</a>
        </span>
      {% endfor %}
    </div>
    <script defer>$(function(){ window.cil.forEach(function(uuid){ $('#ci_'+uuid).addClass('marked'); }) });</script>
  {% else %}
    <p _="init get localStorage.getItem('x_add_episode') then if it then add .hidden to #x_add_episode"
       id="x_add_episode"
       class="hint">
      <a href={% url 'catalog:edit' item.url_path item.uuid %}>
        {% trans "edit this item to fetch or add episode list here" %}
      </a>
      [<a _="on click add .hidden to #x_add_episode then call localStorage.setItem('x_add_episode', 1)">{% trans "hide this tooltip" %}</a>]
    </p>
  {% endif %}
{% endif %}
{% for comment in comments %}
  {% if forloop.counter <= 10 %}
    <section>
      <span class="action">
        {% if comment.item.class_name == "podcastepisode" %}
          <span>
            <a href="{{ comment.item_url }}"
               data-media="{{ comment.item.media_url }}"
               data-position="{{ comment.metadata.position|default:0 }}"
               data-cover="{{ comment.item.cover_url|default:item.cover.url }}"
               class="episode"
               data-hosts="{{ item.host|join:' / ' }}"
               data-title="{{ comment.item.display_title }}"
               data-album="{{ item.display_title }}"
               {% if request.user.is_authenticated %} data-comment-href="{% url 'journal:comment' comment.item.uuid %}" {% endif %}
               data-uuid="{{ comment.item.uuid }}"><i class="fa-regular fa-circle-play"></i></a>
          </span>
        {% endif %}
        {% if comment.latest_post %}
          {% include "action_reply_piece.html" with post=comment.latest_post piece=comment %}
          {% include "action_like_post.html" with post=comment.latest_post %}
          {% include "action_boost_post.html" with post=comment.latest_post %}
          {% include "action_open_post.html" with post=comment.latest_post %}
        {% endif %}
      </span>
      <span>
        <a href="{{ comment.owner.url }}"
           class="nickname"
           title="@{{ comment.owner.handle }}">{{ comment.owner.display_name }}</a>
      </span>
      <span class="action inline">
        <span class="timestamp">
          {{ comment.created_time|date }}
          {{ comment.mark.action_label }}
        </span>
      </span>
      {% if comment.item != item %}
        <a href="{{ comment.item_url }}">{{ comment.item.display_title }}</a><small class="title_deco">{{ comment.item.title_deco }}</small>
      {% endif %}
      <div class="tldr" _="on click toggle .tldr on me">
        <span>
          {% if comment.rating_grade %}{{ comment.rating_grade|rating_star }}{% endif %}
        </span>
        {{ comment.html|safe }}
      </div>
      {% if comment.latest_post %}<div id="replies_{{ comment.latest_post.pk }}"></div>{% endif %}
    </section>
  {% else %}
    <a hx-get="{% url 'catalog:comments' comment.item.url_path comment.item.uuid %}?last={{ comment.created_time|date:'Y-m-d H:i:s.uO'|urlencode }}"
       hx-trigger="click"
       hx-swap="outerHTML">
      <button class="outline">{% trans "show more" %}</button>
    </a>
  {% endif %}
{% empty %}
  <div class="empty">{% trans 'nothing more.' %}</div>
{% endfor %}