@(issue: model.Issue,
  comments: List[model.IssueComment],
  issueLabels: List[model.Label],
  collaborators: List[String],
  milestones: List[(model.Milestone, Int, Int)],
  labels: List[model.Label],
  hasWritePermission: Boolean,
  repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
@import context._
@import view.helpers._
@html.main(s"${issue.title} - Issue #${issue.issueId} - ${repository.owner}/${repository.name}", Some(repository)){
  @html.header("issues", repository)
  @tab("issues", repository)
  <ul class="nav nav-tabs">
    <li class="pull-left"><a href="@url(repository)/issues"><i class="icon-arrow-left"></i> Back to issue list</a></li>
    <li class="pull-right">Issue #@issue.issueId</li>
  </ul>
  <div class="row-fluid">
    <div class="span10">
      @issuedetail(issue, comments, collaborators, milestones, hasWritePermission, repository)
      @commentlist(issue, comments, hasWritePermission, repository)
      @commentform(issue, hasWritePermission, repository)
    </div>
    <div class="span2">
      @if(issue.closed) {
        <span class="label label-important issue-status">Closed</span>
      } else {
        <span class="label label-success issue-status">Open</span>
      }
      <div class="small" style="text-align: center;">
        @defining(comments.filter( _.action.contains("comment") ).size){ count =>
          <span class="strong">@count</span> @plural(count, "comment")
        }
      </div>
      <hr/>
      <div style="margin-bottom: 8px;">
      <span class="strong">Labels</span>
      @if(hasWritePermission){
        <div class="pull-right">
          @helper.html.dropdown() {
            @labels.map { label =>
              <li>
                <a href="#" class="toggle-label" data-label-id="@label.labelId">
                  @helper.html.checkicon(issueLabels.exists(_.labelId == label.labelId))
                  <span class="label" style="background-color: #@label.color;">&nbsp;</span>
                  @label.labelName
                </a>
              </li>
            }
          }
        </div>
      }
      </div>
      <ul class="label-list nav nav-pills nav-stacked">
        @labellist(issueLabels)
      </ul>
    </div>
  </div>
}
<script>
$(function(){
  $('a.toggle-label').click(function(){
    var path, icon;
    var i = $(this).children('i');
    if(i.hasClass('icon-ok')){
      path = 'delete';
      icon = 'icon-white';
    } else {
      path = 'new';
      icon = 'icon-ok';
    }
    $.post('@url(repository)/issues/@issue.issueId/label/' + path,
    {
      labelId : $(this).data('label-id')
    },
    function(data){
      i.removeClass().addClass(icon);
      $('ul.label-list').empty().html(data);
    });
    return false;
  });
});
</script>