@(pageName: String,
  page: Option[gitbucket.core.service.WikiService.WikiPageInfo],
  repository: gitbucket.core.service.RepositoryService.RepositoryInfo)(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.view.helpers
@import gitbucket.core.util.FileUtil
@gitbucket.core.html.main(s"${if(pageName.isEmpty) "New Page" else pageName} - ${repository.owner}/${repository.name}", Some(repository)){
  @gitbucket.core.html.menu("wiki", repository){
    <div class="pull-right">
      @if(page.isDefined){
        <a class="btn btn-default" href="@helpers.url(repository)/wiki/@helpers.urlEncode(pageName)/_history">Page History</a>
        <a class="btn btn-danger" href="@helpers.url(repository)/wiki/@helpers.urlEncode(pageName)/_delete" id="delete">Delete Page</a>
      }
    </div>
    <h1 class="body-title"><span class="muted">Editing</span> @if(pageName.isEmpty){New Page} else {@pageName}</h1>
    <form action="@helpers.url(repository)/wiki/@if(page.isEmpty){_new} else {_edit}" method="POST" validate="true" autocomplete="off">
      <span id="error-pageName" class="error"></span>
      <input type="text" name="pageName" value="@pageName" class="form-control" style="font-weight: bold; margin-bottom: 10px;" placeholder="Input a page name." aria-label="Page name"/>
      @gitbucket.core.helper.html.acenavbar()
      <div class="muted attachable">
        <div id="editor" style="width: 100%; height: 600px;"></div>
        <div class="clickable">Attach images or documents by dragging &amp; dropping, or selecting them.</div>
        <div id="preview" style="width: 100%; display: none;"></div>
      </div>
      <div class="form-group">
        <label for="message">Edit Message</label>
        <input type="text" id="message" name="message" value="" class="form-control" placeholder="(Optional) Write a summary of this edit."/>
      </div>
      <div class="form-group pull-right">
        <input type="hidden" name="currentPageName" value="@pageName"/>
        <input type="hidden" name="id" value="@page.map(_.id)"/>
        <input type="submit" id="commitButton" value="Save" class="btn btn-success">
        <input type="hidden" id="content" name="content" value=""/>
        <input type="hidden" id="initial" value='@page.map(_.content)'/>
      </div>
    </form>
    <script src='@helpers.assets("/vendors/ace/ace.js")' type="text/javascript" charset="utf-8"></script>
    <script src='@helpers.assets("/vendors/ace/ext-modelist.js")' type="text/javascript" charset="utf-8"></script>
    <script src='@helpers.assets("/vendors/ace/ext-language_tools.js")' type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src='@helpers.assets("/vendors/jsdifflib/difflib.js")'></script>
    <link href='@helpers.assets("/vendors/jsdifflib/diffview.css")' type="text/css" rel="stylesheet" />
      @gitbucket.core.helper.html.completion(
        repository        = repository,
        completionContext = "wiki",
        generateScript    = false 
      )
    <script>
      const gitbucket = {
        editor: null,
        enableWikiLink: true,
        pluginAssets: "@context.path/plugin-assets/",
        protected: false,
        previewTemplate: '<img src="@helpers.assets("/common/images/indicator.gif")"> Previewing...',
        previewUrl: '@helpers.url(repository)/_preview',
        uploadUrl: '@context.path/upload/wiki/@repository.owner/@repository.name',
        maxFilesize: @{ context.settings.upload.maxFileSize / 1024 / 1024 },
        timeout: @{ context.settings.upload.timeout },
        isRenderableUrl: "@context.baseUrl/_is_renderable?filename=",
        tabSize: 8,
        newLineMode: "auto",
        useSoftTabs: false,
        getFileName: function () {
          return '@page.map(_.name).getOrElse("temporary.md")';
        },
        getFilePath: function () {
          return '@page.map(_.name).getOrElse("temporary.md")';
        },
      };
    </script>
    <script src='@helpers.assets("/common/js/editor.js")' type="text/javascript" charset="utf-8"></script>
  }
}