@(issue: model.Issue,
  pullreq: model.PullRequest,
  comments: List[model.IssueComment],
  collaborators: List[String],
  milestones: List[model.Milestone],
  hasWritePermission: Boolean,
  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("discussion", issue.issueId, 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>
                <li class="divider"></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>
                  <li class="divider"></li>
                  @milestones.map { milestone =>
                    <li><a href="javascript:void(0);" class="milestone" data-id="@milestone.milestoneId"><i class="icon-white"></i> @milestone.title</a></li>
                  }
                }
              }
            </div>
          </div>
          <div class="issue-content" id="issueContent">
            @markdown(issue.content getOrElse "No description given.", repository, false, true)
          </div>
        </div>
      </div>
      @comments.map { comment =>
        <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(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>
        @comment.action.map { action =>
        <div class="small issue-comment-action">
          @if(action == "close"){
            <span class="label label-important">Closed</span>
            <a href="@url(comment.commentedUserName)" class="username strong">@comment.commentedUserName</a> closed the issue @datetime(comment.registeredDate)
          } else {
            <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>
        }
      }

      <div class="box issue-comment-box" style="background-color: #d8f5cd;">
        <div class="box-content"class="issue-content" style="border: 1px solid #95c97e; padding: 10px;">
          <div id="merge-pull-request">
            <div class="pull-right">
              <input type="button" class="btn btn-success" id="merge-pull-request-button" value="Merge pull request"/>
            </div>
            <div>
              <strong>This pull request can be automatically merged.</strong>
            </div>
            <div class="small">
              You can also merge branches on the <a href="#" id="show-command-line">command line</a>.
            </div>
            <div id="command-line" style="display: none;">
              <hr>
              <strong>Merging via command line</strong>
              <p>
                If you do not want to use the merge button or an automatic merge cannot be performed,
                you can perform a manual merge on the command line.
              </p>
              <div class="input-prepend">
                <span class="add-on">HTTP</span>
                <input type="text" value="https://github.com/takezoen/test.git" id="repository-url" readonly>
              </div>
              <p>
                <strong>Step 1:</strong> Check out a new branch to test the changes — run this from your project directory
              </p>
              <pre>git checkout -b @{pullreq.requestUserName}-@{pullreq.requestBranch} @{pullreq.requestBranch}</pre>
              <p>
                <strong>Step 2:</strong> Bring in @{pullreq.requestUserName}'s changes and test
              </p>
              <pre>git pull https://github.com/@{pullreq.requestUserName}/@{repository.name}.git @{pullreq.requestBranch}</pre>
              <p>
                <strong>Step 3:</strong> Merge the changes and update the server
              </p>
              <pre>git checkout master
git merge @{pullreq.requestUserName}-@{pullreq.branch}
git push origin @{pullreq.branch}</pre>
            </div>
          </div>
          <div id="confirm-merge-form" style="display: none;">
            <div>
              <strong>Merge pull request #@issue.issueId from @{pullreq.requestUserName}/@{pullreq.requestBranch}</strong>
            </div>
            <textarea name="content" style="width: 680px; height: 80px;">@issue.title</textarea>
            <div>
              <input type="button" class="btn" value="Cancel" id="cancel-merge-pull-request"/>
              <input type="submit" class="btn btn-success" value="Confirm merge"/>
            </div>
          </div>
        </div>
      </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;">
        <strong>@comments.size</strong> @plural(comments.size, "comment")
      </div>
      <hr/>
  </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 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').html($('<span>')
          .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).text();
    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');
  });

  $('#show-command-line').click(function(){
    $('#command-line').show();
    return false;
  });

  $('#merge-pull-request-button').click(function(){
    $('#merge-pull-request').hide();
    $('#confirm-merge-form').show();
  });

  $('#cancel-merge-pull-request').click(function(){
    $('#confirm-merge-form').hide();
    $('#merge-pull-request').show();
  });
});
</script>