{{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 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">
				{{if not $file.IsRenamed}}
					{{$isImage := (call $.IsImageFile $file.Name)}}
					{{if and $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}}
				{{end}}
			</div>
		</div>
		<br>
	{{end}}
{{end}}
