{% extends 'page.html' %}

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

{% block content_header %}
  {% if pageUser %}
    <header id="grw-subnav-for-user-page" class="user-page-header" data-page-user="{{ pageUser|json }}"></header>
  {% else %}
    {% parent %}
  {% endif %}
{% endblock %}


{% block content_main %}
  <div class="row">

    <div class="col grw-page-content-container">

      {#
        # ensure to insert 'user_page_content' widget to here
        #
        #   Because this block has content like 'Bookmarks' or 'Recent Created' whose height changes dynamically,
        #   setting of 'revision-toc' (affix) is hindered.
        #}
      <div class="m-b-30 user-page-content-container hidden-print">
        {% include '../widget/user_page_content.html' %}
      </div>

      {% block content_main_before %}
        {% parent %}
      {% endblock %}

      {% include '../widget/page_content.html' %}

      {# force remove #revision-toc from #content_main of parent #}
      <script>
        $('#revision-toc').remove();
      </script>

    </div> {# /.col- #}

    {# relocate #revision-toc #}
    <div class="col-xl-2 col-lg-3 d-none d-lg-block revision-toc-container">
      <div class="liker-and-seenusers d-flex align-items-end justify-content-end">
        {% if page.seenUsers.length > 10 %}<span class="text-muted">..</span>{% endif %}
        <span id="seen-user-list" class="mr-3" data-user-ids="{{ page.seenUsers|slice(-10)|default([])|join(',') }}"></span>
        <span class="text-danger">
          <i class="icon-fw fa fa-paw"></i><span class="seen-user-count">{{ page.seenUsers.length|default(0) }}</span>
        </span>
      </div>
      <div id="revision-toc" class="revision-toc mt-3 sps sps--abv" data-sps-offset="116">
        <div id="revision-toc-content" class="revision-toc-content"></div>
      </div>
    </div> {# /.col- #}

  </div>

  {% if 'growi' === getConfig('crowi', 'customize:behavior') || 'crowi-plus' === getConfig('crowi', 'customize:behavior') %}
  <div class="row page-list d-print-none mt-5">
    <div class="col-md-10">
      {% include '../widget/page_list_and_timeline.html' %}
    </div>
  </div>
  {% endif %}

{% endblock %}


{% block content_main_after %}
  {% include 'widget/comments.html' %}
{% endblock %}