@(gist: gitbucket.gist.model.Gist,
  forkedCount: Int,
  repositoryUrl: gitbucket.gist.util.GistUtils.GistRepositoryURL,
  editable: Boolean,
  revisions: List[(gitbucket.core.util.JGitUtil.CommitInfo, List[gitbucket.core.util.JGitUtil.DiffInfo])])(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.view.helpers
@import org.eclipse.jgit.diff.DiffEntry.ChangeType
@gitbucket.core.html.main(s"Revisions · ${gist.repositoryName}"){
  <link href="@context.path/plugin-assets/gist/style.css?@helpers.hashQuery" rel="stylesheet">
  <div class="content-wrapper main-center">
    <div class="gist-content">
      @gitbucket.gist.html.header(gist, forkedCount, editable)
      <div class="content body">
        @gitbucket.gist.html.menu("revision", gist, repositoryUrl)
        <div style="padding-top: 20px;">
          @revisions.map { case (revision, diffs) =>
            <div>
              <div style="margin-bottom: 8px;">
                @helpers.avatar(revision, 20) <a href="@context.path/gist/@revision.authorName">@revision.authorName</a> revised this @gitbucket.core.helper.html.datetimeago(revision.authorTime)
                <div class="pull-right">
                  @if(diffs.isEmpty){
                    <span class="muted">No changes.</span>
                  }
                  <a href="@context.path/gist/@gist.userName/@gist.repositoryName/@revision.id" class="monospace">@revision.id.substring(0, 7)</a>
                </div>
              </div>
              <div>
                @diffs.zipWithIndex.map { case (diff, i) =>
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th style="font-weight: normal; line-height: 27px;" class="box-header">
                          @diff.changeType match {
                            case ChangeType.ADD => {
                              <span class="diffstat">
                                <i class="octicon octicon-diff-added"></i>
                              </span> @diff.newPath
                            }
                            case ChangeType.MODIFY => {
                              <span class="diffstat">
                                <i class="octicon octicon-diff-modified"></i>
                              </span> @diff.newPath
                            }
                            case ChangeType.DELETE => {
                              <span class="diffstat">
                                <i class="octicon octicon-diff-removed"></i>
                              </span> @diff.oldPath
                            }
                            case _ => {
                            }
                          }
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td style="padding: 0;">
                          @if(diff.newContent != None || diff.oldContent != None){
                            <div id="diffText-@revision.id.substring(0, 7)-@i"></div>
                            <textarea id="newText-@revision.id.substring(0, 7)-@i" style="display: none;">@diff.newContent.getOrElse("")</textarea>
                            <textarea id="oldText-@revision.id.substring(0, 7)-@i" style="display: none;">@diff.oldContent.getOrElse("")</textarea>
                          } else {
                            Not supported
                          }
                        </td>
                      </tr>
                    </tbody>
                  </table>
                }
              </div>
            </div>
          }
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="@helpers.assets("/vendors/jsdifflib/difflib.js")"></script>
  <script type="text/javascript" src="@helpers.assets("/vendors/jsdifflib/diffview.js")"></script>
  <link href="@helpers.assets("/vendors/jsdifflib/diffview.css")" type="text/css" rel="stylesheet" />
  <script>
  $(function(){
    renderDiffs(1);

    function renderDiffs(viewType){
      window.viewType = viewType;
      @revisions.map { case (revision, diffs) =>
        @diffs.zipWithIndex.map { case (diff, i) =>
          @if(diff.newContent != None || diff.oldContent != None){
            if($('#oldText-@revision.id.substring(0, 7)-@i').length > 0){
              // Render Diff
              diffUsingJS('oldText-@revision.id.substring(0, 7)-@i', 'newText-@revision.id.substring(0, 7)-@i', 'diffText-@revision.id.substring(0, 7)-@i', viewType);
              // Render Stats
              var diffText = $('#diffText-@revision.id.substring(0, 7)-@i');
              var add = diffText.find("table").attr("add") * 1;
              var del = diffText.find("table").attr("del") * 1;
              var table = diffText.closest("table");
              table.find(".diffstat").text(add + del + " ").append(renderStatBar(add, del)).attr("title", add + " additions & " + del + " deletions").tooltip();
            }
          }
        }
      }
    }

    function renderStatBar(add, del){
      if(add + del > 5){
        if(add){
          if(add < del){
            add = Math.floor(1 + (add * 4 / (add+del)));
          }else{
            add = Math.ceil(1 + (add * 4 / (add+del)));
          }
        }
        del = 5 - add;
      }
      var ret = $('<div class="diffstat-bar">');
      for(var i = 0; i < 5; i++){
        if(add){
          ret.append('<span class="text-diff-added">■</span>');
          add--;
        } else if(del){
          ret.append('<span class="text-diff-deleted">■</span>');
          del--;
        } else {
          ret.append('■');
        }
      }
      return ret;
    }
  });
  </script>
}