{% extends "base.html" %}

{% set display_name = user_display(profile.user) %}
{% set username  = profile.user.username %}
{% set accounts = social_accounts(profile.user) %}

{% block body_attributes %}{% endblock %}

{% block bodyclass %}profile profile-display{% endblock %}

{% block title %}{{ page_title(profile.user) }}{% endblock %}

{% block site_css %}
    {{ super() }}
    {{ css('demostudio') }}
    {{ css('jquery-ui') }}
    {{ css('profile') }}
{% endblock %}

{% block site_js %}
    {{ super() }}
    {{ js('demostudio') }}
{% endblock %}

{% macro account(profile, site_name, site_meta) %}
  {% if profile.websites[site_name] %}
    <li class="{{ site_name }}"><i class="{{ site_meta.fa_icon }}" aria-hidden="true"></i><a href="{{ profile.websites[site_name] }}" rel="me external" class="url">{{ site_meta.label }}</a></li>
  {% endif %}
{% endmacro %}

{% block content %}
<section id="content">
<div class="wrap">

  <section id="content-main" class="full">
    <section id="profile-head" class="vcard">

      <div class="extra">
        <figure class="avatar">
          <img src="{{ profile.gravatar }}" alt="{{ profile.user.username }}" width="120" height="120" class="photo" />
        </figure>

        <ul class="links">
        {% for site_name, site_meta in profile.website_choices %}
          {% if site_name == 'github' %}
            {% if accounts.github and waffle.flag('github_login') %}
              {% for github_account in accounts.github %}{% if github_account.extra_data %}
              <li class="{{ site_name }}"><i class="{{ site_meta.fa_icon }}" aria-hidden="true"></i><a href="{{ github_account.get_profile_url() }}" rel="me external" class="url">{{ site_meta.label }}</a></li>
              {% endif %}{% endfor %}
            {% else %}
              {{ account(profile, site_name, site_meta) }}
            {% endif %}
          {% else %}
            {{ account(profile, site_name, site_meta) }}
          {% endif %}
        {% endfor %}
        </ul>
      </div>

      <div class="main">
        <h1 class="page-title">
            <span class="nickname">{{ profile.user.username }}</span>
            {% if profile.fullname %}
                <b>(<span class="fn">{{ profile.fullname }}</span>)</b>
            {% endif %}
            {% if user.is_authenticated and user.username == profile.user.username %}
                {% include 'socialaccount/snippets/login_service_icon.html' %}
            {% endif %}
        </h1>

        <div class="edit">
          {% if show_manage_roles_button %}
              {# TODO: Need a method to detect whether the logged in user can manage any roles, here #}
              <a href="{{ url('teamwork.views.user_roles', profile.user.username) }}" class="button neutral">{{ _("Manage Roles") }}<i aria-hidden="true" class="icon-users"></i></a>
          {% endif %}
          {{ ban_link(profile.user, request.user) }}
          <!-- Only shown for the user and admins -->
          {% if profile.allows_editing_by(request.user) and request.user == profile.user %}
              <a id="edit-profile" href="{{ url('users.profile_edit', username=profile.user.username) }}" class="button neutral">{{ _("Edit") }}<i aria-hidden="true" class="icon-pencil"></i></a>
              <button id="advanced-menu" class="neutral only-icon" {{ disabled_attr }} aria-haspopup="true" aria-owns="advanced-menu-submenu" aria-expanded="false"><span>{{ _('Advanced') }}</span><i aria-hidden="true" class="icon-cog"></i></button>
              <div class="submenu" id="advanced-menu-submenu">
                <!-- this page -->
                <div class="submenu-column">
                  <div class="title">{{ _('Manage') }}</div>
                  <ul>
                    <li><a href="{{ url('socialaccount_connections') }}" class="neutral">{{ _("Account connections") }}</a></li>
                    <li><a href="{{ url('authkeys.list') }}" class="neutral">{{ _("API keys") }}</a></li>
                    <li><a href="{{ url('account_email') }}" class="neutral">{{ _("Email addresses") }}</a></li>
                  </ul>
                </div>
              </div>
          {% endif %}
      </div>

      {% if profile.title or profile.organization or profile.location or profile.irc_nickname %}
      <ul class="info">
        {% if profile.title %}<li class="title">{{ profile.title }}</li>{% endif %}
        {% if profile.organization %}<li class="org">{{ profile.organization }}</li>{% endif %}
        {% if profile.location %}<li class="loc">{{ profile.location }}</li>{% endif %}
        {% if profile.irc_nickname %}<li class="irc">IRC: {{ profile.irc_nickname }}</li>{% endif %}
      </ul>
      {% endif %}

      <div class="bio">
        <p>{{ profile.bio | nl2br }}</p>
      </div>

        {% set tag_ns = 'profile:interest:' %}
        {% set tags = profile.tags.all_ns(tag_ns) %}
        {% if tags | length %}
        <div class="tags">
          <h2>{{ _("Interests") }}</h2>
          <ul class="int-taglist taglist">
            {% for tag in tags%}
                <li><span rel="tag">{{ tag.name.replace(tag_ns,'') }}</span></li>
            {% endfor %}
          </ul>
        </div>
        {% endif %}

        {% set tag_ns = 'profile:expertise:' %}
        {% set tags = profile.tags.all_ns(tag_ns) %}
        {% if tags | length %}
        <div class="tags">
          <h2>{{ _("Areas of Expertise") }}</h2>
          <ul class="exp-taglist taglist">
            {% for tag in tags%}
                <li><span rel="tag">{{ tag.name.replace(tag_ns,'') }}</span></li>
            {% endfor %}
          </ul>
        </div>
        {% endif %}

        <div class="memberSince">{{ _('Member since') }} {{ datetimeformat(profile.user.date_joined, format='date') }}</div>
      </div>
    </section>

    {% if waffle.flag('badger') and award_list %}
      <section id="profile-badges" class="profile-section">
        <h2>{{ _("Recent Badge Awards") }}</h2>
        {% include "badger/includes/awards_as_badges_list.html" %}
      </section>
    {% endif %}

    {% if demos_page.object_list|length %}
        <section id="profile-demos" class="profile-section">
            {{ submission_listing(
                request, demos_page.object_list, demos_page.has_other_pages(),
                demos_paginator, demos_page,
                _("Subscribe to a feed of {display_name}'s demos") | f(display_name=display_name),
                url('demos_feed_profile', format='atom', username=username), cols_per_row=4,
                show_submit=True
            ) }}
        </section>
    {% elif profile.user == request.user %}
        <section id="profile-demos" class="profile-section">
          <header class="gallery-head">
            <h2 class="count">{{ _("No Demos") }}</h2>
          </header>
          <p class="none">{% trans submit_url=url('kuma.demos.views.submit') %}You haven't submitted any web technology demos. Build something awesome and <a href="{{ submit_url }}">submit a demo</a>!{% endtrans %}</p>
        </section>
    {% endif %}

          <section id="docs-activity" class="profile-section">
            <header>
              <h2>{{ _("Recent Docs Activity") }}</h2>
            </header>

            {% if wiki_activity and wiki_activity|length %}
            <table class="activity">
              <thead>
                <th scope="col" class="page">{{ _("Page") }}</th>
                <th scope="col" class="date">{{ _("Date") }}</th>
                <th scope="col" class="summary">{{ _("Comment") }}</th>
              </thead>
              <tbody>
                {% for rev in wiki_activity %}
                {% set previous_rev = rev.get_previous() %}
                <tr>
                  <th scope="row">
                      <h3><a href="{{ rev.document.get_absolute_url() }}">{{ rev.document.title }}</a></h3>
                      <ul class="actions">
                          <li><a href="{{ rev.document.get_absolute_url() }}$edit" class="edit">{{ _("Edit page") }}</a></li>
                          <li>{% if previous_rev %}<a href="{{ rev.document.get_absolute_url() }}$compare?from={{ previous_rev.id }}&amp;to={{ rev.id }}" class="diff">{{ _("View complete diff") }}</a>{% endif %}</li>
                          <li><a href="{{ rev.document.get_absolute_url() }}$history" class="history">{{ _("View page history") }}</a></li>
                      </ul>
                  </th>
                  <td>{{ datetimeformat(rev.created, format='date') }}<br />
                      {{ datetimeformat(rev.created, format='time') }}</td>
                  {# TODO: auto-generate smart comment like "N words changed." #}
                  <td>{{ format_comment(rev) }}</td>
                </tr>
                {% endfor %}
              </tbody>
              <tfoot>
                      {# TODO: create user revision activity feed
                <tr>
                  <td colspan="3">
                      <a href="/index.php?title=Special:Contributions&feed=rss&target={{ profile.user.username | urlencode }}" rel="alternate" class="feed">{{ _("Feed") }}</a>
                  </td>
                </tr>
                      #}
              </tfoot>
            </table>

            <p><a href="{{ url('dashboards.revisions') }}?user={{ profile.user.username }}" class="button">{{ _('View all activity') }}</a></p>
            {% else %}

            {% if profile.user == request.user %}
                {% trans docs_url=devmo_url('Project:MDN/Contributing/Creating_and_editing_pages') %}
                <p class="none">You haven't contributed to any MDN docs. <a href="{{ docs_url }}">Pitch in!</a></p>
                {% endtrans %}
            {% else %}
                <p class="none">{{ _('This user has no activity.') }}</p>
            {% endif %}

          {% endif %}
          </section>

  </section><!-- /#content-main -->
</div>
</section>
{% endblock %}