@(diffs: Seq[util.JGitUtil.DiffInfo],
 repository: service.RepositoryService.RepositoryInfo,
 newCommitId: Option[String],
 oldCommitId: Option[String],
 showIndex: Boolean)(implicit context: app.Context)
@import context._
@import view.helpers._
@import org.eclipse.jgit.diff.DiffEntry.ChangeType
@if(showIndex){
  <div>
    <div class="pull-right" style="margin-bottom: 10px;">
      <input id="toggle-file-list" type="button" class="btn" value="Show file list"/>
    </div>
    Showing @diffs.size changed @plural(diffs.size, "file")
  </div>
  <ul id="commit-file-list" style="display: none;">
  @diffs.zipWithIndex.map { case (diff, i) =>
    <li@if(i > 0){ class="border"}>
      <a href="#diff-@i">
        @if(diff.changeType == ChangeType.COPY || diff.changeType == ChangeType.RENAME){
          <img src="@assets/common/images/diff_move.png"/> @diff.oldPath -> @diff.newPath
        }
        @if(diff.changeType == ChangeType.ADD){
          <img src="@assets/common/images/diff_add.png"/> @diff.newPath
        }
        @if(diff.changeType == ChangeType.MODIFY){
          <img src="@assets/common/images/diff_edit.png"/> @diff.newPath
        }
        @if(diff.changeType == ChangeType.DELETE){
          <img src="@assets/common/images/diff_delete.png"/> @diff.oldPath
        }
      </a>
    </li>
    }
  </ul>
}
@diffs.zipWithIndex.map { case (diff, i) =>
  <a name="diff-@i"></a>
  <table class="table table-bordered">
    <tr>
      <th style="font-weight: normal;" class="box-header">
        @if(diff.changeType == ChangeType.COPY || diff.changeType == ChangeType.RENAME){
          @diff.oldPath -> @diff.newPath
          @if(newCommitId.isDefined){
            <div class="pull-right align-right">
              <a href="@url(repository)/blob/@newCommitId.get/@diff.newPath" class="btn btn-small">View file @@ @newCommitId.get.substring(0, 10)</a>
            </div>
          }
        }
        @if(diff.changeType == ChangeType.ADD || diff.changeType == ChangeType.MODIFY){
          @diff.newPath
          @if(newCommitId.isDefined){
            <div class="pull-right align-right">
              <a href="@url(repository)/blob/@newCommitId.get/@diff.newPath" class="btn btn-small">View file @@ @newCommitId.get.substring(0, 10)</a>
            </div>
          }
        }
        @if(diff.changeType == ChangeType.DELETE){
          @diff.oldPath
          @if(oldCommitId.isDefined){
            <div class="pull-right align-right">
              <a href="@url(repository)/blob/@oldCommitId.get/@diff.oldPath" class="btn btn-small">View file @@ @oldCommitId.get.substring(0, 10)</a>
            </div>
          }
        }
      </th>
    </tr>
    <tr>
      <td>
        @if(diff.newContent != None || diff.oldContent != None){
          <div id="diffText-@i"></div>
          <textarea id="newText-@i" style="display: none;">@diff.newContent.getOrElse("")</textarea>
          <textarea id="oldText-@i" style="display: none;">@diff.oldContent.getOrElse("")</textarea>
        } else {
          Not supported
        }
      </td>
    </tr>
  </table>
}
<script type="text/javascript" src="@assets/jsdifflib/difflib.js"></script>
<script type="text/javascript" src="@assets/jsdifflib/diffview.js"></script>
<link href="@assets/jsdifflib/diffview.css" type="text/css" rel="stylesheet" />
<style type="text/css">
table.inlinediff {
  width: 100%;
}

table.inlinediff thead {
  display: none;
}

td.insert, td.equal, td.delete {
  width: 100%;
}
</style>
<script>
function diffUsingJS(oldTextId, newTextId, outputId) {
  // get the baseText and newText values from the two textboxes, and split them into lines
  var oldText = document.getElementById(oldTextId).value;
  if(oldText == ''){
    var oldLines = [];
  } else {
    var oldLines = difflib.stringAsLines(oldText);
  }
    
  var newText = document.getElementById(newTextId).value
  if(newText == ''){
    var newLines = [];
  } else {
    var newLines = difflib.stringAsLines(newText);
  }

  // create a SequenceMatcher instance that diffs the two sets of lines
  var sm = new difflib.SequenceMatcher(oldLines, newLines);

  // get the opcodes from the SequenceMatcher instance
  // opcodes is a list of 3-tuples describing what changes should be made to the base text
  // in order to yield the new text
  var opcodes = sm.get_opcodes();
  var diffoutputdiv = document.getElementById(outputId);
  while (diffoutputdiv.firstChild) diffoutputdiv.removeChild(diffoutputdiv.firstChild);

  // build the diff view and add it to the current DOM
  diffoutputdiv.appendChild(diffview.buildView({
    baseTextLines: oldLines,
    newTextLines: newLines,
    opcodes: opcodes,
    contextSize: 4,
    viewType: 1
  }));
}

$(function(){
  @if(showIndex){
    $('#toggle-file-list').click(function(){
      $('#commit-file-list').toggle();
      if($(this).val() == 'Show file list'){
        $(this).val('Hide file list');
      } else {
        $(this).val('Show file list');
      }
    });
  }

  @diffs.zipWithIndex.map { case (diff, i) =>
    @if(diff.newContent != None || diff.oldContent != None){
      if($('#oldText-@i').length > 0){
        diffUsingJS('oldText-@i', 'newText-@i', 'diffText-@i');
      }
    }
  }
});
</script>