lib.itmens/catalog/templates/_item_comments_by_episode.html

{% load static %}
{% load i18n %}
{% load l10n %}
{% load mastodon %}
{% load duration %}
{% load user_actions %}
<div id="comments_by_episode">
  {% if not request.GET.last %}
    <div class="season-picker">
      <span class="season-number">
        <a hx-swap="innerHTML"
           hx-get="{% url "catalog:comments" item.url_path item.uuid %}"
           hx-target="#comments">{% trans "this season" %}</a>
      </span>
      {% for ep in item.all_episodes %}
        <span class="season-number" id="ci_{{ ep.uuid }}">
          <a hx-swap="innerHTML"
             {% if ep.uuid == episode_uuid %} class="current" {% else %} hx-get="{% url "catalog:comments_by_episode" item.url_path item.uuid %}?episode_uuid={{ ep.uuid }}" {% endif %}
             hx-target="#comments">{{ ep.episode_number }}</a>
        </span>
      {% endfor %}
    </div>
    <p>
      <small>
        <a href="#"
           hx-get="{% url 'journal:comment' episode_uuid %}"
           class="item-mark-icon"
           hx-target="body"
           hx-swap="beforeend">
          {% if mark.comment_text %}
            <i class="fa-regular fa-pen-to-square"></i>
          {% else %}
            <i class="fa-regular fa-square-plus"></i>
          {% endif %}
          {% trans "comment this episode" %}
        </a>
      </small>
    </p>
    <script defer>
      $(function(){
        window.cil.forEach(function(uuid){
          $('#ci_'+uuid).addClass('marked');
        })
      });
    </script>
  {% endif %}
  {% for comment in comments %}
    {% if forloop.counter <= 10 %}
      <section>
        <span class="action">
          {% 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>
          {% if comment.rating_grade %}{{ comment.rating_grade|rating_star }}{% endif %}
          <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.focus_item %}
          <a href="{{ comment.focus_item.url }}">{{ comment.focus_item.display_title }}</a>
        {% endif %}
        {% if comment.item != item %}<a href="{{ comment.item.url }}">{{ comment.item.display_title }}</a>{% endif %}
        <div class="tldr" _="on click toggle .tldr on me">{{ comment.html|safe }}</div>
      </section>
    {% else %}
      <a hx-get="{% url "catalog:comments_by_episode" item.url_path item.uuid %}?episode_uuid={{ episode_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 %}
</div>