{% extends "misago/userslists/base.html" %}
{% load i18n misago_avatars misago_batch misago_pagetitle misago_shorthands misago_stringutils %}


{% block title %}{% pagetitle rank.name page=paginator.page %} | {{ block.super }}{% endblock %}
{% block meta-description %}
{{ rank.description|default:"" }}
{% endblock %}


{% block meta-extra %}
{% if paginator.page > 1 %}
<link rel="canonical" href="{% url 'misago:users-rank' slug=rank.slug page=paginator.page %}" />
{% else %}
<link rel="canonical" href="{% url 'misago:users-rank' slug=rank.slug %}" />
{% endif %}
{% if paginator.previous > 1 %}
<link rel="prev" href="{% url 'misago:users-rank' slug=rank.slug page=paginator.previous %}" />
{% elif paginator.previous %}
<link rel="prev" href="{% url 'misago:users-rank' slug=rank.slug %}" />
{% endif %}
{% if paginator.next %}
<link rel="next" href="{% url 'misago:users-rank' slug=rank.slug page=paginator.next %}" />
{% endif %}
{% endblock meta-extra %}


{% block content %}
{{ block.super }}

<div class="rank-users-list{% if rank.css_class %} rank-users-{{ rank.css_class }}{% endif %}">
  <div class="container">

    {% if rank.description %}
      <section class="rank-description">
        <div class="page-lead {{ rank.description|escape|linebreaks|isdescriptionshort|iftrue:"lead" }}">
          {{ rank.description|escape|urlize|linebreaks|safe }}
        </div>
      </section>
    {% endif %}

    {% if paginator.count %}
      <section>
        <div class="users-cards-list ui-ready" itemscope itemtype="http://schema.org/ItemList">
          {% for row in users|batch:3 %}
            <div class="row">
              {% for user in row %}
                <div class="col-md-4">

                  <div class="user-card {% if rank.css_class %} user-card-{{ rank.css_class }}{% endif %}" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                    <div class="user-card-bg-image">
                      <img src="{{ user|avatar:400 }}" alt="" class="bg-image">

                      <div class="user-card-bg">
                        <div class="user-details">

                          <div class="user-avatar">
                            <a href="{{ user.get_absolute_url }}">
                              <img src="{{ user|avatar:400 }}" alt="">
                            </a>
                          </div>

                          <h4 class="user-name">
                            <a href="{{ user.get_absolute_url }}" class="item-title" itemprop="url">
                              <span itemprop="name">{{ user.username }}</span>
                            </a>
                          </h4>

                          <p class="user-subscript">
                            {% if user.title %}
                              <span class="user-title">{{ user.title }}</span>
                            {% endif %}
                            <span class="user-joined-on">
                              {% blocktrans trimmed with joined_on=user.joined_on|date %}
                                Joined on {{ joined_on }}
                              {% endblocktrans %}
                            </span>
                          </p>

                        </div>
                      </div>
                      <div class="user-card-stats">

                        <ul class="list-unstyled">
                          <li class="user-posts-count">
                            {% blocktrans trimmed count posts=user.posts %}
                              {{ posts }} post
                            {% plural %}
                              {{ posts }} posts
                            {% endblocktrans %}
                          </li>
                          <li class="user-threads-count">
                            {% blocktrans trimmed count threads=user.threads %}
                              {{ threads }} thread
                            {% plural %}
                              {{ threads }} threads
                            {% endblocktrans %}
                          </li>
                          <li class="user-followers-count">
                            {% blocktrans trimmed count followers=user.followers %}
                              {{ followers }} follower
                            {% plural %}
                              {{ followers }} followers
                            {% endblocktrans %}
                          </li>
                        </ul>

                      </div>
                    </div>

                    <meta itemprop="position" content="{{ paginator.before|add:forloop.counter }}" />
                  </div>

                </div>
              {% endfor %}
            </div>
          {% endfor %}
          <meta itemprop="numberOfItems" content="{{ paginator.count }}">
          <meta itemprop="itemListOrder" content="http://schema.org/ItemListOrderAscending">
        </div>

        {% if paginator.pages > 1 %}
          <div class="pager-undercontent">
            <nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
              <ul class="pager">
                {% if paginator.previous > 1 %}
                <li class="previous">
                  <a href="{% url 'misago:users-rank' slug=rank.slug page=paginator.previous %}" rel="prev" title="{% trans 'Go to previous page' %}">
                    <span aria-hidden="true" class="material-icon">
                      arrow_back
                    </span>
                  </a>
                </li>
                {% elif paginator.first %}
                <li class="previous">
                  <a href="{% url 'misago:users-rank' slug=rank.slug %}" rel="prev" title="{% trans 'Go to previous page' %}">
                    <span aria-hidden="true" class="material-icon">
                      arrow_back
                    </span>
                  </a>
                </li>
                {% endif %}
                {% if paginator.next %}
                <li class="next">
                  <a href="{% url 'misago:users-rank' slug=rank.slug page=paginator.next %}" rel="next" title="{% trans 'Go to next page' %}">
                    <span aria-hidden="true" class="material-icon">
                      arrow_forward
                    </span>
                  </a>
                </li>
                {% endif %}
              </ul>
            </nav>
          </div>
        {% endif %}
      </section>
    {% else %}
      <p class="lead">
        {% trans "There are no users with this rank at the moment." %}
      </p>
    {% endif %}

  </div>
</div>
{% endblock content %}