@(branchInfo: Seq[util.JGitUtil.BranchInfo],
  hasWritePermission: Boolean,
  repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
@import context._
@import view.helpers._
@html.main(s"${repository.owner}/${repository.name}", Some(repository)) {
  @html.menu("code", repository){
    <h1>Branches</h1>
    <table class="table table-bordered table-hover table-issues">
      <thead>
        <tr>
          <th style="background: #f5f5f5;color: #666;">All branches</th>
        </tr>
      </thead>
      <tbody>
      @branchInfo.map { branch =>
        <tr><td style="padding: 12px;">
          <div class="branch-action">
              @branch.mergeInfo.map{ info =>
                <a href="@url(repository)/compare/@{encodeRefName(repository.repository.defaultBranch)}...@{encodeRefName(branch.name)}" class="btn btn-small">Compare</a>
                @if(hasWritePermission){
                  <a href="@url(repository)/delete/@encodeRefName(branch.name)" class="btn  @if(info.isMerged){ btn-warning }else{ btn-danger } delete-branch btn-mini" data-name="@branch.name" @if(info.isMerged){ title="merged branch" }><i class="icon icon-trash icon-white"></i></a>
                }
              }
          </div>
          <div class="branch-details">
            <a href="@url(repository)/tree/@encodeRefName(branch.name)" class="branch-name">@branch.name</a>
            <span class="branch-meta">
              <span>Updated @helper.html.datetimeago(branch.commitTime, false)
                by <span>@user(branch.committerName, branch.committerEmailAddress, "muted-link")</span>
              </span>
            </span>
          </div>
          <div class="branch-a-b-count">
            @if(branch.mergeInfo.isEmpty){
              <span class="label">Default</span>
            }else{
              @branch.mergeInfo.map{ info =>
                <div data-toggle="tooltip" title="@info.ahead commits ahead, @info.behind commits behind @repository.repository.defaultBranch">
                  <div class="a-b-count-widget">
                    <div class="count-half"><div class="count-value">@info.ahead</div></div>
                    <div class="count-half"><div class="count-value">@info.behind</div></div>
                    </div>
                  </div>
                </div>
              }
            }
          </div>
        </tr>
      }
    </table>
  }
}
<script>
$(function(){
  $('.delete-branch').click(function(e){
    var branchName = $(e.target).data('name');
    return confirm('Are you sure you want to remove the ' + branchName + ' branch?');
  });
  $('*[data-toggle=tooltip]').tooltip();
});
</script>
<style>
.muted-link{
  color: #777;
}
.muted-link:hover{
  color: #4183c4;
}
.branch-details{
  display: inline-block;
  width: 490px;
  margin-right: 10px;
}
.branch-name{
  color: #4183c4;
  display: inline-block;
  padding: 2px 6px;
  font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
  background-color: rgba(209,227,237,0.5);
  border-radius: 3px;
}
.branch-meta{
  color: #aaa;
  font-size: 12px;
  line-height: 20px;
}
.branch-action{
  display: inline-block;
  float: right;
  position: relative;
  top: -3px;
  height: 20px;
}
.branch-a-b-count{
  display: inline-block;
  vertical-align: middle;
  width: 181px;
  text-align: center;
  color: rgba(0,0,0,0.5);
}
.a-b-count-widget{
  font-size: 10px;
}
.a-b-count-widget .count-half{
  width:90px;
  position: relative;
  text-align: right;
  float: left;
}
.a-b-count-widget .count-half:last-child {
  text-align: left;
  border-left: 1px solid #bbb;
}
.a-b-count-widget .count-half .count-value{
  padding: 0 3px;
}

</style>