{% set page_name = "user_detail" %}
{% import "components/home.html" as home with context %}
{% extends "layout/basic.html" %}
{% block content %}
<div class="row">
  <div class="medium-9 columns">
    <div class="section">
      <div class="profile-header user-profile-bg--{{ udoc.background_img }}">
        <div class="profile-header__content">
          <div class="media">
            <div class="media__left">
              <img src="{{ udoc.gravatar|gravatar_url }}" width="120" height="120" class="large user-profile-avatar">
            </div>
            <div class="media__body profile-header__main">
              <h1>
                {{ udoc['uname'] }}
                <small>({{ _('UID') }}: {{ udoc['_id'] }})</small>
              </h1>
              <p>
                {{ _('Registered at') }} {{ datetime_span(udoc['regat'])|safe }},
                {{ _('last login at') }} {{ datetime_span(udoc['loginat'])|safe }},
              {% if sdoc %}
                {{ _('last active at') }} {{ datetime_span(sdoc['updateAt'])|safe }}.
              {% else %}
                {{ _('currently offline') }}.
              {% endif %}
              </p>
              <p>{{ _('Solved {0} problems, RP: {1} (No. {2})').format(udoc.nAccept|default(0), udoc['rp']|default(0.0)|round(2), udoc['rank']|default('?')) }}</p>
              <div class="profile-header__contact-bar">
              {% if is_self_profile %}
                <a class="profile-header__contact-item" href="/home/account#setting_info" data-tooltip="{{ _('Edit Profile') }}">
                  <span class="icon icon-edit"></span>
                </a>
              {% endif %}
                <a class="profile-header__contact-item" href="/home/messages?target_uid={{ udoc['_id'] }}" target="_blank" data-tooltip="{{ _('Send Message') }}">
                  <span class="icon icon-comment--multiple"></span>
                </a>
              {% if udoc['mail'] %}
                <a class="profile-header__contact-item" href="javascript:;" name="profile_contact_copy" data-content="{{ udoc['mail'] | base64_encode }}" data-tooltip="{{ _('Copy Email') }}">
                  <span class="icon icon-mail"></span>
                </a>
              {% endif %}
              {% if udoc['qq'] %}
                <a class="profile-header__contact-item" href="javascript:;" name="profile_contact_copy" data-content="{{ udoc['qq'] | base64_encode }}" data-tooltip="{{ _('Copy QQ Number') }}">
                  <span class="icon icon-qq"></span>
                </a>
              {% endif %}
              {% if udoc['wechat'] %}
                <a class="profile-header__contact-item" href="javascript:;" name="profile_contact_copy" data-content="{{ udoc['wechat'] | base64_encode }}" data-tooltip="{{ _('Copy WeChat Account') }}">
                  <span class="icon icon-wechat"></span>
                </a>
              {% endif %}
              {% if udoc.gender and udoc.gender != builtin.USER_GENDER_OTHER %}
                <span
                  class="profile-header__contact-item"
                  data-tooltip="{{ builtin.USER_GENDER_RANGE[udoc.gender] }}"
                >
                  {{ builtin.USER_GENDER_ICONS[udoc.gender] }}
                </span>
              {% endif %}
              {% if handler.has_perm(perm.PERM_MOD_BADGE) %}
                <span
                  class="profile-header__contact-item user-profile-badge badge--mod"
                  data-tooltip="{{ _('{0} is a moderator of this domain.').format(_('She' if udoc.gender == 1 else 'He')) }}"
                >
                  MOD
                </span>
              {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="profile-content">
        <div class="section__tab-container immersive">
          <ul class="section__tabs">
            {{ udoc.bio|markdown|safe }}
          </ul>
        </div>
      </div>
    </div>
  </div>
  <div class="medium-3 columns">
  {% if is_self_profile %}
    {{ home.render_sidebar() }}
  {% endif %}
    <div class="section side">
      <div class="section__body">
        <div class="balancer sidebar-user-stat">
          <div class="balancer__body">
            <div class="numbox">
              <div class="numbox__num medium">{{ udoc.nAccept or 0 }}</div>
              <div class="numbox__text">{{ _('Accepted') }}</div>
            </div>
          </div>
          <div class="balancer__body">
            <div class="numbox">
              <div class="numbox__num medium">{{ udoc.nLiked or 0 }}</div>
              <div class="numbox__text">{{ _('Solutions Liked') }}</div>
            </div>
          </div>
          <div class="balancer__body">
            <div class="numbox">
              <div class="numbox__num medium">{{ udoc.nProblems or 0 }}</div>
              <div class="numbox__text">{{ _('Upload Problem') }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}