{% load bleach_tags %}
{% load static %}
{% load i18n %}
{% load l10n %}
{% load humanize %}
{% load mastodon %}
{% load thumb %}
{% load user_actions %}
{% load duration %}
{% for event in events %}
  {% with post=event.subject_post piece=event.subject_post.piece item=event.subject_post.item %}
    {% if not post %}
      <!-- invalid data {{ event.pk }} -->
    {% else %}
      <section class="activity post">
        {% if event.type == "boost" %}
          <div class="boosted">
            <i class="fa-solid fa-retweet"
               title="{{ event.published|naturaldelta }}"></i>
            <a href="{{ event.subject_identity.url }}"
               class="nickname"
               title="@{{ event.subject_identity.handle }}">{{ event.subject_identity.name }}</a>
            {% trans 'boosted' %}
          </div>
        {% endif %}
        <div style="display:flex;">
          <div>
            <div class="avatar" style="margin:0.6em 0.6em 0.6em 0;">
              <a href="{{ post.author.url }}">
                <img src="{{ post.author.local_icon_url }}"
                     alt="@{{ post.author.handle }}">
              </a>
            </div>
          </div>
          <div style="flex-grow:1;">
            <span class="action">
              <span class="timestamp">{{ post.published|naturaldelta }}</span>
              {% if item and item.class_name != 'tvepisode' %}
                <span>
                  {% if item.class_name == 'podcastepisode' %}
                    <a title="{% trans "play" %}"
                       class="episode"
                       data-uuid="{{ item.uuid }}"
                       data-media="{{ item.media_url }}"
                       data-cover="{{ item.cover_url|default:item.parent_item.cover.url }}"
                       data-title="{{ item.display_title }}"
                       data-album="{{ item.parent_item.display_title }}"
                       data-hosts="{{ item.parent_item.host|join:' / ' }}"
                       {% if request.user.is_authenticated %} data-comment-href="{% url 'journal:comment' item.uuid %}" {% endif %}
                       data-position="{{ piece.metadata.position | default:0 }}"><i class="fa-solid fa-circle-play"></i></a>
                  {% else %}
                    <a title="{% trans "mark" %}"
                       hx-get="{% url 'journal:mark' item.uuid %}?shelf_type=wishlist"
                       hx-target="body"
                       hx-swap="beforeend">
                      <i class="fa-regular fa-bookmark"></i>
                    </a>
                  {% endif %}
                </span>
              {% endif %}
              {% include "action_reply_post.html" %}
              {% include "action_like_post.html" %}
              {% include "action_boost_post.html" %}
              {% include "action_open_post.html" %}
            </span>
            <span>
              <a href="{{ post.author.url }}"
                 class="nickname"
                 title="@{{ post.author.handle }}">{{ post.author.name|default:post.author.username }}</a>
              {% if piece and piece.classname == 'note' %}
                {% trans "wrote a note" %}
              {% endif %}
            </span>
            {% if item and piece.classname != 'note' %}
              <article>{% include "_item_card.html" with item=item allow_embed=1 %}</article>
            {% endif %}
            <div>{{ post.summary|default:'' }}</div>
            <div style="display:flex;">
              <div style="flex-grow:1"
                   {% if post.summary or post.sensitive %}class="spoiler" _="on click toggle .revealed on me"{% endif %}>
                <div class="attachments">
                  {% for attachment in post.attachments.all %}
                    {% if attachment.is_image %}
                      <a href="#img_{{ post.pk }}_{{ loop.index }}">
                        <img src="{{ attachment.thumbnail_url.relative }}"
                             alt="image attachment"
                             class="preview">
                      </a>
                      <a href="#" class="lightbox" id="img_{{ post.pk }}_{{ loop.index }}">
                        <span style="background-image: url('{{ attachment.full_url.relative }}')"></span>
                      </a>
                    {% endif %}
                  {% endfor %}
                </div>
                {% if piece and piece.classname == 'note' %}
                  <blockquote class="tldr"
                              _="on click toggle .tldr on me"
                              style="margin:0;
                                     padding-top:0;
                                     padding-bottom:0">
                    {{ post.content|bleach:"a,p,span,br,div,img"|default:"" }}
                  </blockquote>
                {% else %}
                  {{ post.content|bleach:"a,p,span,br,div,img"|default:"" }}
                {% endif %}
              </div>
              <div class="embed-cover">
                {% if piece and piece.classname == 'note' %}
                  {% if item %}
                    <a href="{{ item.url }}" title="{{ item.display_title }}">
                      <img src="{{ item.cover_image_url }}"
                           title="{{ item.display_title }}"
                           alt="cover">
                    </a>
                  {% endif %}
                {% endif %}
              </div>
            </div>
          </div>
        </div>
        <div id="replies_{{ post.pk }}"></div>
      </section>
    {% endif %}
  {% endwith %}
  {% if forloop.last %}
    <div class="htmx-indicator"
         style="margin-left: 60px"
         {% if request.GET.q %} hx-get="{% url 'social:search_data' %}?q={{ request.GET.q }}&amp;lastpage={{ page }}" {% else %} hx-get="{% url 'social:data' %}?last={{ event.pk }}&amp;typ={{ feed_type }}" {% endif %}
         hx-trigger="revealed"
         hx-swap="outerHTML">
      <i class="fa-solid fa-compact-disc fa-spin loading"></i>
    </div>
  {% endif %}
{% empty %}
  <div class="empty">
    {% if request.GET.last or page > 1 %}
      {% trans 'nothing more.' %}
    {% elif request.GET.q %}
      {% trans 'no matching activities.' %}
    {% else %}
      {% url 'users:data' as import_url %}
      {% blocktrans %}Find and mark some books/movies/podcasts/games, <a href="{{ import_url }}">import your data</a> from Goodreads/Letterboxd/Douban, follow some fellow {{ site_name }} users on the fediverse, so their recent activities and yours will show up here.{% endblocktrans %}
    {% endif %}
  </div>
{% endfor %}