{% extends 'page.html' %}

{% block main_css_class %}user-page{% endblock %}

{% block content_head %}

{% if pageUser %}

<div class="header-wrap">
  <h1 class="title" id="revision-path">{{ path }}</h1>
  <div class="user-page-header">
  {% if page %}
    <a href="#" title="Bookmark" class="bookmark-link" id="bookmark-button" data-bookmarked="0"><i class="fa fa-star-o"></i></a>
  {% endif %}
    <div class="pull-left user-page-picture">
      <img src="{{ pageUser|picture }}" class="picture picture-rounded">
    </div>
    <div class="user-page-meta">
      <h2>{{ pageUser.name }}</h2>
      <ul>
        <li class="user-page-username"><i class="fa fa-user"></i> @{{ pageUser.username }}</li>
        <li class="user-page-email"><i class="fa fa-envelope-o"></i> {{ pageUser.email }}</li>
        {% if pageUser.introduction %}
        <li class="user-page-introduction"><p>{{ pageUser.introduction|nl2br }}</p></li>
        {% endif %}
      </ul>
    </div>
  </div>


  <div class="user-page-content">
    <ul class="nav nav-tabs user-page-content-menu">
      <li class="active">
        <a href="#user-bookmark-list" data-toggle="tab"><i class="fa fa-star"></i> Bookmarks</a>
      </li>
      <li>
        <a href="#user-created-list" data-toggle="tab"><i class="fa fa-pencil"></i> Recent Created</a>
      </li>
      <li>
        <a href="/me"><i class="fa fa-gears"></i> Setting</a>
      </li>
    </ul>
    <div class="user-page-content-tab tab-content">

      <div class="tab-pane user-bookmark-list page-list active" id="user-bookmark-list">
        <div class="page-list-container">
          {% if bookmarkList.length == 0 %}
          No bookmarks yet.
          {% endif %}
          {% include 'widget/page_list.html' with { pages: bookmarkList } %}
        </div>
      </div>

      <div class="tab-pane user-created-list page-list" id="user-created-list">
        <div class="page-list-container">
          {% if createdList.length == 0 %}
          No created pages yet.
          {% endif %}
          {% include 'widget/page_list.html' with { pages: createdList } %}
        </div>
      </div>
    </div>
  </div>
</div>

{% else %}
  {% parent %}
{% endif %}

{% endblock %}