{% extends "base.html" %}
{% load i18n %}
{% load humanize %}
{% load icons %}
{% load urlformat %}
{% load metrics %}

{% block breadcrumbs %}
<li><a href="{% url "user_list" %}">{% trans "Users" %}</a></li>
<li><a href="{{ page_profile.get_absolute_url }}">{{ page_profile.get_user_name }}</a></li>
{% endblock %}

{% block content %}

<div class="user-page text-center">
    <img class="avatar w128" src="{% url 'user_avatar' user=page_user.username size=128 %}" alt="{% trans "User avatar" %}" />
    <h3>{{ page_user }}</h3>
    <p>
        <span class="middle-dot-divider">@{{ page_user.username }}</span>
        <span class="middle-dot-divider">{% blocktrans with date=page_user.date_joined|date:"DATE_FORMAT" %}Joined on {{ date }}{% endblocktrans %}</span>
        {% if page_profile.company %}
          <span class="middle-dot-divider">
            <span class="profile-icon">{% icon "domain.svg" %}</span> {{ page_profile.company }}
          </span>
        {% endif %}
        {% if page_profile.location %}
          <span class="middle-dot-divider">
            <span class="profile-icon">{% icon "map-marker.svg" %}</span> {{ page_profile.location }}
          </span>
        {% endif %}
    </p>
    {% if page_profile.translated or page_profile.suggested or page_profile.uploaded %}
    <p>
        {% if page_profile.translated %}
            <span class="middle-dot-divider">
                {% blocktrans count cnt=page_profile.translated with count=page_profile.translated|intcomma %}{{ count }} translation{% plural %}{{ count }} translations{% endblocktrans %}
            </span>
        {% endif %}
        {% if page_profile.suggested %}
            <span class="middle-dot-divider">
                {% blocktrans count cnt=page_profile.suggested with count=page_profile.suggested|intcomma %}{{ count }} suggestion{% plural %}{{ count }} suggestions{% endblocktrans %}
            </span>
        {% endif %}
        {% with pending_suggestions=page_user.suggestion_set.count %}
        {% if pending_suggestions %}
            <span class="middle-dot-divider">
                <a href="{% url 'user_suggestions' user=page_user.username %}">
                    {% blocktrans count cnt=pending_suggestions with count=pending_suggestions|intcomma %}{{ count }} pending suggestion{% plural %}{{ count }} pending suggestions{% endblocktrans %}
                </a>
            </span>
        {% endif %}
        {% endwith %}
        {% if page_profile.uploaded %}
            <span class="middle-dot-divider">
                {% blocktrans count cnt=page_profile.uploaded with count=page_profile.uploaded|intcomma %}{{ count }} screenshot{% plural %}{{ count }} screenshots{% endblocktrans %}
            </span>
        {% endif %}
        {% if page_profile.commented %}
            <span class="middle-dot-divider">
                {% blocktrans count cnt=page_profile.commented with count=page_profile.commented|intcomma %}{{ count }} comment{% plural %}{{ count }} comments{% endblocktrans %}
            </span>
        {% endif %}
    </p>
    {% endif %}
    {% if page_profile.website or page_profile.public_email or page_profile.github or page_profile.twitter or page_profile.linkedin or page_profile.liberapay or page_profile.fediverse or page_profile.codesite %}
      <p>
        {% if page_profile.website %}
          <span class="middle-dot-divider">
            <span class="profile-icon">{% icon "link.svg" %}</span> <a href="{{ page_profile.website }}" rel="ugc">{{ page_profile.website | urlformat }}</a>
          </span>
        {% endif %}
        {% if page_profile.public_email %}
          <span class="middle-dot-divider">
            <span class="profile-icon">{% icon "email.svg" %}</span> <a href="mailto:{{ page_profile.public_email }}" rel="ugc">{{ page_profile.public_email }}</a>
          </span>
        {% endif %}
        {% if page_profile.liberapay %}
          <span class="middle-dot-divider">
            <span class="profile-icon">{% icon "liberapay.svg" %}</span> <a href="https://liberapay.org/{{ page_profile.liberapay }}" rel="ugc">{{ page_profile.liberapay }}</a>
          </span>
        {% endif %}
        {% if page_profile.fediverse %}
          <span class="middle-dot-divider">
            <span class="profile-icon">{% icon "fediverse.svg" %}</span> <a href="{{ page_profile.fediverse }}" rel="ugc">{{ page_profile.fediverse | urlformat }}</a>
          </span>
        {% endif %}
        {% if page_profile.github %}
          <span class="middle-dot-divider">
            <span class="profile-icon">{% icon "github.svg" %}</span> <a href="https://github.com/{{ page_profile.github }}" rel="ugc">{{ page_profile.github }}</a>
          </span>
        {% endif %}
        {% if page_profile.codesite %}
          <span class="middle-dot-divider">
            <span class="profile-icon">{% icon "source.svg" %}</span> <a href="{{ page_profile.codesite }}" rel="ugc">{{ page_profile.codesite | urlformat }}</a>
          </span>
        {% endif %}
        {% if page_profile.twitter %}
          <span class="middle-dot-divider">
            <span class="profile-icon">{% icon "twitter.svg" %}</span> <a href="https://twitter.com/{{ page_profile.twitter }}" rel="ugc">{{ page_profile.twitter }}</a>
          </span>
        {% endif %}
        {% if page_profile.linkedin %}
          <span class="middle-dot-divider">
            <span class="profile-icon">{% icon "linkedin.svg" %}</span> <a href="https://www.linkedin.com/in/{{ page_profile.linkedin }}/" rel="ugc">{{ page_profile.linkedin }}</a>
          </span>
        {% endif %}
      </p>
    {% endif %}
    {% if user_languages %}
    <p>
        {% for language in user_languages %}
            <span class="middle-dot-divider">
                <a href="{{ language.get_absolute_url }}">{{ language }}</a>
            </span>
        {% endfor %}
    </p>
    {% endif %}
</div>

<ul class="nav nav-pills nav-center">
<li class="active"><a data-toggle="tab" href="#contributed">{% trans "Projects with contribution" %}</a></li>
<li><a data-toggle="tab" href="#managed">{% trans "Managed projects" %}</a></li>
<li><a data-toggle="tab" href="#watched">{% trans "Watched projects" %}</a></li>
<li><a data-toggle="tab" href="#activity">{% trans "Activity" %}</a></li>
<li><a data-toggle="tab" href="#changes">{% trans "Recent changes" %}</a></li>
</ul>

<div class="tab-content">

<div class="tab-pane active" id="contributed">
<div class="list-group">
{% include "list-projects.html" with projects=user_projects %}
</div>
</div>

<div class="tab-pane" id="managed">
<div class="list-group">
{% include "list-projects.html" with projects=owned_projects %}
</div>
</div>

<div class="tab-pane" id="watched">
<div class="list-group">
{% include "list-projects.html" with projects=watched_projects %}
</div>
</div>

<div class="tab-pane" id="activity">

{% include "snippets/activity.html" with metrics=page_user|metrics %}

</div>

<div class="tab-pane" id="changes">
    {% include "last-changes-content.html" %}
    <a class="btn btn-link" href="{% url 'changes' %}?{{ last_changes_url }}">{% trans "Browse all changes for user" %}</a>
</div>
</div>

{% endblock %}
