{% load static %}
{% load i18n %}
{% load mastodon %}
{% load thumb %}
<!DOCTYPE html>
<html lang="zh" class="classic-page{% if me %} nav-page-home{% endif %}">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% if me %}
      <title>{{ site_name }} - {% trans 'Home' %}</title>
    {% else %}
      <title>{{ site_name }} - {{ identity.display_name }}</title>
    {% endif %}
    <meta property="og:title"
          content="{{ site_name }} - @{{ identity.handle }}">
    <meta property="og:url" content="{{ identity.url }}">
    <meta property="og:image" content="{{ identity.avatar }}">
    <meta property="og:site_name" content="{{ site_name }}">
    {% if not identity.anonymous_viewable %}<meta name="robots" content="noindex">{% endif %}
    <link rel="alternate"
          type="application/rss+xml"
          title="{{ site_name }} - @{{ identity.handle }} - Reviews"
          href="{{ identity.url }}feed/reviews/">
    {% include "common_libs.html" %}
    <script src="{% static 'js/calendar_yearview_blocks.js' %}" defer></script>
    <link href="{% static 'css/calendar_yearview_blocks.css' %}"
          media="all"
          rel="stylesheet" />
  </head>
  <body>
    {% if request.user == identity.user %}
      {% include "_header.html" %}
    {% else %}
      {% include "_header.html" %}
    {% endif %}
    <main>
      <div class="grid__main">
        <div class="sortable">
          {% if request.user.is_authenticated %}
            <section class="entity-sort shelf" id="calendar_grid">
              <span class="action">
                <span>
                  <a _="on click set el to the next
                    <ul/>
                  then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
                </span>
                <span>
                  <a _="on click set el to the next
                    <ul/>
                  then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
                </span>
              </span>
              <h5>
                {% trans "calendar" %}
                {% if year %}
                  <small>
                    <a href="{% url 'journal:wrapped' year %}">{{ year }} {% trans "annual summary" %}</a>
                  </small>
                {% endif %}
              </h5>
              <ul class="calendar_view cards">
                <p style="text-align: center;">
                  <i class="fa-solid fa-compact-disc fa-spin loading"></i>
                </p>
              </ul>
              <span class="calendar_data"
                    hx-get="{% url 'journal:user_calendar_data' identity.handle %}"
                    hx-trigger="load"
                    hx-swap="innerHTML"
                    style="display:none"></span>
            </section>
          {% endif %}
          {% for category, category_shelves in shelf_list.items %}
            {% for shelf_type, shelf in category_shelves.items %}
              <section class="entity-sort shelf"
                       id="{{ category }}_{{ shelf_type }}"
                       {% if not shelf.count %}style="display:none;"{% endif %}>
                <span class="action">
                  <span>
                    <a _="on click set el to the next
                      <ul/>
                    then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
                  </span>
                  <span>
                    <a _="on click set el to the next
                      <ul/>
                    then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
                  </span>
                </span>
                <h5>
                  {{ shelf.title }}
                  <small>
                    <a href="{% if shelf_type == 'reviewed' %}{% url 'journal:user_review_list' identity.handle category %}{% else %}{% url 'journal:user_mark_list' identity.handle shelf_type category %}{% endif %}">{{ shelf.count }}</a>
                  </small>
                </h5>
                <ul class="cards">
                  {% for member in shelf.members %}
                    <li class="card">
                      <a href="{% if shelf_type == 'reviewed' %}{{ member.url }}{% else %}{{ member.item.url }}{% endif %}"
                         title="{{ member.item.display_title }}">
                        <img src="{{ member.item.cover|thumb:'normal' }}"
                             alt="{{ member.item.display_title }}"
                             loading="lazy">
                        <div>{{ member.item.display_title }}</div>
                      </a>
                    </li>
                  {% empty %}
                    <div>{% trans "nothing so far." %}</div>
                  {% endfor %}
                </ul>
              </section>
            {% endfor %}
          {% endfor %}
          <section class="entity-sort shelf"
                   id="collection_created"
                   {% if not collections_count %}style="display:none;"{% endif %}>
            <span class="action">
              <span>
                <a _="on click set el to the next
                  <ul/>
                then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
              </span>
              <span>
                <a _="on click set el to the next
                  <ul/>
                then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
              </span>
            </span>
            <h5>
              {% trans 'collection' %}
              <small>
                <a href="{% url 'journal:user_collection_list' identity.handle %}">{{ collections_count }}</a>
                {% if identity.user == request.user %}
                  <a href="{% url 'journal:collection_create' %}">
                    <i class="fa-regular fa-square-plus"></i>
                  </a>
                {% endif %}
              </small>
            </h5>
            <ul class="cards">
              {% for collection in collections %}
                <li class="card">
                  <a href="{{ collection.url }}" title="{{ collection.title }}">
                    <img src="{{ collection.cover|thumb:'normal' }}"
                         alt="{{ collection.title }}">
                    <div>{{ collection.title }}</div>
                  </a>
                </li>
              {% empty %}
                <div>{% trans "nothing so far." %}</div>
              {% endfor %}
            </ul>
          </section>
          <section class="entity-sort shelf"
                   id="collection_marked"
                   {% if not liked_collections_count %}style="display:none;"{% endif %}>
            <span class="action">
              <span>
                <a _="on click set el to the next
                  <ul/>
                then call el.scrollBy({left:-el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-left"></i></a>
              </span>
              <span>
                <a _="on click set el to the next
                  <ul/>
                then call el.scrollBy({left:el.offsetWidth, behavior:'smooth'})"><i class="fa-solid fa-circle-right"></i></a>
              </span>
            </span>
            <h5>
              {% trans 'liked collection' %}
              <small>
                <a href="{% url 'journal:user_liked_collection_list' identity.handle %}">{{ liked_collections_count }}</a>
              </small>
            </h5>
            <ul class="cards">
              {% for collection in liked_collections %}
                <li class="card">
                  <a href="{{ collection.url }}" title="{{ collection.title }}">
                    <img src="{{ collection.cover|thumb:'normal' }}"
                         alt="{{ collection.title }}"
                         loading="lazy">
                    <div>{{ collection.title }}</div>
                  </a>
                </li>
              {% empty %}
                <div>{% trans "nothing so far." %}</div>
              {% endfor %}
            </ul>
          </section>
        </div>
        {% if identity.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 'edit layout' %}</span>
              <span class="entity-sort-control__text"
                    id="sortSaveText"
                    style="display: none">{% trans 'save' %}</span>
              <span class="icon-edit" id="sortEditIcon">
                <i class="fa-solid fa-pencil"></i>
              </span>
              <span class="icon-save" id="sortSaveIcon" style="display: none;">
                <i class="fa-regular fa-floppy-disk"></i>
              </span>
            </div>
            <div class="entity-sort-control__button"
                 id="sortExitButton"
                 style="display: none">
              <span class="entity-sort-control__text">{% trans 'cancel' %}</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 'show' %}</span>
            <span class="hideText" style="display: none;">{% trans 'hide' %}</span>
          </div>
          <form action="{% url 'users:set_layout' %}" method="post" id="sortForm">
            {% csrf_token %}
            <input type="hidden" name="name" value="profile">
            <input type="hidden" name="layout">
          </form>
          <script src="{{ cdn_url }}/npm/html5sortable@0.13.3/dist/html5sortable.min.js"></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);
        initialLayoutData.forEach(elem => {
          $('#' + elem.id).data('visibility', elem.visibility);
          if (!elem.visibility) {
            $('#' + elem.id).hide();
          }
          $('#' + elem.id).appendTo('.sortable');
        });
        </script>
      </div>
      {% include "_sidebar.html" with show_progress=1 show_profile=1 %}
    </main>
    {% include "_footer.html" %}
    {% if identity.user and identity.user.mastodon %}
      <a href="{{ identity.user.mastodon.url }}" rel="me" style="display:none">Mastodon verification</a>
    {% endif %}
  </body>
</html>
