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

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

{% block content_head %}

{% block content_head_before %}
{% endblock %}

<div class="header-wrap">
  {% if not page.isDeleted() %}
  <header id="page-header">
    <p class="stopper"><a href="#" data-affix-disable="#page-header"><i class="fa fa-chevron-up"></i></a></p>


    <div class="flex-title-line">
      <h1 class="title flex-item-title" id="revision-path">{{ path|insertSpaceToEachSlashes }}</h1>
      {% if page %}
      <div class="flex-item-action">
        <span id="bookmark-button">
          <p class="bookmark-link">
            <i class="fa fa-star-o"></i>
          </p>
        </span>
      </div>
      <div class="flex-item-action visible-xs visible-sm">
        <button
            data-csrftoken="{{ csrf() }}"
            data-liked="{% if page.isLiked(user) %}1{% else %}0{% endif %}"
            class="like-button btn btn-default btn-sm {% if page.isLiked(user) %}active{% endif %}"
        ><i class="fa fa-thumbs-o-up"></i></button>
      </div>
      {% endif %}
    </div>
  </header>
  {% else %}
  {# trash/* #}
  <header id="page-header">
    <div class="flex-title-line">
      <h1 class="title flex-item-title">{{ path|insertSpaceToEachSlashes }}</h1>
      <div class="flex-item-action">
        <span id="bookmark-button">
          <p class="bookmark-link">
            <i class="fa fa-star-o"></i>
          </a>
        </span>
      </div>
    </div>
  </header>
  {% endif %}
</div>

{% block content_head_after %}
{% endblock %}

{% endblock %}

{% block content_main %}

{% block content_main_before %}
{% endblock %}

<div id="content-main" class="content-main {% if not page or req.body.pageForm %}on-edit{% endif %}"
  data-path="{{ path }}"
  data-path-shortname="{{ path|path2name }}"
  data-page-id="{% if page %}{{ page._id.toString() }}{% endif %}"
  data-current-user="{% if user %}{{ user._id.toString() }}{% endif %}"
  data-current-username="{% if user %}{{ user.username }}{% 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 %}"
  data-csrftoken="{{ csrf() }}"
  >

  {% if not page %}
  <ul class="nav nav-tabs hidden-print">
    <li><a>Create: {{ path }}</a></li>
    <li class="dropdown pull-right">
      <a href="#" onclick="history.back();"><i class="fa fa-times"></i> {{ t('Cancel') }}</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="edit-form">
    {% include '_form.html' %}
    </div>
  </div>

  {% else %}

  {% if page.isDeleted() %}
  <div class="alert alert-danger">
    <form role="form" class="pull-right" id="revert-delete-page-form" onsubmit="return false;">
      <input type="hidden" name="_csrf" value="{{ csrf() }}">
      <input type="hidden" name="path" value="{{ page.path }}">
      <input type="hidden" name="page_id" value="{{ page._id.toString() }}">
      <input type="submit" class="btn btn-danger btn-inverse btn-sm" value="Put Back!">
    </form>
    <p>
      <i class="fa fa-trash-o" aria-hidden="true"></i>
      This page is in the trash.<br>
    </p>
    <p>
    Deleted by <img src="{{ page.lastUpdateUser|picture }}" class="picture picture-sm picture-rounded"> {{ page.lastUpdateUser.name }} at {{ page.updatedAt|datetz('Y-m-d H:i:s') }}
    </p>
  </div>
  {% endif %}

  {% if not page.isDeleted() %}
  <ul class="nav nav-tabs hidden-print">
    <li class=" {% if not req.body.pageForm %}active{% endif %}" data-toggle="tooltip" {# data-title="あなたの 確認待ち です" title="" data-placement="bottom" data-trigger="manual" data-tooltip-stay #}>
      <a href="#revision-body" data-toggle="tab">
      <i class="fa fa-magic"></i>
      {#
        <span class="label label-danger" style=""> 承認待ち</span>
      #}
      </a>
    </li>

    <li {% if req.body.pageForm %}class="active"{% endif %}><a href="#edit-form" data-toggle="tab"><i class="fa fa-pencil-square-o"></i> {{ t('Edit') }}</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="#renamePage" data-toggle="modal"><i class="fa fa-share"></i> {{ t('Move') }}</a></li>
       <li><a href="?presentation=1" class="toggle-presentation"><i class="fa fa-arrows-alt"></i> {{ t('Presentation Mode') }} (beta)</a></li>
       {% if isDeletablePage() %}
       <li class="divider"></li>
       <li class=""><a href="#" data-target="#deletePage" data-toggle="modal"><i class="fa fa-trash-o text-danger"></i> {{ t('Delete') }}</a></li>
       {% endif %}
      </ul>
    </li>
    {% if page %}
    <li class="pull-right"><a href="#revision-history" data-toggle="tab"><i class="fa fa-history"></i> History</a></li>
    {% endif %}
  </ul>
  {% endif %}

  <div class="tab-content wiki-content">
  {% if req.query.renamed and not page.isDeleted() %}
  <div class="alert alert-info">
    <strong>{{ t('Moved') }}: </strong> {{ t('page_page.notice.moved', req.query.renamed) }}
  </div>
  {% endif %}
  {% if not page.isLatestRevision() %}
  <div class="alert alert-warning">
    <strong>{{ t('Warning') }}: </strong> {{ t('page_page.notice.version') }} <i class="fa fa-magic"></i> <a href="{{ page.path }}">{{ t('Show latest') }}</a>
  </div>
  {% endif %}

{#
  <div class="panel panel-default">
    <div class="panel-heading">承認待ち</div>
    <div class="panel-body">
      ほげほげ
    </div>
  </div>
#}
    <script type="text/template" id="raw-text-original">{{ revision.body }}</script>

    {# formatted text #}
    <div class="tab-pane {% if not req.body.pageForm %}active{% endif %}" id="revision-body">
      <div class="revision-toc" id="revision-toc">
        <a data-toggle="collapse" data-parent="#revision-toc" href="#revision-toc-content" class="revision-toc-head collapsed">{{ t('Table of Contents') }}</a>

      </div>
      <div class="wiki" id="revision-body-content"></div>
    </div>

    {# edit form #}
    {% if not page.isDeleted() %}
    <div class="edit-form tab-pane {% if req.body.pageForm %}active{% endif %}" id="edit-form">
      {% include '_form.html' %}
    </div>
    {% endif %}

    {# raw revision history #}
    {% if not page %}
    {% else %}
    <div class="tab-pane revision-history" id="revision-history">
    </div>
    {% endif %}

  </div>
  {% endif %}

  <div id="notifPageEdited" class="fk-notif fk-notif-danger"><i class="fa fa-exclamation-triangle"></i> <span class="edited-user"></span> {{ t('edited this page') }} <a href="javascript:location.reload();"><i class="fa fa-angle-double-right"></i> {{ t('Load latest') }}</a></div>
</div>

{% block content_main_after %}
{% endblock %}

{% endblock %}

{% block content_footer %}


{% if page %}
<div class="page-attachments meta" id="page-attachment">
</div>

<p class="page-meta meta">
  Path: <span id="pagePath">{{ page.path }}</span><br>
  {# for BC #}
  {% if page.lastUpdateUser %}
    Last updated at {{ page.updatedAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.lastUpdateUser|picture }}" class="picture picture-rounded"> {{ page.lastUpdateUser.name }}<br>
  {% else %}
    Last updated at {{ page.revision.createdAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.revision.author|picture }}" class="picture picture-rounded"> {{ page.revision.author.name }}<br>
  {% endif %}
  {# /for BC #}
  Created at {{ page.createdAt|datetz('Y-m-d H:i:s') }} by <img src="{{ page.creator|default(page.creator)|picture }}" class="picture picture-rounded"> {{ page.creator.name }}<br>
</p>
{% endif %}

{% endblock %}

{% block side_header %}
  {% if not page.isDeleted() %}
    {% include 'widget/page_side_header.html' %}
  {% endif %}
{% endblock %} {# side_header #}

{% block side_content %}
  {% if not page.isDeleted() %}
    {% include 'widget/page_side_content.html' %}
  {% endif %}
{% endblock %}

{% block footer %}
{% endblock %}

{% block body_end %}
  {% parent %}

<div id="presentation-layer" class="fullscreen-layer">
  <div id="presentation-container"></div>
</div>

<div id="crowi-modals">
  {% include 'modal/rename.html' %}
  {% include 'modal/delete.html' %}
  {% include 'modal/page_name_warning.html' %}
</div>
{% endblock %}