@(issue: model.Issue,
  comments: List[model.IssueComment],
  issueLabels: List[model.Label],
  labels: List[model.Label],
  repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
@import context._
@import view.helpers._
@html.main("%s - Issue #%d - %s/%s".format(issue.title, issue.issueId, repository.owner, repository.name)){
  @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="box">
        <div class="box-content">
          <span class="pull-right"><a class="btn btn-small" href="#" id="edit">Edit</a></span>
          <div class="small"><a href="@url(issue.openedUserName)">@issue.openedUserName</a> opened this issue @datetime(issue.registeredDate)</div>
          <h4 id="issueTitle">@issue.title</h4>
        </div>
        <div class="box-content" style="background-color: #f5f5f5;" id="issueContent">
          @markdown(issue.content getOrElse "No description given.", repository, false, true, true)
        </div>
      </div>
      @comments.map { comment =>
      <div class="box" id="comment-@comment.commentId">
        <div class="box-header-small">
          <a href="@url(comment.commentedUserName)">@comment.commentedUserName</a> commented
          <span class="pull-right">
            @datetime(comment.registeredDate)
            <a href="#" data-comment-id="@comment.commentId"><i class="icon-pencil"></i></a>
          </span>
        </div>
        <div class="box-content" style="background-color: #f5f5f5;" id="commentContent-@comment.commentId">
          @markdown(comment.content, repository, false, true, true)
        </div>
      </div>
      @comment.action.map { action =>
      <div class="small">
        @if(action == "close"){
          <span class="label label-important">Closed</span>
          <a href="@url(comment.commentedUserName)">@comment.commentedUserName</a> closed the issue @datetime(comment.registeredDate)
        } else {
          <span class="label label-success">Reopened</span>
          <a href="@url(comment.commentedUserName)">@comment.commentedUserName</a> reopened the issue @datetime(comment.registeredDate)
        }
      </div>
      }
      }
      <form action="@url(repository)/issue_comments/new" method="POST" validate="true">
      <div class="box">
        <div class="box-content">
          @html.preview(repository, "", false, true, true, "width: 730px; height: 100px;")
        </div>
      </div>
      <input type="hidden" name="issueId" value="@issue.issueId"/>
      <input type="submit" class="btn btn-success" value="Comment"/>
      <input type="submit" class="btn" value="@{if(issue.closed) "Reopen" else "Close"}" id="action"/>
      </form>
    </div>
    <div class="span2">
      @if(issue.closed) {
        <a class="btn btn-large btn-danger disabled">Closed</a>
      } else {
        <a class="btn btn-large btn-success disabled">Open</a>
      }
      <div class="small">@comments.size comments</div>
      <hr/>
      <strong>Labels</strong>
      <div class="pull-right">
        <div class="btn-group">
          <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">
            <i class="icon-cog"></i>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
          @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>
          }
          </ul>
        </div>
      </div>
      <ul class="label-list">
        @labellist(issueLabels)
      </ul>
    </div>
  </div>
}
<script>
$(function(){
  $('#edit').click(function(){
    $.get('@url(repository)/issues/_data/@issue.issueId',
    {
      dataType : 'html'
    },
    function(data){
      $('#issueContent').empty().html(data);
    });
    return false;
  });

  $('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 url = '@url(repository)/issues/@issue.issueId/label/' + $(this).data('label-id');
    var icon;
    var i = $(this).children('i');
    if(i.hasClass('icon-ok')){
      url += '/delete';
      icon = 'icon-white';
    } else {
      url += '/new';
      icon = 'icon-ok';
    }
    $.post(url,
    function(data){
      i.removeClass().addClass(icon);
      // TODO label sort
      alert(data);
    });
    return false;
  });
});
</script>