@(active: String,
  repository: gitbucket.core.service.RepositoryService.RepositoryInfo,
  id: Option[String] = None,
  expand: Boolean = false,
  isNoGroup: Boolean = true,
  info: Option[Any] = None,
  error: Option[Any] = None)(body: Html)(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.service.SystemSettingsService
@import context._
@import gitbucket.core.view.helpers._

@sidemenu(path: String, name: String, icon: String, label: String, count: Int = 0) = {
  <li @if(active == name){class="active"} @if(!expand){data-toggle="tooltip" data-placement="left" data-original-title="@label"}>
    <div class="@if(active == name){margin} else {gradient} pull-left"></div>
    <a href="@url(repository)@path">
      <i class="menu-icon @if(active == name){menu-icon-active} octicon octicon-@{icon} "></i>
      @if(expand){ @label}
      @if(expand && count > 0){
        <div class="pull-right"><span class="label">@count</span></div>
      }
    </a>
  </li>
}

<div class="container">
  @helper.html.information(info)
  @helper.html.error(error)
  @if(repository.commitCount > 0){
    <div class="pull-right">
      <div class="input-prepend">
        @if(loginAccount.isEmpty){
          <a title="You must be signed in to fork a repository" href="@path/signin?redirect=@urlEncode(s"${path}/${repository.owner}/${repository.name}")" class="btn btn-small" style="margin-bottom: 10px;">Fork</a>
        } else {
          @if(isNoGroup) {
            <a id="fork-link" href="javascript:void(0);" class="btn btn-small" style="margin-bottom: 10px;">Fork</a>
          } else {
            <a href="@path/@repository.owner/@repository.name/fork" class="btn btn-small" rel="facebox" style="margin-bottom: 10px;">Fork</a>
          }
        }
        <span class="add-on count"><a href="@url(repository)/network/members">@repository.forkedCount</a></span>
      </div>
    </div>
    @if(loginAccount.isDefined && isNoGroup){
      <form id="fork-form" method="post" action="@path/@repository.owner/@repository.name/fork">
        <input type="hidden" name="account" value="@loginAccount.get.userName"/>
      </form>
    }
  }
  <div class="head">
    @helper.html.repositoryicon(repository, true)
    <a href="@url(repository.owner)">@repository.owner</a> / <a href="@url(repository)" class="strong">@repository.name</a>

    @defining(repository.repository){ x =>
      @if(repository.repository.originRepositoryName.isDefined){
        <div class="forked">
          forked from <a href="@path/@x.parentUserName/@x.parentRepositoryName">@x.parentUserName/@x.parentRepositoryName</a>
        </div>
      }
    }
  </div>
</div>
<hr style="margin-bottom: 20px;"/>
<div class="container body">
  <div style="width: @if(expand){170px} else {40px};" class="pull-right">
    <ul class="sidemenu">
      <li style="height: 12px"><div class="gradient pull-left" style="height: 12px"></div></li>
      @sidemenu(""       , "code"   , "code" , "Code")
      @sidemenu("/issues", "issues" , "issue-opened" , "Issues", repository.issueCount)
      @sidemenu("/pulls" , "pulls"  , "git-pull-request" , "Pull Requests", repository.pullCount)
      @sidemenu("/wiki"  , "wiki"   , "book"  , "Wiki")
      @if(loginAccount.isDefined && (loginAccount.get.isAdmin || repository.managers.contains(loginAccount.get.userName))){
        @sidemenu("/settings" , "settings" , "tools", "Settings")
      }
      <li style="height: 12px"><div class="gradient pull-left" style="height: 12px"></div></li>
    </ul>
    @if(expand){
      <div class="small">
        <strong id="repository-url-proto">HTTP</strong> <span class="mute">clone URL</span>
      </div>
      @helper.html.copy("repository-url-copy", repository.httpUrl){
        <input type="text" value="@repository.httpUrl" id="repository-url" readonly>
      }
      @if(settings.ssh && loginAccount.isDefined){
        <div class="small">
          <span class="mute">You can clone <a href="javascript:void(0);" id="repository-url-http">HTTP</a> or <a href="javascript:void(0);" id="repository-url-ssh">SSH</a>.</span>
        </div>
      }
      @id.map { id =>
        <div style="margin-top: 10px;">
          <a href="@{url(repository)}/archive/@{encodeRefName(id)}.zip" class="btn btn-small" style="width: 147px;font-weight: bold;"><i class="octicon octicon-cloud-download"></i>Download ZIP</a>
        </div>
        <div style="margin-top: 10px;">
          <a href="@{url(repository)}/archive/@{encodeRefName(id)}.tar.gz" class="btn btn-small" style="width: 147px;font-weight: bold;"><i class="octicon octicon-cloud-download"></i>Download TAR.GZ</a>
        </div>
      }
    }
  </div>
  <div style="margin-right: @if(expand){180px} else {50px};">
    @if(expand){
      @repository.repository.description.map { description =>
        <p class="description">@description</p>
      }
      <div style="border: 1px solid #eee; padding: 4px; margin-bottom: 10px;">
        <table class="fill-width">
          <tr>
            <td style="width: 33%; text-align: center;">
              <a href="@url(repository)/commits/@encodeRefName(id.getOrElse(""))" class="header-link">
                <i class="octicon octicon-history"></i>
                <strong>@repository.commitCount</strong> commits
              </a>
            </td>
            <td style="width: 33%; text-align: center;">
              <a href="@url(repository)/branches" class="header-link" class="header-link">
                <i class="octicon octicon-git-branch"></i>
                <strong>@repository.branchList.length</strong> branches
              </a>
            </td>
            <td style="width: 33%; text-align: center;">
              <a href="@url(repository)/tags" class="header-link" class="header-link">
                <i class="octicon octicon-tag"></i>
                <strong>@repository.tags.length</strong> releases
              </a>
            </td>
          </tr>
        </table>
      </div>
    }
    @body
  </div>
</div>
<script>
$(function(){

  $('ul.sidemenu a').mouseover(function(e){
    var target = e.target;
    if(e.target.tagName == "I"){
      target = e.target.parentElement;
    }
    $(target).prev    ('div.gradient'        ).css('border-left', '1px solid silver');
  });

  $('ul.sidemenu a').mouseout(function(e){
    var target = e.target;
    if(e.target.tagName == "I"){
      target = e.target.parentElement;
    }
    $(target).prev    ('div.gradient'        ).css('border-left', '1px solid #eee');
  });

  $('a[rel*=facebox]').facebox({
    'loadingImage': '@assets/vendors/facebox/loading.gif',
    'closeImage': '@assets/vendors/facebox/closelabel.png'
  });

  $(document).on("click", ".js-fork-owner-select-target", function() {
    if (!$(this).hasClass("disabled")) {
      var account = $(this).text().replace("@@", "");
      $("#account").val(account);
      $("#fork").submit();
    }
  });

  @if(loginAccount.isDefined){
    $(document).on("click", "a#fork-link", function(e) {
      e.preventDefault();
      $('#fork-form').submit();
    });
  }

  @if(settings.ssh && loginAccount.isDefined){
    $('#repository-url-http').click(function(){
      $('#repository-url-proto').text('HTTP');
      $('#repository-url').val('@repository.httpUrl');
      $('#repository-url-copy').attr('data-clipboard-text', $('#repository-url').val());
    });

    $('#repository-url-ssh').click(function(){
      $('#repository-url-proto').text('SSH');
      $('#repository-url').val('@repository.sshUrl(settings.sshPort.getOrElse(SystemSettingsService.DefaultSshPort), loginAccount.get.userName)');
      $('#repository-url-copy').attr('data-clipboard-text', $('#repository-url').val());
    });
  }
});
</script>