{{if .DiffNotAvailable}}
<h4>{{.i18n.Tr "repo.diff.data_not_available"}}</h4>
{{else}}
<div class="diff-detail-box diff-box">
  <div>
    <i class="fa fa-retweet"></i>
    {{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
    <div class="ui right">
      <a class="ui tiny basic black toggle button" data-target="#diff-files">{{.i18n.Tr "repo.diff.show_diff_stats"}}</a>
    </div>
  </div>
  <ol class="detail-files hide" id="diff-files">
    {{range .Diff.Files}}
    <li>
      <div class="diff-counter count pull-right">
        {{if not .IsBin}}
        <span class="add" data-line="{{.Addition}}">{{.Addition}}</span>
        <span class="bar">
          <span class="pull-left add"></span>
          <span class="pull-left del"></span>
        </span>
        <span class="del" data-line="{{.Deletion}}">{{.Deletion}}</span>
        {{else}}
        <span>{{$.i18n.Tr "repo.diff.bin"}}</span>
        {{end}}
      </div>
      <!-- todo finish all file status, now modify, add, delete and rename -->
      <span class="status {{DiffTypeToStr .Type}} poping up" data-content="{{DiffTypeToStr .Type}}" data-variation="inverted tiny" data-position="right center">&nbsp;</span>
      <a class="file" href="#diff-{{.Index}}">{{.Name}}</a>
    </li>
    {{end}}
  </ol>
</div>

{{range $i, $file := .Diff.Files}}
<div class="diff-file-box diff-box file-content" id="diff-{{.Index}}">
  <h4 class="ui top attached normal header">
    <div class="diff-counter count ui left">
        {{if $file.IsBin}}
          {{$.i18n.Tr "repo.diff.bin"}}
        {{else if not $file.IsRenamed}}
          <span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
          <span class="bar">
            <span class="pull-left add"></span>
            <span class="pull-left del"></span>
          </span>
          <span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
        {{end}}
    </div>
    <span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}</span>
    <div class="ui right">
      {{if $file.IsDeleted}}
      <a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
      {{else}}
      <a class="ui basic tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
      {{end}}
    </div>
  </h4>
  <div class="ui attached table segment">
    {{$isImage := (call $.IsImageFile $file.Name)}}
    {{if $isImage}}
    <div class="center">
      <img src="{{$.RawPath}}/{{EscapePound .Name}}">
    </div>
    {{else}}
    <div class="file-body file-code code-view code-diff">
      <table>
        <tbody>
          {{range .Sections}}
          {{range $k, $line := .Lines}}
          <tr class="{{DiffLineTypeToStr .Type}}-code nl-{{$k}} ol-{{$k}}">
            <td class="lines-num lines-num-old">
              <span rel="{{if $line.LeftIdx}}diff-{{Sha1 $file.Name}}L{{$line.LeftIdx}}{{end}}">{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}</span>
            </td>
            <td class="lines-num lines-num-new">
              <span rel="{{if $line.RightIdx}}diff-{{Sha1 $file.Name}}R{{$line.RightIdx}}{{end}}">{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}</span>
            </td>
            <td class="lines-code">
              <pre>{{$line.Content}}</pre>
            </td>
          </tr>
          {{end}}
          {{end}}
        </tbody>
      </table>
    </div>
    {{end}}
  </div>
</div>
<br>
{{end}}
{{end}}