{% load bleach_tags %}
{% load duration %}
{% load humanize %}
{% load i18n %}
{% for post in posts %}
  <section class="activity">
    <div style="display:flex;">
      <div>
        <div class="avatar" style="margin:0.6em 0.6em 0.6em 0;">
          <img src="{{ post.author.icon_uri }}" alt="@{{ post.author.handle }}" />
        </div>
      </div>
      <div style="flex-grow:1;">
        <span class="action">
          <span class="timestamp">{{ post.published|naturaldelta }}</span>
          {% 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 }}</a>
        </span>
        <div>{{ post.summary|default:'' }}</div>
        <div {% if post.summary or post.sensitive %}class="spoiler" _="on click toggle .revealed on me"{% endif %}>
          <div>
            {% for attachment in post.attachments.all %}
              {% if attachment.is_image %}
                <img src="{{ attachment.full_url.relative }}"
                     alt="attachment.file_display_name"
                     style="max-height:6em;
                            max-width:50%">
              {% endif %}
            {% endfor %}
          </div>
          {{ post.content|bleach:"a,p,span,br,div,img"|default:"" }}
        </div>
      </div>
    </div>
    <div id="replies_{{ post.pk }}"></div>
  </section>
{% empty %}
  <div class="empty">{% trans "nothing so far." %}</div>
{% endfor %}