{% load static %}
{% load i18n %}
{% load l10n %}
{% load admin_url %}
{% load mastodon %}
{% load oauth_token %}
{% load truncate %}
{% load thumb %}
{% load prettydate %}
{% load user_actions %}
{% for activity in activities %}

<li class="entity-list__entity">
  {% with "activity/"|add:activity.template|add:".html" as template %}
  {% include template %}
  {% endwith %}
</li>

{% if forloop.last %}
<div class="htmx-indicator" style="margin-left: 60px;" 
hx-get="{% url 'social:data' %}?last={{ activity.created_time|date:'Y-m-d H:i:s.uO'|urlencode }}"
hx-trigger="revealed"
hx-swap="outerHTML">
<svg width="16" height="16" viewBox="0 0 135 140" xmlns="http://www.w3.org/2000/svg" fill="#ccc">
  <rect y="10" width="15" height="120" rx="6">
    <animate attributeName="height"
    begin="0.5s" dur="1s"
    values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
    repeatCount="indefinite" />
    <animate attributeName="y"
    begin="0.5s" dur="1s"
    values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
    repeatCount="indefinite" />
  </rect>
  <rect x="30" y="10" width="15" height="120" rx="6">
    <animate attributeName="height"
    begin="0.25s" dur="1s"
    values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
    repeatCount="indefinite" />
    <animate attributeName="y"
    begin="0.25s" dur="1s"
    values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
    repeatCount="indefinite" />
  </rect>
  <rect x="60" width="15" height="140" rx="6">
    <animate attributeName="height"
    begin="0s" dur="1s"
    values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
    repeatCount="indefinite" />
    <animate attributeName="y"
    begin="0s" dur="1s"
    values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
    repeatCount="indefinite" />
  </rect>
  <rect x="90" y="10" width="15" height="120" rx="6">
    <animate attributeName="height"
    begin="0.25s" dur="1s"
    values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
    repeatCount="indefinite" />
    <animate attributeName="y"
    begin="0.25s" dur="1s"
    values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
    repeatCount="indefinite" />
  </rect>
  <rect x="120" y="10" width="15" height="120" rx="6">
    <animate attributeName="height"
    begin="0.5s" dur="1s"
    values="120;110;100;90;80;70;60;50;40;140;120" calcMode="linear"
    repeatCount="indefinite" />
    <animate attributeName="y"
    begin="0.5s" dur="1s"
    values="10;15;20;25;30;35;40;45;50;0;10" calcMode="linear"
    repeatCount="indefinite" />
  </rect>
</svg>
</div>
{% endif %}
{% empty %}
{% if request.GET.last %}
<div>{% trans '目前没有更多内容了' %}</div>
{% else %}
<div>{% trans '在NeoDB导入或标记一些书影音，去联邦宇宙（长毛象）关注一些正在使用NeoDB的用户，这里就会显示你和她们的近期动态。' %}</div>
{% endif %}
{% endfor %}
<script>
  // readonly star rating at aside section
  ratingLabels = $(".rating-star");
  $(ratingLabels).each( function(index, value) {
      let ratingScore = $(this).data("rating-score") / 2;
      $(this).starRating({
          initialRating: ratingScore,
          readOnly: true,
          starSize: 15,
      });
  });
</script>