@(issue: model.Issue,
  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 view.helpers._
<div style="margin-bottom: 8px;">
  <span class="muted small strong">Labels</span>
  @if(hasWritePermission){
    <div class="pull-right">
      @helper.html.dropdown(right = true) {
        @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>
<hr/>
<div style="margin-bottom: 8px;">
  <span class="muted small strong">Milestone</span>
  <div class="pull-right">
    <span id="label-milestone">
      @issue.milestoneId.map { milestoneId =>
        @milestones.collect { case (milestone, _, _) if(milestone.milestoneId == milestoneId) =>
          Milestone: <span class="strong">@milestone.title</span>
        }
      }.getOrElse("No milestone")
    </span>
    <div id="milestone-progress-area">
      @issue.milestoneId.map { milestoneId =>
        @milestones.collect { case (milestone, openCount, closeCount) if(milestone.milestoneId == milestoneId) =>
          @issues.milestones.html.progress(openCount + closeCount, closeCount)
        }
      }
    </div>
    @if(hasWritePermission){
      @helper.html.dropdown() {
        <li><a href="javascript:void(0);" class="milestone" data-id=""><i class="icon-remove-circle"></i> Clear this milestone</a></li>
        @milestones.filter(_._1.closedDate.isEmpty).map { case (milestone, _, _) =>
          <li>
            <a href="javascript:void(0);" class="milestone" data-id="@milestone.milestoneId" data-title="@milestone.title">
              @helper.html.checkicon(Some(milestone.milestoneId) == issue.milestoneId) @milestone.title
              <div class="small" style="padding-left: 20px;">
                @milestone.dueDate.map { dueDate =>
                  @if(isPast(dueDate)){
                    <img src="@assets/common/images/alert_mono.png"/>Due in @date(dueDate)
                  } else {
                    <span class="muted">Due in @date(dueDate)</span>
                  }
                }.getOrElse {
                  <span class="muted">No due date</span>
                }
              </div>
            </a>
          </li>
        }
      }
    }
  </div>
</div>
<hr/>
<div style="margin-bottom: 8px;">
  <span class="muted small strong">Assignee</span>
  <span id="label-assigned">
    @issue.assignedUserName.map { userName =>
      @avatar(userName, 20) @user(userName, styleClass="username strong") is assigned
    }.getOrElse("No one is assigned")
  </span>
  @if(hasWritePermission){
    @helper.html.dropdown() {
      <li><a href="javascript:void(0);" class="assign" data-name=""><i class="icon-remove-circle"></i> Clear assignee</a></li>
      @collaborators.map { collaborator =>
        <li>
          <a href="javascript:void(0);" class="assign" data-name="@collaborator">
            @helper.html.checkicon(Some(collaborator) == issue.assignedUserName)@avatar(collaborator, 20) @collaborator
          </a>
        </li>
      }
    }
  }
</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>