@(issue: model.Issue,
  pullreq: model.PullRequest,
  comments: List[model.IssueComment],
  collaborators: List[String],
  milestones: List[model.Milestone],
  hasConflict: Boolean,
  hasWritePermission: Boolean,
  repository: service.RepositoryService.RepositoryInfo,
  requestRepositoryUrl: String)(implicit context: app.Context)
@import context._
@import view.helpers._
<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"><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>
      <div class="small issue-comment-action">
        @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>
        }
      </div>
    }
    @if(hasWritePermission && !issue.closed){
      <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"@if(hasConflict){ disabled="true"}/>
            </div>
            <div>
              @if(hasConflict){
                <strong>We can’t automatically merge this pull request.</strong>
              } else {
                <strong>This pull request can be automatically merged.</strong>
              }
            </div>
            <div class="small">
              @if(hasConflict){
                <a href="#" id="show-command-line">Use the command line</a> to resolve conflicts before continuing.
              } else {
                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>
              @if(hasConflict){
                <strong>Checkout via command line</strong>
                <p>
                  If you cannot merge a pull request automatically here, you have the option of checking
                  it out via command line to resolve conflicts and perform a manual merge.
                </p>
              } else {
                <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="@requestRepositoryUrl" 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 @{requestRepositoryUrl} @{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;">
            <form method="POST" action="@url(repository)/pull/@issue.issueId/merge">
              <div>
                <strong>Merge pull request #@issue.issueId from @{pullreq.requestUserName}/@{pullreq.requestBranch}</strong>
              </div>
              <span id="error-message" class="error"></span>
              <textarea name="message" 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>
            </form>
          </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>
</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>