@(issue: model.Issue,
  comments: List[model.IssueComment],
  collaborators: List[String],
  milestones: List[(model.Milestone, Int, Int)],
  hasWritePermission: Boolean,
  repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
@import context._
@import view.helpers._
<div class="issue-avatar-image">@avatar(issue.openedUserName, 48)</div>
<div class="box issue-box">
  <div class="box-content" style="padding: 0px;">
    <div class="issue-header">
      @if(hasWritePermission || loginAccount.map(_.userName == issue.openedUserName).getOrElse(false)){
        <span class="pull-right"><a class="btn btn-small" href="#" id="edit">Edit</a></span>
      }
      <div class="small muted">
        @user(issue.openedUserName, styleClass="username strong") opened this issue @datetime(issue.registeredDate)
      </div>
      <h4 id="issueTitle">@issue.title</h4>
    </div>
    <div class="issue-info">
      <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 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, false)
            }
          }
        </div>
        @if(hasWritePermission){
          @helper.html.dropdown() {
            <li><a href="javascript:void(0);" class="milestone" data-id=""><i class="icon-remove-circle"></i> No milestone</a></li>
            @milestones.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>
    <div class="issue-content" id="issueContent">
      @markdown(issue.content getOrElse "No description given.", repository, false, true)
    </div>
  </div>
</div>
<div class="issue-participants">
  @defining((issue.openedUserName :: comments.map(_.commentedUserName)).distinct){ participants =>
    <span class="strong">@participants.size</span> @plural(participants.size, "participant")
    @participants.map { participant => @avatarLink(participant, 20, tooltip = true) }
  }
</div>
<script>
$(function(){
  $('#edit').click(function(){
    $.get('@url(repository)/issues/_data/@issue.issueId',
    {
      dataType : 'html'
    },
    function(data){
      $('#issueContent').empty().html(data);
    });
    return false;
  });

  $('a.assign').click(function(){
    var $this = $(this);
    var userName = $this.data('name');
    $.post('@url(repository)/issues/@issue.issueId/assign',
    {
      assignedUserName: userName
    },
    function(){
      $('a.assign i.icon-ok').attr('class', 'icon-white');
      if(userName == ''){
        $('#label-assigned').text('No one is assigned');
      } else {
        $('#label-assigned').empty()
          .append($this.find('img.avatar').clone(false)).append(' ')
          .append($('<a class="username strong">').attr('href', '@path/' + userName).text(userName))
          .append(' is assigned');
        $('a.assign[data-name=' + userName + '] i').attr('class', 'icon-ok');
      }
    });
  });

  $('a.milestone').click(function(){
    var title = $(this).data('title');
    var milestoneId = $(this).data('id');
    $.post('@url(repository)/issues/@issue.issueId/milestone',
    {
      milestoneId: milestoneId
    },
    function(data){
      console.log(data);
      $('a.milestone i.icon-ok').attr('class', 'icon-white');
      if(milestoneId == ''){
        $('#label-milestone').text('No milestone');
        $('#milestone-progress-area').empty();
      } else {
        $('#label-milestone').html($('<span>').append('Milestone: ').append($('<span class="strong">').text(title)));
        $('#milestone-progress-area').html(data);
        $('a.milestone[data-id=' + milestoneId + '] i').attr('class', 'icon-ok');
      }
    });
  });
});
</script>