{% extends 'layout/2column.html' %}

{% block html_title %}{{ path|path2name }} · {{ path }}{% endblock %}

{% block content_head %}

{% block content_head_before %}
{% endblock %}

<div class="header-wrap">
  <header class="portal-header {% if page %}has-page{% endif %}">
    {% if page %}
      <a href="#" title="Bookmark" class="bookmark-link" id="bookmark-button" data-bookmarked="0"><i class="fa fa-star-o"></i></a>
    {% endif %}

    <h1 class="title" id="revision-path">
      {{ path }}
    </h1>
  </header>
</div>

{% endblock %}

{% block content_head_after %}
{% endblock %}

{% block content_main %}

{% block content_main_before %}
{% endblock %}

<div class="page-list content-main {% if req.body.pageForm %}on-edit{% endif %}"
  id="content-main"
  data-page-portal="{% if page and page.isPortal() %}1{% else %}0{% endif %}"
  data-page-id="{% if page %}{{ page._id.toString() }}{% endif %}"
  data-current-user="{% if user %}{{ user._id.toString() }}{% endif %}"
  data-page-revision-id="{% if revision %}{{ revision._id.toString() }}{% endif %}"
  data-page-revision-created="{% if revision %}{{ revision.createdAt|datetz('U') }}{% endif %}"
  data-page-is-seen="{% if page and page.isSeenUser(user) %}1{% else %}0{% endif %}"
  >

<div class="portal">
{% if page %}

  <ul class="nav nav-tabs hidden-print">
    <li class=" {% if not req.body.pageForm %}active{% endif %}">
      {% if page.isPortal() %}
      <a href="#revision-body" data-toggle="tab">
        <i class="fa fa-magic"></i>
        <span class="portal-label">PORTAL</span>
      </a>
      {% endif %}
    </li>
    <li {% if req.body.pageForm %}class="active"{% endif %}><a href="#edit-form" data-toggle="tab"><i class="fa fa-pencil-square-o"></i> 編集</a></li>


    {#
    <li class="dropdown pull-right">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
        <i class="fa fa-wrench"></i> <span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
       <li><a href="#" data-target="#" data-toggle="modal"><i class="fa fa-share"></i> 移動</a></li>
      </ul>
    </li>
    #}
  </ul>

  <div class="tab-content wiki-content">
    <div class="wiki tab-pane" id="revision-body-content">
    </div>
    <script type="text/template" id="raw-text-original">{{ page.revision.body }}</script>
    <script type="text/javascript">
      $(function(){
          var renderer = new Crowi.renderer($('#raw-text-original').html());
          renderer.render();
          Crowi.correctHeaders('#revision-body-content');
      });
    </script>


    // .. edit ............. html 構造の整理が必要
  </div>

{% endif %}

  <div class="portal-form-header">
    Create Portal: <strong>{{ path }}</strong>
    <p class="pull-right ">
      <a href="#" id="portal-form-close"><i class="fa fa-times"></i></a>
    </p>
  </div>
  <div class="portal-form">
    <div class="edit-form">
      {% include '_form.html' %}
    </div>
  </div>
</div>

<ul class="nav nav-tabs">
    <li class="active"><a href="#view-list" data-toggle="tab">リスト表示</a></li>
    <li><a href="#view-timeline" data-toggle="tab">タイムライン表示</a></li>
</ul>

<div class="tab-content">
  {% if pages.length == 0 %}
  There are no pages under <strong>{{ path }}</strong>.

  <h3>Next Actions</h3>

  <ul>
    <li>Create portal page?
      <ul>
        <li>Great! To create the portal of <strong>{{ path }}</strong>, click "Create Portal" button.</li>
      </ul>
    </li>
    <li>Create the under page directly?
      <ul>
        <li>Nice. To create the page under <strong>{{ path }}</strong> directly, type the page name on your browser.</li>
      </ul>
    </li>
  </ul>
  {% endif  %}

  {# list view #}
  <div class="active tab-pane fade page-list-container in" id="view-list">
    <ul class="page-list-ul">
    {% for page in pages %}
    <li class="page-list-li">
      <img src="{{ page.revision.author|picture }}" class="picture picture-rounded">

      <a class="page-list-link" href="{{ page.path }}"
        data-path="{{ page.path }}"
        data-short-path="{{ page.path|path2name }}">{{ page.path }}</a>

      <span class="page-list-meta">
        {% if page.isPortal() %}
          <span class="label label-info">PORTAL</span>
        {% endif  %}


        {% if page.commentCount > 0 %}
          <i class="fa fa-comment"></i>{{ page.commentCount }}
        {% endif  %}

        {% if !page.isPublic() %}
          <i class="fa fa-lock"></i>
        {% endif %}
      </span>
    </li>
    {% endfor %}
    </ul>

      <ul class="pagination">
        {% if pager.prev != null %}
          <li class="prev"><a href="{{ path }}?offset={{ pager.prev }}&limit={{ pager.limit }}"><i class="fa fa-arrow-left"></i> Prev</a></li>
        {% endif %}
        {# この条件は無いな.. #}
        {% if pages.length > 0 %}
          <li class="next"><a href="{{ path }}?offset={{ pager.next }}&limit={{ pager.limit }}">Next <i class="fa fa-arrow-right"></i></a></li>
        {% endif %}
      </ul>
  </div>

  {# timeline view #}
  <div class="tab-pane" id="view-timeline">
    {% for page in pages %}
    <div class="timeline-body" id="id-{{ page.id }}">
      <h3 class="revision-path"><a href="{{ page.path }}">{{ page.path }}</a></h3>
      <div class="revision-body wiki"></div>
      <script type="text/template">{{ page.revision.body }}</script>
    </div>
    <hr>
    {% endfor %}
  </div>
</div>

  <script type="text/javascript">
    $(function(){
        $('#view-list .page-list-link').each(function() {
          var $link = $(this);
          var text = $link.text();
          var path = $link.data('path');
          var shortPath = $link.data('short-path');

          $link.html(path.replace(shortPath, '<strong>' + shortPath + '</strong>'));
        });
        $('#view-timeline .timeline-body').each(function()
        {
          var id = $(this).attr('id');
          var contentId = '#' + id + ' > script';
          var revisionBody = '#' + id + ' .revision-body';
          var revisionPath = '#' + id + ' .revision-path';
          var renderer = new Crowi.renderer($(contentId).html(), $(revisionBody));
          renderer.render();
        });
        //$('.tooltip .tabs').tabs();
    });
  </script>

</div> {# /.content-main #}

{% block content_main_after %}
{% endblock %}

{% endblock %}


{% block content_footer %}
<footer>

</footer>
{% endblock %}


{% block side_header %}

{% if not page %}
<div class="portal-side">
  <div class="portal-form-button">
    <button class="btn btn-primary" id="create-portal-button">Create Portal</button>
    <p class="help-block"><a href="#" data-target="#help-portal" data-toggle="modal"><i class="fa fa-question-circle"></i> What is Portal?</a></p>
  </div>

</div>
{% else %}
  {% include 'widget/page_side_header.html' %}
{% endif %}

{% endblock %} {# side_header #}

{% include 'modal/widget_what_is_portal.html' %}