{{if .DiffNotAvailable}}
	<h4>{{.i18n.Tr "repo.diff.data_not_available"}}</h4>
{{else}}
	<div class="diff-detail-box diff-box ui sticky">
		<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" href="?style={{if .IsSplitStyle}}unified{{else}}split{{end}}">{{ if .IsSplitStyle }}{{.i18n.Tr "repo.diff.show_unified_view"}}{{else}}{{.i18n.Tr "repo.diff.show_split_view"}}{{end}}</a>
				<a class="ui tiny basic toggle button" data-target="#diff-files">{{.i18n.Tr "repo.diff.show_diff_stats"}}</a>
				{{template "repo/diff/new_review" .}}
			</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">
								<div class="pull-left add"></div>
								<div class="pull-left del"></div>
							</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 .GetType}} poping up" data-content="{{DiffTypeToStr .GetType}}" 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}}
		{{if $file.IsIncomplete}}
			<div class="diff-file-box diff-box file-content">
				<h4 class="ui top attached normal header rounded">
					<div class="diff-counter count ui left">
						{{if not $file.IsRenamed}}
							<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
							<span class="bar">
								<div class="pull-left add"></div>
								<div class="pull-left del"></div>
							</span>
							<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
						{{end}}
					</div>
					<span class="file">{{$file.Name}}</span>
					<div>{{$.i18n.Tr "repo.diff.file_suppressed"}}</div>
					{{if not $file.IsSubmodule}}
						{{if $file.IsDeleted}}
							<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
						{{else}}
							<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
						{{end}}
					{{end}}
				</h4>
			</div>
		{{else}}
			<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}}" id="diff-{{.Index}}">
				<h4 class="ui top attached normal header">
					<div class="diff-counter count">
						{{if $file.IsBin}}
							{{$.i18n.Tr "repo.diff.bin"}}
						{{else if not $file.IsRenamed}}
							<span class="add" data-line="{{.Addition}}">+ {{.Addition}}</span>
							<span class="bar">
								<div class="pull-left add"></div>
								<div class="pull-left del"></div>
							</span>
							<span class="del" data-line="{{.Deletion}}">- {{.Deletion}}</span>
						{{end}}
					</div>
					<span class="file">{{if $file.IsRenamed}}{{$file.OldName}} &rarr; {{end}}{{$file.Name}}{{if .IsLFSFile}} ({{$.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
					{{if not $file.IsSubmodule}}
						{{if $file.IsDeleted}}
							<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.BeforeSourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
						{{else}}
							<a class="ui basic grey tiny button" rel="nofollow" href="{{EscapePound $.SourcePath}}/{{EscapePound .Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
						{{end}}
					{{end}}
				</h4>
				<div class="ui attached unstackable table segment">
					{{if ne $file.Type 4}}
						{{$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 {{if $.IsSplitStyle}}code-diff-split{{else}}code-diff-unified{{end}}">
								<table>
									<tbody>
										{{if $.IsSplitStyle}}
											{{$highlightClass := $file.GetHighlightClass}}
											{{range $j, $section := $file.Sections}}
												{{range $k, $line := $section.Lines}}
													<tr class="{{DiffLineTypeToStr .GetType}}-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>
															{{if $line.LeftIdx}}
															<a class="ui green button add-code-comment add-code-comment-left" data-side="left" data-idx="{{$line.LeftIdx}}">+</a>
															{{end}}
														</td>
														<td class="lines-code lines-code-old halfwidth">
															<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.LeftIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
														</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>
															{{if $line.RightIdx}}
															<a class="ui green button add-code-comment add-code-comment-right" data-side="right" data-idx="{{$line.RightIdx}}">+</a>
															{{end}}
														</td>
													{{if index $.CodeComments $file.Name (mul $line.LeftIdx -1)}}
														<td class="add-comment-left add-comment-right">
															<div class="field comment-code-cloud">
																<div class="comment-list">
																	<ui class="ui comments">
																	{{ template "repo/diff/comments" dict "root" $ "comments" (index $.CodeComments $file.Name (mul $line.LeftIdx -1))}}
																	</ui>
																</div>
																<form class="ui form" action="/jonas/ggre/pulls/1/files/reviews/comments" method="post">
																	<input name="_csrf" value="cvHYSIf3f6KNll956UBanD4Dy7c6MTUyNTk2MDkwNjg3NTcyMjY5OQ==" type="hidden">
																	<input name="side" value="previous" type="hidden">
																	<input name="line" value="2" type="hidden">
																	<input name="path" value="README.md" type="hidden">
																	<input name="commit_id" value="e324f1688f063d6fd9268fb8f02149c9eb1a867c" type="hidden">
																	<input name="is_review" value="true" type="hidden">
																	<input name="diff_start_cid" type="hidden">
																	<input name="diff_end_cid" type="hidden">
																	<input name="diff_base_cid" type="hidden">
																	<div class="ui top attached tabular menu" data-write="write489406" data-preview="preview489406">
																		<a class="item active" data-tab="write489406">Write</a>
																		<a class="item" data-tab="preview489406" data-url="/api/v1/markdown" data-context="/jonas/ggre">Preview</a>
																	</div>
																	<div class="ui bottom attached tab segment active" data-tab="write489406">
																		<div class="field">
																			<textarea name="content" placeholder="Leave a comment"></textarea>
																		</div>
																	</div>
																	<div class="ui bottom attached tab segment markdown" data-tab="preview489406"></div>
																	<div class="footer">
																		<span class="markdown-info"><i class="octicon octicon-markdown"></i> Styling with markdown is supported.</span>
																		<div class="ui right floated">
																			<div class="ui submit tiny basic button btn-cancel">Cancel</div>
																			<div class="ui submit tiny basic button btn-add-single">Add single comment</div>
																			<button type="submit" class="ui submit green tiny button btn-add-comment">Add comment</button>
																			<div class="ui submit green tiny button btn-start-review">Start review</div>
																		</div>
																	</div>
																</form>
															</div>

														</td>
													{{end}}
														<td class="lines-code lines-code-new halfwidth">
															<pre><code class="wrap {{if $highlightClass}}language-{{$highlightClass}}{{else}}nohighlight{{end}}">{{if $line.RightIdx}}{{$section.GetComputedInlineDiffFor $line}}{{end}}</code></pre>
														</td>
													</tr>
												{{end}}
											{{end}}
										{{else}}
											{{template "repo/diff/section_unified" .}}
										{{end}}
									</tbody>
								</table>
							</div>
						{{end}}
					{{end}}
				</div>
			</div>
		{{end}}
	<br>
	{{end}}

	{{if .Diff.IsIncomplete}}
		<div class="diff-file-box diff-box file-content">
			<h4 class="ui top attached normal header">
				{{$.i18n.Tr "repo.diff.too_many_files"}}
			</h4>
		</div>
	{{end}}

	<div id="pull_review_add_comment" class="hide">
		{{template "repo/diff/new_comment" .}}
	</div>

	{{if .IsSplitStyle}}
		<script>
			(function() {
				$('tr.add-code').each(function() {
					var prev = $(this).prev();
					if(prev.is('.del-code') && prev.children().eq(3).text().trim() === '') {
						while(prev.prev().is('.del-code') && prev.prev().children().eq(3).text().trim() === '') {
							prev = prev.prev();
						}
						prev.children().eq(2).html($(this).children().eq(2).html());
						prev.children().eq(3).html($(this).children().eq(3).html());

						prev.children().eq(0).addClass('del-code');
						prev.children().eq(1).addClass('del-code');
						prev.children().eq(2).addClass('add-code');
						prev.children().eq(3).addClass('add-code');
						$(this).remove();
					}
				});
			}());
		</script>
	{{end}}
{{end}}