<h4 class="ui top attached header">
  {{.CommitCount}} {{.i18n.Tr "repo.commits.commits"}} {{if .Branch}}({{.Branch}}){{end}}
  {{if .PageIsCommits}}
  <div class="ui right">
    <form action="{{.RepoLink}}/commits/{{.BranchName}}/search">
      <div class="ui tiny search input">
        <input name="q" placeholder="{{.i18n.Tr "repo.commits.search"}}" value="{{.Keyword}}" autofocus>
      </div>
      <button class="ui black tiny button" data-panel="#add-deploy-key-panel">{{.i18n.Tr "repo.commits.find"}}</button>
    </form>
  </div>
  {{else if .IsDiffCompare}}
  <a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID}}" class="ui green sha label">{{ShortSha .BeforeCommitID}}</a> ... <a href="{{$.CommitRepoLink}}/commit/{{.AfterCommitID}}" class="ui green sha label">{{ShortSha .AfterCommitID}}</a>
  {{end}}
</h4>

{{if .Commits}}
<div class="ui attached table segment">
  <table class="ui very basic striped fixed table single line" id="commits-table">
    <thead>
      <tr>
        <th class="four wide">{{.i18n.Tr "repo.commits.author"}}</th>
        <th class="nine wide message"><span class="sha">SHA1</span> {{.i18n.Tr "repo.commits.message"}}</th>
        <th class="three wide right aligned">{{.i18n.Tr "repo.commits.date"}}</th>
      </tr>
    </thead>
    <tbody>
    {{ $r:= List .Commits}}
    {{range $r}}
      <tr>
        <td class="author">
          {{if .User}}
          <img class="ui avatar image" src="{{.User.AvatarLink}}" alt=""/>&nbsp;&nbsp;<a href="{{AppSubUrl}}/{{.User.Name}}">{{.Author.Name}}</a>
          {{else}}
          <img class="ui avatar image" src="{{AvatarLink .Author.Email}}" alt=""/>&nbsp;&nbsp;{{.Author.Name}}
          {{end}}
        </td>
        <td class="message collapsing">
          <a rel="nofollow" class="ui sha label" href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{.ID}}">{{ShortSha .ID.String}}</a>
          {{RenderCommitMessage .Summary $.RepoLink $.Repository.ComposeMetas}}   
        </td>
        <td class="grey text right aligned">{{TimeSince .Author.When $.Lang}}</td>
      </tr>
    {{end}}
    </tbody>
  </table>
</div>
{{end}}

{{with .Page}}
{{if gt .TotalPages 1}}
<div class="center page buttons">
  <div class="ui borderless pagination menu">
    <a class="{{if not .HasPrevious}}disabled{{end}} item" {{if .HasPrevious}}href="{{$.RepoLink}}/commits/{{$.BranchName}}{{if $.FileName}}/{{$.FileName}}{{end}}?page={{.Previous}}"{{end}}>
      <i class="left arrow icon"></i> {{$.i18n.Tr "repo.issues.previous"}}
    </a>
    {{range .Pages}}
    {{if eq .Num -1}}
    <a class="disabled item">...</a>
    {{else}}
    <a class="{{if .IsCurrent}}active{{end}} item" {{if not .IsCurrent}}href="{{$.RepoLink}}/commits/{{$.BranchName}}{{if $.FileName}}/{{$.FileName}}{{end}}?page={{.Num}}"{{end}}>{{.Num}}</a>
    {{end}}
    {{end}}
    <a class="{{if not .HasNext}}disabled{{end}} item" {{if .HasNext}}href="{{$.RepoLink}}/commits/{{$.BranchName}}{{if $.FileName}}/{{$.FileName}}{{end}}?page={{.Next}}"{{end}}>
      {{$.i18n.Tr "repo.issues.next"}} <i class="icon right arrow"></i>
    </a>
  </div>
</div>
{{end}}
{{end}}