@(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"New Issue - ${repository.owner}/${repository.name}", Some(repository)){
  @html.header("issues", repository)
  @tab("", repository)
  <form action="@url(repository)/issues/new" method="POST" validate="true">
  <div class="row-fluid">
    <div class="span9">
      <div class="issue-avatar-image">@avatar(loginAccount.get.userName, 48)</div>
      <div class="box issue-box">
        <div class="box-content">
          <span id="error-title" class="error"></span>
          <input type="text" name="title" value="" placeholder="Title" style="width: 600px;"/>
          <div>
            <span id="label-assigned">No one is assigned</span>
            @if(hasWritePermission){
              <input type="hidden" name="assignedUserName" value=""/>
              @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-while"></i>@avatar(collaborator, 20) @collaborator</a></li>
                }
              }
            }
            <div class="pull-right">
              <span id="label-milestone">No milestone</span>
              @if(hasWritePermission){
                <input type="hidden" name="milestoneId" value=""/>
                @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-while"></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>
          <hr>
          @helper.html.preview(repository, "", false, true, "width: 600px; height: 200px; max-height: 250px;", elastic = true)
        </div>
      </div>
      <div class="pull-right">
        <input type="submit" class="btn btn-success" value="Submit new issue"/>
      </div>
    </div>
    <div class="span3">
      @if(hasWritePermission){
        <span class="strong">Add Labels</span>
        <div>
          <div id="label-list">
            <ul class="label-list nav nav-pills nav-stacked">
              @labels.map { label =>
                <li>
                  <a href="javascript:void(0);" class="toggle-label" data-label="@label.labelName" data-bgcolor="@label.color" data-fgcolor="@label.fontColor">
                    <span style="background-color: #@label.color;" class="label-color">&nbsp;&nbsp;</span>
                    @label.labelName
                  </a>
                </li>
              }
            </ul>
            <input type="hidden" name="labelNames" value=""/>
          </div>
        </div>
      }
    </div>
  </div>
  </form>
}
<script>
$(function(){
  $('a.assign').click(function(){
    var userName = $(this).data('name');
    $('a.assign i.icon-ok').attr('class', 'icon-white');

    if(userName == ''){
      $('#label-assigned').text('No one will be assigned');
    } else {
      $('#label-assigned').html($('<span>')
        .append($('<a class="username strong">').attr('href', '@path/' + userName).text(userName))
        .append(' will be assigned'));
      $('a.assign[data-name=' + userName + '] i').attr('class', 'icon-ok');
    }
    $('input[name=assignedUserName]').val(userName);
  });

  $('a.milestone').click(function(){
    var title = $(this).data('title');
    var milestoneId = $(this).data('id');
    $('a.milestone i.icon-ok').attr('class', 'icon-white');

    if(milestoneId == ''){
      $('#label-milestone').text('No milestone');
    } else {
      $('#label-milestone').html($('<span>').append('Milestone: ').append($('<span class="strong">').text(title)));
      $('a.milestone[data-id=' + milestoneId + '] i').attr('class', 'icon-ok');
    }
    $('input[name=milestoneId]').val(milestoneId);
  });

  $('a.toggle-label').click(function(){
    if($(this).data('selected') == true){
      $(this).css({
        'background-color': 'white',
        'color'           : 'black',
        'font-weight'     : 'normal'
      });
      $(this).data('selected', false);
    } else {
      $(this).css({
        'background-color': '#' + $(this).data('bgcolor'),
        'color'           : '#' + $(this).data('fgcolor'),
        'font-weight'     : 'bold'
      });
      $(this).data('selected', true);
    }

    var labelNames = Array();
    $('a.toggle-label').each(function(i, e){
      if($(e).data('selected') == true){
        labelNames.push($(e).data('label'));
      }
    });
    $('input[name=labelNames]').val(labelNames.join(','));
  });
});
</script>