{% 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|insertSpaceToEachSlashes }}
    </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-path="{{ path }}"
  data-path-shortname="{{ path|path2name }}"
  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 not page or req.query.offset > 0 %}hide{% endif %}">

  <ul class="nav nav-tabs hidden-print">
   {# portal tab #}
    <li class=" {% if not req.body.pageForm %}active{% endif %}">
      {% if page %}
      <a href="#revision-body-content" data-toggle="tab">
        <i class="fa fa-magic"></i>
        PORTAL
      </a>
      {% else %}
      <a>Create Portal: {{ path }}</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>

    {% if not page %}
    <li class="pull-right close-button">
      <a href="#" id="portal-form-close">
        <i class="fa fa-times"></i>
      </a>
    </li>
    {% endif %}
  </ul>

  <div class="tab-content">
    <div class="wiki tab-pane {% if not req.body.pageForm %}active{% endif %}" id="revision-body-content">{{ page.revision.body|nl2br|safe }}</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>
    <div class="tab-pane edit-form portal-form {% if req.body.pageForm %}active{% endif %}" id="edit-form">
      {% include '_form.html' with {forceGrant: 1} %}
    </div>
  </div>
</div> {# /.portal #}

<div class="page-list-container">
  <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">
      {% include 'widget/page_list.html' with { pages: pages, pager: pager } %}
    </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>
</div>

  <script type="text/javascript">
    $(function(){
        $('#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 #}
{% include 'modal/widget_what_is_portal.html' %}

{% block content_main_after %}
{% endblock %}

{% endblock %}


{% block content_footer %}
<footer>

</footer>
{% endblock %}


{% block side_header %}

{% if not page and not isUserPageList(path) %}
<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 #}

{% block body_end %}
<div class="modal fade portal-warning-modal" id="portal-warning-modal">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">ポータルに関するヒント</h4>
      </div>
      <div class="modal-body alert alert-danger">

        <strong>Warning!</strong><br>

        <p>既に <strong><a href="{{ path|removeLastSlash }}">{{ path|removeLastSlash }}</a></strong> のページが存在します。</p>

        <p>
          <a href="{{ path|removeLastSlash }}">{{ path|removeLastSlash }}</a> をポータル化するには、
          <a href="{{ path|removeLastSlash }}">{{ path|removeLastSlash }}</a> に移動し、「ページを移動」させてください。<br>
          <a href="{{ path|removeLastSlash }}">{{ path|removeLastSlash }}</a> とは別に、このページ(<code>{{ path }}</code>)にポータルを作成する場合、このまま編集を続けて作成してください。
        </p>

      </div>
    </div>
  </div>
</div>
</div>
{% endblock %} {# body_end #}