@(pageName: String,
  page: gitbucket.core.service.WikiService.WikiPageInfo,
  pages: List[String],
  repository: gitbucket.core.service.RepositoryService.RepositoryInfo,
  hasWritePermission: Boolean,
  sidebar: Option[gitbucket.core.service.WikiService.WikiPageInfo])(implicit context: gitbucket.core.controller.Context)
@import context._
@import gitbucket.core.view.helpers._
@import gitbucket.core.service.WikiService._
@html.main(s"${pageName} - ${repository.owner}/${repository.name}", Some(repository)){
  @html.menu("wiki", repository){
    <ul class="nav nav-tabs fill-width pull-left">
      <li>
        <h1 class="wiki-title">@pageName</h1>
        <div class="small">
          <span class="muted"><strong>@page.committer</strong> edited this page @helper.html.datetimeago(page.time)</span>
        </div>
      </li>
      <li class="pull-right">
        @if(hasWritePermission){
          <div>
            <a class="btn btn-small" href="@url(repository)/wiki/@urlEncode(pageName)/_edit">Edit Page</a>
            <a class="btn btn-small btn-success" href="@url(repository)/wiki/_new">New Page</a>
          </div>
        }
      </li>
    </ul>
    <div style="width: 200px;" class="pull-right">
      @defining(15){ max =>
        <a id="show-pages-index" style="text-decoration: none;" href="javascript:void(0);">
          <div class="wiki-index-header">
            <span id="triangle-down" class="octicon octicon-triangle-down"></span>
            <span id="triangle-right" class="octicon octicon-triangle-right" style="display: none;"></span>
            <span class="strong">Pages</span> <span class="label">@pages.length</span>
          </div>
        </a>
        <div id="pages-index" class="wiki-index-content">
          @pages.zipWithIndex.map { case (page, i) =>
            <div class="box-content-row page-link" style="border: none; @if(i > max - 1){display:none;}">
              <a href="@url(repository)/wiki/@urlEncode(page)" class="strong">@page</a>
            </div>
          }
          @if(pages.size > max){
            <div class="box-content-row show-more">
              <a href="javascript:void(0);" id="show-more-pages">Show more @{pages.size - max} pages...</a>
            </div>
          }
        </div>
      }
      @sidebar.map { sidebarPage =>
        <div class="wiki-sidebar">
          @if(hasWritePermission){
            <a href="@url(repository)/wiki/_Sidebar/_edit" style="text-decoration: none;">
              <span class="octicon octicon-pencil" style="position: relative; float: right;"></span>
            </a>
          }
          @markdown(sidebarPage.content, repository, true, false, false, false, pages)
        </div>
      }.getOrElse{
        @if(hasWritePermission){
          <a class="button-link" href="@url(repository)/wiki/_Sidebar/_edit" style="text-decoration: none;">
            <div class="wiki-sidebar" style="text-align:center;">
              <i class="octicon octicon-plus" style="font-size: 16px;"></i>
               Add a custom sidebar
            </div>
          </a>
        }
      }
      <div class="small">
        <strong>Clone this wiki locally</strong>
      </div>
      @helper.html.copy("repository-url-copy", httpUrl(repository)){
        <input type="text" value="@httpUrl(repository)" id="repository-url" style="width: 160px;" readonly>
      }
      @if(settings.ssh && loginAccount.isDefined){
        <div class="small">
          <span class="mute">You can clone <a href="javascript:void(0);" id="repository-url-http">HTTP</a> or <a href="javascript:void(0);" id="repository-url-ssh">SSH</a>.</span>
        </div>
      }
    </div>
    <div style="width: 700px;" class="pull-left">
      <div class="markdown-body">
        @markdown(page.content, repository, true, false, false, false, pages)
      </div>
    </div>
  }
}
<script>
$(function(){
  $('#show-more-pages').click(function(e){
    $('div.page-link').show();
    $(e.target).parents('div.show-more').remove();
  });

  $('#show-pages-index').click(function(e){
    if($('#pages-index').is(":visible")){
      $('#triangle-down').hide();
      $('#triangle-right').show();
      $('#pages-index').hide();
    } else {
      $('#triangle-right').hide();
      $('#triangle-down').show();
      $('#pages-index').show();
    }
  });

  @sidebar.map { sidebarPage =>
    $('#pages-index').hide();
    $('#triangle-down').hide();
    $('#triangle-right').show();
  }

  @if(settings.ssh && loginAccount.isDefined){
    $('#repository-url-http').click(function(){
      $('#repository-url').val('@httpUrl(repository)');
      $('#repository-url-copy').attr('data-clipboard-text', $('#repository-url').val());
    });
    $('#repository-url-ssh').click(function(){
      $('#repository-url').val('@sshUrl(repository, settings, loginAccount.get.userName)');
      $('#repository-url-copy').attr('data-clipboard-text', $('#repository-url').val());
    });
  }
});
</script>