{{template "ng/base/head" .}}
{{template "ng/base/header" .}}
<div id="repo-wrapper">
    {{template "repo/header" .}}
    <div class="container clear" id="diff-page">
        {{if .IsDiffCompare }}
        <div class="panel panel-info panel-radius compare-head-box">
            <div class="panel-header">
                <a class="pull-right btn btn-blue btn-header btn-medium btn-radius" rel="nofollow" href="{{.SourcePath}}">{{.i18n.Tr "repo.diff.browse_source"}}</a>
                <h4><a href="{{$.RepoLink}}/commit/{{.BeforeCommitId}}" class="label label-green">{{ShortSha .BeforeCommitId}}</a> ... <a href="{{$.RepoLink}}/commit/{{.AfterCommitId}}" class="label label-green">{{ShortSha .AfterCommitId}}</a></h4>
            </div>
            <div class="panel-body compare">
                {{template "repo/commits_table" .}}
            </div>
        </div>
        {{else}}
        <div class="panel panel-info panel-radius diff-head-box">
            <div class="panel-header">
                <a class="pull-right btn btn-blue btn-header btn-medium btn-radius" rel="nofollow" href="{{.SourcePath}}">{{.i18n.Tr "repo.diff.browse_source"}}</a>
                <h4>{{.Commit.Message}}</h4>
            </div>
            <div class="panel-body">
                <span class="pull-right">
                    <ul class="list-unstyled">
                        <li class="inline">{{.i18n.Tr "repo.diff.parent"}}</li>
                        {{range .Parents}}
                        <li class="inline"><a href="{{$.RepoLink}}/commit/{{.}}"><span class="label label-blue">{{ShortSha .}}</span></a></li>
                        {{end}}
                        <li class="inline">{{.i18n.Tr "repo.diff.commit"}} <span class="label label-blue">{{ShortSha .CommitId}}</span></li>
                    </ul>
                </span>
                <p class="author">
                    {{if .Author}}
                    <img class="avatar-30" src="{{.Author.AvatarLink}}" />
                    <a href="{{AppSubUrl}}/{{.Author.Name}}"><strong>{{.Commit.Author.Name}}</strong></a>
                    {{else}}
                    <img class="avatar-30" src="{{AvatarLink .Commit.Author.Email}}" />
                    <strong>{{.Commit.Author.Name}}</strong>
                    {{end}}
                    <span class="text-grey" id="authored-time">{{TimeSince .Commit.Author.When $.Lang}}</span> 
                </p>
            </div>
        </div>
        {{end}}
        {{if .DiffNotAvailable}}
        <h4>{{.i18n.Tr "repo.diff.data_not_available"}}</h4>
        {{else}}
        <div class="diff-detail-box diff-box">
            <a class="pull-right btn btn-gray btn-header btn-radius text-black" data-target="#diff-files">{{.i18n.Tr "repo.diff.show_diff_stats"}}</a>
            <p class="showing">
                <i class="fa fa-retweet"></i>
                {{.i18n.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
            </p>
            <ol class="detail-files collapse 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}}" data-toggle="tooltip" data-placement="right" title="{{DiffTypeToStr .Type}}">&nbsp;</span>
                    <a class="file" href="#diff-{{.Index}}">{{.Name}}</a>
                </li>
                {{end}}
            </ol>
        </div>

        {{range .Diff.Files}}
        <div class="panel panel-radius diff-file-box diff-box file-content" id="diff-{{.Index}}">
            <div class="panel-header">
                <div class="diff-counter count pull-left">
                    {{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}}
                    {{$.i18n.Tr "repo.diff.bin"}}
                    {{end}}
                </div>
                <a class="btn btn-gray btn-header btn-radius text-black pull-right" rel="nofollow" href="{{$.SourcePath}}/{{.Name}}">{{$.i18n.Tr "repo.diff.view_file"}}</a>
                <span class="file">{{.Name}}</span>
            </div>
            {{$isImage := (call $.IsImageFile .Name)}}
            <div class="panel-body file-body file-code code-view code-diff">
                {{if $isImage}}
                    <div class="text-center">
                        <img src="{{$.RawPath}}/{{.Name}}">
                    </div>
                {{else}}
                <table>
                    <tbody>
                        {{range .Sections}}
                        {{range .Lines}}
                        <tr class="{{DiffLineTypeToStr .Type}}-code nl-1 ol-1">
                            <td class="lines-num lines-num-old">
                                <span rel="L1">{{if .LeftIdx}}{{.LeftIdx}}{{end}}</span>
                            </td>
                            <td class="lines-num lines-num-new">
                                <span rel="L1">{{if .RightIdx}}{{.RightIdx}}{{end}}</span>
                            </td>
                            
                            <td class="lines-code">
                                <pre>{{ToUtf8 .Content}}</pre>
                            </td>
                        </tr>
                        {{end}}
                        {{end}}
                    </tbody>
                </table>
                {{end}}
            </div>
        </div>
        <br> 
        {{end}}
        {{end}}
    </div>
</div>
{{template "ng/base/footer" .}}