@(issue: model.Issue,
  comments: List[model.IssueComment],
  issueLabels: List[model.Label],
  collaborators: List[String],
  milestones: List[model.Milestone],
  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">
      <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">
              <a href="@url(issue.openedUserName)" class="username">@issue.openedUserName</a> 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) <a href="@url(userName)" class="username strong">@userName</a> 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"><i class="icon-white"></i>@avatar(collaborator, 20) @collaborator</a></li>
                }
              }
            }
            <div class="pull-right">
              <span id="label-milestone">
                @issue.milestoneId.map { milestoneId =>
                  @milestones.find(_.milestoneId == milestoneId).map { milestone =>
                    Milestone: <strong>@milestone.title</strong>
                  }
                }.getOrElse("No milestone")
              </span>
              @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 { milestone =>
                    <li>
                      <a href="javascript:void(0);" class="milestone" data-id="@milestone.milestoneId" data-title="@milestone.title">
                        <i class="icon-white"></i> @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 =>
          <strong>@participants.size</strong> @plural(participants.size, "participant")
          @participants.map { participant => <a href="@url(participant)">@avatar(participant, 20, tooltip = true)</a> }
        }
      </div>
      @comments.map { comment =>
        @if(comment.action != "close" && comment.action != "reopen"){
        <div class="issue-avatar-image">@avatar(comment.commentedUserName, 48)</div>
        <div class="box issue-comment-box" id="comment-@comment.commentId">
          <div class="box-header-small">
            <i class="icon-comment"></i>
            <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> commented
            <span class="pull-right">
              @datetime(comment.registeredDate)
              @if(comment.action != "commit" && (hasWritePermission || loginAccount.map(_.userName == comment.commentedUserName).getOrElse(false))){
                <a href="#" data-comment-id="@comment.commentId"><i class="icon-pencil"></i></a>
              }
            </span>
          </div>
          <div class="box-content"class="issue-content" id="commentContent-@comment.commentId">
            @markdown(comment.content, repository, false, true)
          </div>
        </div>
        }
        @if(comment.action == "close" || comment.action == "close_comment"){
        <div class="small issue-comment-action">
          <span class="label label-important">Closed</span>
          <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> closed the issue @datetime(comment.registeredDate)
        </div>
        }
        @if(comment.action == "reopen" || comment.action == "reopen_comment"){
        <div class="small issue-comment-action">
          <span class="label label-success">Reopened</span>
          <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> reopened the issue @datetime(comment.registeredDate)
        </div>
        }
      }
      @if(loginAccount.isDefined){
        <form method="POST" validate="true">
          <div class="issue-avatar-image">@avatar(loginAccount.get.userName, 48)</div>
          <div class="box issue-comment-box">
            <div class="box-content">
              @helper.html.preview(repository, "", false, true, "width: 680px; height: 100px;")
            </div>
          </div>
          <div class="pull-right">
            <input type="hidden" name="issueId" value="@issue.issueId"/>
            <input type="submit" class="btn btn-success" formaction="@url(repository)/issue_comments/new" value="Comment"/>
            @if(hasWritePermission || issue.openedUserName == loginAccount.get.userName){
              <input type="submit" class="btn" formaction="@url(repository)/issue_comments/state" value="@{if(issue.closed) "Reopen" else "Close"}" id="action"/>
            }
          </div>
        </form>
      }
    </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 =>
          <strong>@count</strong> @plural(count, "comment")
        }
      </div>
      <hr/>
      <div style="margin-bottom: 8px;">
      <strong>Labels</strong>
      @if(hasWritePermission){
        <div class="pull-right">
          @helper.html.dropdown() {
            @labels.map { label =>
              <li>
                <a href="#" class="toggle-label" data-label-id="@label.labelId">
                  <i class="@{if(issueLabels.exists(_.labelId == label.labelId)) "icon-ok" else "icon-white"}"></i>
                  <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(){
  @if(issue.assignedUserName.isDefined){
    $('a.assign[data-name=@issue.assignedUserName] i').attr('class', 'icon-ok');
  }
  @if(issue.milestoneId.isDefined){
    $('a.milestone[data-id=@issue.milestoneId] i').attr('class', 'icon-ok');
  }

  $('#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(){
      $('a.milestone i.icon-ok').attr('class', 'icon-white');
      if(milestoneId == ''){
        $('#label-milestone').text('No milestone');
      } else {
        $('#label-milestone').html($('<span>').append('Milestone: ').append($('<strong>').text(title)));
        $('a.milestone[data-id=' + milestoneId + '] i').attr('class', 'icon-ok');
      }
    });
  });

  $('i.icon-pencil').click(function(){
    var id = $(this).closest('a').data('comment-id');
    $.get('@url(repository)/issue_comments/_data/' + id,
    {
      dataType : 'html'
    },
    function(data){
      $('#commentContent-' + id).empty().html(data);
    });
    return false;
  });

  $('#action').click(function(){
    $('<input type="hidden">').attr('name', 'action').val($(this).val().toLowerCase()).appendTo('form');
  });

  $('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>