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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  {% if user == request.user %}
  <title>{{ site_name }} - {% trans '我的个人主页' %}</title>
  {% else %}
  <title>{{ site_name }} - {{user.display_name}}</title>
  {% endif %}
  <link rel="alternate" type="application/rss+xml" title="{{ site_name }} - {{ user.mastodon_username }}的评论" href="{{ request.build_absolute_uri }}feed/reviews/">

  {% include "common_libs.html" with jquery=0 %}
  <script src="{% static 'js/mastodon.js' %}" defer></script>
  <script src="{% static 'js/home.js' %}" defer></script>
</head>

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

      <section id="content">
        <div class="grid grid--reverse-order">
          <div class="grid__main grid__main--reverse-order">

            <div class="main-section-wrapper sortable">

              {% for category, category_shelves in shelf_list.items %}
              {% for shelf_type, shelf in category_shelves.items %}

              <div class="entity-sort" id="{{ category }}_{{ shelf_type }}">
                <h5 class="entity-sort__label">
                  {{ shelf.title }}
                </h5>
                <span class="entity-sort__count">
                  {{ shelf.count }}
                </span>
                {% if shelf.count > 5 %}
                <a href="{% if shelf_type == 'reviewed' %}{% url 'journal:user_review_list' user.mastodon_username  category %}{% else %}{% url 'journal:user_mark_list' user.mastodon_username shelf_type category %}{% endif %}" class="entity-sort__more-link">{% trans '更多' %}</a>
                {% endif %}
                <ul class="entity-sort__entity-list">
                  {% for member in shelf.members %}
                  <li class="entity-sort__entity">
                    <a href="{% if shelf_type == 'reviewed' %}{{ member.url }}{% else %}{{ member.item.url }}{% endif %}">
                      <img src="{{ member.item.cover.url }}" alt="{{ member.item.title }}" class="entity-sort__entity-img">
                      <div class="entity-sort__entity-name" title="{{ member.item.title }}"> {{ member.item.title }}</div>
                    </a>
                  </li>
                  {% empty %}
                  <div>暂无记录</div>
                  {% endfor %}
                </ul>
              </div>
              {% endfor %}
              {% endfor %}


              <div class="entity-sort" id="collection_created">
                <h5 class="entity-sort__label">
                  {% trans '创建的收藏单' %}
                </h5>
                <span class="entity-sort__count">
                  {{ collections_count }}
                </span>
                {% if collections_count > 5 %}
                <a href="{% url 'journal:user_collection_list' user.mastodon_username %}"
                class="entity-sort__more-link">{% trans '更多' %}</a>
                {% endif %}
                {% if user == request.user %}
                <a href="{% url 'journal:collection_create' %}"class="entity-sort__more-link">{% trans '新建' %}</a>
                {% endif %}

                <ul class="entity-sort__entity-list">
                  {% for collection in collections %}
                  <li class="entity-sort__entity">
                    <a href="{{ collection.url }}">
                      <img src="{{ collection.cover|thumb:'normal' }}"
                      alt="{{collection.title}}" class="entity-sort__entity-img">
                      <span class="entity-sort__entity-name"
                      title="{{collection.title}}">{{ collection.title }}</span>
                    </a>
                  </li>
                  {% empty %}
                  <div>暂无记录</div>
                  {% endfor %}
                </ul>
              </div>

              <div class="entity-sort" id="collection_marked">
                <h5 class="entity-sort__label">
                  {% trans '关注的收藏单' %}
                </h5>
                <span class="entity-sort__count">
                  {{ liked_collections_count }}
                </span>
                {% if liked_collections_count > 5 %}
                <a href="{% url 'journal:user_liked_collection_list' user.mastodon_username %}"
                class="entity-sort__more-link">{% trans '更多' %}</a>
                {% endif %}

                <ul class="entity-sort__entity-list">
                  {% for collection in liked_collections %}
                  <li class="entity-sort__entity">
                    <a href="{{ collection.url }}">
                      <img src="{{ collection.cover|thumb:'normal' }}"
                      alt="{{collection.title}}" class="entity-sort__entity-img">
                      <span class="entity-sort__entity-name"
                      title="{{collection.title}}">{{ collection.title }}</span>
                    </a>
                  </li>
                  {% empty %}
                  <div>暂无记录</div>
                  {% endfor %}
                </ul>
              </div>

            </div>

            {% if user == request.user %}

            <div class="entity-sort-control">
              <div class="entity-sort-control__button" id="sortEditButton">
                <span class="entity-sort-control__text" id="sortEditText">
                  {% trans '编辑布局' %}
                </span>
                <span class="entity-sort-control__text" id="sortSaveText" style="display: none;">
                  {% trans '保存' %}
                </span>
                <span class="icon-edit" id="sortEditIcon">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 383.947 383.947">
                    <polygon points="0,303.947 0,383.947 80,383.947 316.053,147.893 236.053,67.893    " />
                    <path
                    d="M377.707,56.053L327.893,6.24c-8.32-8.32-21.867-8.32-30.187,0l-39.04,39.04l80,80l39.04-39.04     C386.027,77.92,386.027,64.373,377.707,56.053z" />
                  </svg>
                </span>
                <span class="icon-save" id="sortSaveIcon" style="display: none;">
                  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 384 384" >
                    <path
                    d="M298.667,0h-256C19.093,0,0,19.093,0,42.667v298.667C0,364.907,19.093,384,42.667,384h298.667    C364.907,384,384,364.907,384,341.333v-256L298.667,0z M192,341.333c-35.307,0-64-28.693-64-64c0-35.307,28.693-64,64-64    s64,28.693,64,64C256,312.64,227.307,341.333,192,341.333z M256,128H42.667V42.667H256V128z" />
                  </svg>
                </span>
              </div>
              <div class="entity-sort-control__button" id="sortExitButton" style="display: none;">
                <span class="entity-sort-control__text">
                  {% trans '取消' %}
                </span>
              </div>
            </div>
            <div class="entity-sort-control__button entity-sort-control__button--float-right" id="toggleDisplayButtonTemplate" style="display: none;">
              <span class="showText" style="display: none;">
                {% trans '显示' %}
              </span>
              <span class="hideText" style="display: none;">
                {% trans '隐藏' %}
              </span>
            </div>
            <form action="{% url 'users:set_layout' %}" method="post" id="sortForm">
              {% csrf_token %}
              <input type="hidden" name="layout">
            </form>
            <script src="https://cdn.staticfile.org/html5sortable/0.13.3/html5sortable.min.js" crossorigin="anonymous"></script>
            <script src="{% static 'js/sort_layout.js' %}"></script>
            {% endif %}

            {{ layout|json_script:"layout-data" }}
            <script>
              const initialLayoutData = JSON.parse(document.getElementById('layout-data').textContent);
                            // initialize sort element visibility and order
              initialLayoutData.forEach(elem => {
                // set visiblity
                $('#' + elem.id).data('visibility', elem.visibility);
                if (!elem.visibility) {
                  $('#' + elem.id).hide();
                }
                // order
                $('#' + elem.id).appendTo('.main-section-wrapper');
              });
            </script>

          </div>

          {% include "partial/_sidebar.html" %}
        </div>
      </section>
    </div>
    {% include "partial/_footer.html" %}
  </div>

  {% if unread_announcements %}
  {% include "partial/_announcement.html" %}
  {% endif %}
</body>
</html>
