{% extends "misago/profile/base.html" %}
{% load i18n misago_avatars %}


{% block title %}{% trans "Username history" %} | {{ block.super }}{% endblock %}


{% block og-title %}{% trans "Username history" %} | {{ block.super }}{% endblock %}


{% block section %}
<div class="profile-username-history">

  <nav class="toolbar">
    <h3 class="toolbar-left">
      {% if is_authenticated_user %}
        {% blocktrans trimmed count changes=count %}
          Your username was changed {{ changes }} time.
        {% plural %}
          Your username was changed {{ changes }} times.
        {% endblocktrans %}
      {% else %}
        {% blocktrans trimmed count changes=count with username=profile %}
          {{ username }}'s username was changed {{ changes }} time.
        {% plural %}
          {{ username }}'s username was changed {{ changes }} times.
        {% endblocktrans %}
      {% endif %}
    </h3>
  </nav>

  <div class="username-history ui-ready">
    <ul class="list-group">
      {% for change in history %}
        <li class="list-group-item">
          <div class="username-change-avatar">
            {% if change.changed_by %}
              <a href="{{ change.changed_by.get_absolute_url }}">
                <img src="{{ change.changed_by|avatar:100 }}" alt="">
              </a>
            {% else %}
              <span>
                <img src="{{ BLANK_AVATAR_URL }}" width="100" height="100" alt="">
              </span>
            {% endif %}
          </div>
          <div class="username-change-author">
            {% if change.changed_by %}
            <a href="{{ change.changed_by.get_absolute_url }}" class="item-title">
              {{ change.changed_by.username }}
            </a>
            {% else %}
            <span class="item-title">
              {{ change.changed_by_username }}
            </span>
            {% endif %}
          </div>
          <div class="username-change">
            <span class="change-old-username">
              {{ change.old_username }}
            </span>
            <span class="material-icon">
              arrow_forward
            </span>
            <span class="change-new-username">
              {{ change.new_username }}
            </span>
          </div>
          <div class="username-change-date">
            <abbr title="{{ change.changed_on|date:"DATETIME_FORMAT" }}">
              {{ change.changed_on|date }}
            </abbr>
          </div>
        </li>
      {% empty %}
        <li class="list-group-item empty-message">
          {% if is_authenticated_user %}
            {% trans "Your username was never changed." %}
          {% else %}
            {% blocktrans trimmed with username=profile.username %}
              {{ username }}'s username was never changed.
            {% endblocktrans %}
          {% endif %}
        </li>
      {% endfor %}
    </ul>
  </div>
</div>
{% endblock section %}