{% load static %}
{% load i18n %}
{% load humanize %}
{% load mastodon %}
{% load thumb %}
{% load collection %}
{% load bleach_tags %}
{% load duration %}
<aside class="grid__aside sidebar">
  {% if request.user.unread_announcements %}
    <section class="announcement">
      <article>
        <details open>
          <summary>{% trans "Unread Announcements" %}</summary>
          {% for ann in request.user.unread_announcements %}<div>{{ ann.html }}</div>{% endfor %}
          <form action="{% url 'users:mark_announcements_read' %}" method="post">
            {% csrf_token %}
            <input type="submit"
                   class="secondary outline"
                   value="{% trans 'mark all as read' %}">
          </form>
        </details>
      </article>
    </section>
  {% endif %}
  {% if show_profile %}
    <section class="profile">
      <article>
        <details class="auto-collapse" open>
          <summary>
            <div>
              <div class="avatar">
                <a href="{{ identity.url }}" onclick="window.location = this.href;">
                  {% comment %} onclick to workaround webkit issue with <a />  in <summary /> {% endcomment %}
                  <img src="{{ identity.avatar|relative_uri }}" alt="">
                </a>
              </div>
              <div>
                <hgroup>
                  <h6 class="nickname">{{ identity.display_name }}</h6>
                  <div>
                    <span class="handler">@{{ identity.full_handle }}</span>
                  </div>
                </hgroup>
              </div>
            </div>
          </summary>
          <span class="action">
            {% if identity.user == request.user %}
              {% if identity.locked %}
                <span>
                  <a title="{% trans "approving followers manually" %}">
                    <i class="fa-solid fa-user-shield"></i>
                  </a>
                </span>
              {% endif %}
              {% if identity.user.mastodon_account %}
                <span>
                  <a href="{{ identity.user.mastodon_account.url }}"
                     target="_blank"
                     rel="noopener"
                     title="@{{ identity.user.mastodon_acct }}">
                    <i class="fa-brands fa-mastodon"></i>
                  </a>
                </span>
              {% endif %}
            {% elif request.user.is_authenticated %}
              {% include 'users/profile_actions.html' %}
            {% endif %}
          </span>
          <p>
            {{ identity.summary|bleach:"a,p,span,br"|default:"<br>" }}
          </p>
        </details>
      </article>
    </section>
  {% endif %}
  {% if show_progress %}
    <section>
      <article>
        <details {% if identity.featured_collections.all %}open{% endif %}>
          <summary>{% trans 'Current Targets' %}</summary>
          {% for featured_collection in identity.featured_collections.all %}
            {% user_visibility_of featured_collection as visible %}
            {% if visible %}
              {% user_stats_of collection=featured_collection identity=identity as stats %}
              <div>
                <a href="{{ featured_collection.collection.url }}">{{ featured_collection.collection.title }}</a> <small>{{ stats.complete }} / {{ stats.total }}</small>
                <br>
                <progress value="{{ stats.percentage }}" max="100" />
              </div>
            {% endif %}
          {% empty %}
            {% if request.user == identity.user %}
              <div class="empty">{% trans "Set a collection as target, its progress will show up here." %}</div>
            {% else %}
              <div class="empty">{% trans "nothing so far." %}</div>
            {% endif %}
          {% endfor %}
        </details>
      </article>
    </section>
  {% endif %}
  {% if recent_podcast_episodes %}
    <section>
      <article>
        <details class="auto-collapse" open>
          <summary>{% trans 'Recent podcast episodes' %}</summary>
          <div class="shelf">
            <ul class="cards">
              {% for item in recent_podcast_episodes %}
                <li class="card">
                  <a class="episode"
                     data-uuid="{{ item.uuid }}"
                     data-media="{{ item.media_url }}"
                     data-cover="{{ item.cover_url|default:item.program.cover.url }}"
                     data-title="{{ item.title }}"
                     data-album="{{ item.program.title }}"
                     data-hosts="{{ item.program.hosts|join:' / ' }}"
                     {% if request.user.is_authenticated %} data-comment-href="{% url 'journal:comment' item.uuid %}" {% endif %}
                     data-position="0"
                     href="{{ item.url }}"
                     title="{{ item.title }}">
                    <img src="{{ item.cover_image_url|default:item.cover.url|relative_uri }}"
                         alt="{{ item.title }}"
                         loading="lazy">
                    <div class="card-title">
                      <i class="fa-solid fa-circle-play"></i> {{ item.title }}
                    </div>
                  </a>
                </li>
              {% endfor %}
            </ul>
          </div>
        </details>
      </article>
    </section>
  {% endif %}
  {% if books_in_progress %}
    <section>
      <article>
        <details class="auto-collapse" open>
          <summary>{% trans 'Currently reading' %}</summary>
          <div class="shelf">
            <ul class="cards">
              {% for item in books_in_progress %}
                <li class="card">
                  <a href="{{ item.url }}" title="{{ item.title }}">
                    <img src="{{ item.cover|thumb:'normal' }}"
                         alt="{{ item.title }}"
                         loading="lazy">
                    <div class="card-title">{{ item.title }}</div>
                  </a>
                </li>
              {% endfor %}
            </ul>
          </div>
        </details>
      </article>
    </section>
  {% endif %}
  {% if tvshows_in_progress %}
    <section>
      <article>
        <details class="auto-collapse" open>
          <summary>{% trans 'Currently watching' %}</summary>
          <div class="shelf">
            <ul class="cards">
              {% for item in tvshows_in_progress %}
                <li class="card">
                  <a href="{{ item.url }}" title="{{ item.title }}">
                    <img src="{{ item.cover|thumb:'normal' }}"
                         alt="{{ item.title }}"
                         loading="lazy">
                    <div class="card-title">{{ item.title }}</div>
                  </a>
                </li>
              {% endfor %}
            </ul>
          </div>
        </details>
      </article>
    </section>
  {% endif %}
  {% if top_tags %}
    <section>
      <article>
        <details {% if top_tags %}class="auto-collapse" open{% endif %}>
          <summary>{% trans 'Common Tags' %}</summary>
          <div class="tag-list">
            {% for t in top_tags %}
              <span>
                <a href="{% url 'journal:user_tag_member_list' identity.user.handler t.title %}">{{ t.title }}</a>
                <small>({{ t.total }})</small>
              </span>
            {% empty %}
              <div class="empty">{% trans "nothing so far." %}</div>
            {% endfor %}
          </div>
          <small>
            {% if top_tags %}
              <a href="{% url 'journal:user_tag_list' identity.user.handler %}">...{% trans 'show more' %}</a>
            {% endif %}
          </small>
        </details>
      </article>
    </section>
  {% endif %}
  {% if recent_posts is not None %}
    <section>
      <article>
        <details class="auto-collapse" open>
          <summary>{% trans 'Recent Posts' %}</summary>
          <div style="font-size:80%">{% include "posts.html" with posts=recent_posts %}</div>
        </details>
      </article>
    </section>
  {% endif %}
  {% if sidebar_template %}
    {% include sidebar_template %}
  {% endif %}
  {% if request.user.is_superuser and identity.local and request.user.identity != identity and request.GET.sudo %}
    <section class="hijacker">
      <form action="{% url 'hijack:acquire' %}" method="post">
        {% csrf_token %}
        <input type="hidden" name="user_pk" value="{{ identity.user.pk }}">
        <button type="submit">Debug as them</button>
        <button _="on click hide .hijacker then halt default">Hide</button>
        <input type="hidden" name="next" value="{{ request.path }}">
      </form>
    </section>
  {% endif %}
</aside>