{% load static %}
{% load i18n %}
{% load admin_url %}
{% load mastodon %}
{% load oauth_token %}
{% load truncate %}
{% load highlight %}
{% load thumb %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{ site_name }} - {{ item.title }}{% trans '的标记' %}</title>
  {% include "common_libs.html" with jquery=0 %}
</head>

<body>
  <div id="page-wrapper">
    <div id="content-wrapper">
      {% include "partial/_navbar.html" %}

      <section id="content">
        <div class="grid">
          <div class="grid__main" id="main">
            <div class="main-section-wrapper">
              <div class="entity-marks">
                <h5 class="entity-marks__title entity-marks__title--stand-alone">
                  <a href="{% url 'catalog:retrieve' item.url_path item.uuid %}">{{ item.title }}</a>{% trans ' 的标记' %}
                </h5>
                <ul class="entity-marks__mark-list">
                  {% for others_mark in marks %}
                  <li class="entity-marks__mark">
                    <a href="{% url 'journal:user_profile' others_mark.owner.mastodon_username %}" class="entity-marks__owner-link">{{ others_mark.owner.username }}</a>

                    <span>{{ others_mark.mark.get_status_display }}</span>

                    {% if others_mark.mark.rating %}
                    <span class="entity-marks__rating-star rating-star" data-rating-score="{{ others_mark.mark.rating  }}"></span>
                    {% endif %}

                    {% if others_mark.mark.visibility > 0 %}
                    <span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M17,8.48h-.73V6.27a6.27,6.27,0,1,0-12.53,0V8.48H3a.67.67,0,0,0-.67.67V19.33A.67.67,0,0,0,3,20H17a.67.67,0,0,0,.67-.67V9.15A.67.67,0,0,0,17,8.48ZM6.42,6.27h0a3.57,3.57,0,0,1,7.14,0h0V8.48H6.42Z"/></svg></span>
                    {% endif %}

                    {% if others_mark.metadata.shared_link %}
                    <a href="{{ others_mark.metadata.shared_link }}" target="_blank"><span class="entity-marks__mark-time">{{ others_mark.mark.created_time|date }}</span></a>
                    {% else %}
                    <span class="entity-marks__mark-time">{{ others_mark.mark.created_time|date }}</span>
                    {% endif %}

                    {% if others_mark.mark.text %}
                    <p class="entity-marks__mark-content">{{ others_mark.mark.comment_html|safe }}</p>
                    {% endif %}
                  </li>
                  {% empty %}

                  <div> {% trans '暂无标记' %} </div>

                  {% endfor %}
                </ul>
              </div>
              <div class="pagination">

                {% if marks.pagination.has_prev %}
                <a href="?page=1"
                class="pagination__nav-link pagination__nav-link">&laquo;</a>
                <a href="?page={{ marks.previous_page_number }}"
                class="pagination__nav-link pagination__nav-link--right-margin pagination__nav-link">&lsaquo;</a>
                {% endif %}

                {% for page in marks.pagination.page_range %}

                {% if page == marks.pagination.current_page %}
                <a href="?page={{ page }}"
                class="pagination__page-link pagination__page-link--current">{{ page }}</a>
                {% else %}
                <a href="?page={{ page }}"
                class="pagination__page-link">{{ page }}</a>
                {% endif %}

                {% endfor %}

                {% if marks.pagination.has_next %}
                <a href="?page={{ marks.next_page_number }}"
                class="pagination__nav-link pagination__nav-link--left-margin">&rsaquo;</a>
                <a href="?page={{ marks.pagination.last_page }}"
                class="pagination__nav-link">&raquo;</a>
                {% endif %}

              </div>
            </div>
          </div>

          <div class="grid__aside" id="aside">
            {% include "sidebar_item.html" %}
          </div>
        </div>
      </section>
    </div>
    {% include "partial/_footer.html" %}
  </div>
</body>
</html>
