{% import "components/home.html" as home with context %}
{% import "components/problem.html" as problem with context %}
{% extends "layout/basic.html" %}
{% block content %}
{{ set(UiContext, 'udoc', udoc) }}
<style>
  .user-profile-bg {
    background-image : url("{{ udoc.backgroundImage }}");
  }
</style>
<div class="row">
  <div class="medium-9 columns">
    <div class="section">
      <div class="profile-header user-profile-bg">
        <div class="profile-header__content">
          <div class="media">
            <div class="media__left">
              <img src="{{ avatarUrl(udoc.avatar, 120) }}" 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') }} {{ datetimeSpan(udoc['regat'])|safe }},
                {{ _('last login at') }} {{ datetimeSpan(udoc['loginat'])|safe }},
              {% if sdoc %}
                {{ _('last active at') }} {{ datetimeSpan(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 isSelfProfile %}
                <a class="profile-header__contact-item" href="{{ url('home_settings', category='account') }}" data-tooltip="{{ _('Edit Profile') }}">
                  <span class="icon icon-edit"></span>
                </a>
              {% endif %}
                <a class="profile-header__contact-item" href="{{ url('home_messages', query={target: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:;" data-copy="{{ 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:;" data-copy="{{ 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:;" data-copy="{{ udoc['wechat'] | base64_encode }}" data-tooltip="{{ _('Copy WeChat Account') }}">
                  <span class="icon icon-wechat"></span>
                </a>
              {% endif %}
              {% if udoc.gender and udoc.gender != model.builtin.USER_GENDER_OTHER %}
                <span
                  class="profile-header__contact-item"
                  data-tooltip="{{ model.builtin.USER_GENDER_RANGE[udoc.gender] }}"
                >
                  {{ model.builtin.USER_GENDER_ICONS[udoc.gender] }}
                </span>
              {% endif %}
              {% if udoc.hasPriv(PRIV.PRIV_MOD_BADGE) %}
                <span
                  class="profile-header__contact-item user-profile-badge badge--su"
                  data-tooltip="{{ _('{0} is a superuser.').format(_('She' if udoc.gender == 1 else 'He')) }}"
                >
                  SU
                </span>
              {% elif udoc.hasPerm(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">
            <li class="section__tab-item">
              <h1 class="section__tab-title">{{ _('Bio') }}</h1>
              <div class="section__tab-main">
              {% if not udoc.bio %}
                {{ nothing.render("This person is lazy and didn't wrote anything.") }}
              {% else %}
                <div class="section__body typo">
                  {{ udoc.bio|default('')|markdown|safe }}
                </div>
              {% endif %}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="section__header">
        <h2 class="section__title">{{ _('Accepted Problems') }}</h2>
      </div>
      <div class="typo section__body no-media">
        {% set _mark = Math.ceil(pdocs.length/4) %}
        {% set _one = pdocs.slice(0, _mark) %}
        {% set _two = pdocs.slice(_mark, _mark*2) %}
        {% set _three = pdocs.slice(_mark*2, _mark*3) %}
        {% set _four = pdocs.slice(_mark*3, pdocs.length - 1) %}
        <div class="row">
          <div class="medium-3 columns">
            <ul>
              {% for pdoc in _one %}
                <li>{{ problem.render_problem_title(pdoc, show_tags=false, small=true) }}</li>
              {% endfor %}
            </ul>
          </div>
          <div class="medium-3 columns">
            <ul>
              {% for pdoc in _two %}
                <li>{{ problem.render_problem_title(pdoc, show_tags=false, small=true) }}</li>
              {% endfor %}
            </ul>
          </div>
          <div class="medium-3 columns">
            <ul>
              {% for pdoc in _three %}
                <li>{{ problem.render_problem_title(pdoc, show_tags=false, small=true) }}</li>
              {% endfor %}
            </ul>
          </div>
          <div class="medium-3 columns">
            <ul>
              {% for pdoc in _four %}
                <li>{{ problem.render_problem_title(pdoc, show_tags=false, small=true) }}</li>
              {% endfor %}
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="medium-3 columns">
  {% if isSelfProfile %}
    {{ 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.nSubmit or 0 }}</div>
              <div class="numbox__text">{{ _('Submitted') }}</div>
            </div>
          </div>
          <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>
      </div>
    </div>
    <div class="section side">
      <div class="section__header">
        <h2 class="section__title">{{ _('Problem Tags') }}</h2>
      </div>
      <div class="typo section__body no-media">
        <dl class="exlarge horizontal">
          {% for tag in tags %}
            <dt>{{ tag[0] }}</dt>
            <dd>{{ tag[1] }}</dd>
          {% endfor %}
        </dl>
      </div>
    </div>
  </div>
</div>
{% endblock %}