@(collaborators: List[String],
  milestones: List[model.Milestone],
  labels: List[model.Label],
  repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
@import context._
@import view.helpers._
@html.main("New Issue - " + repository.owner + "/" + repository.name){
  @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="box">
        <div class="box-content">
          <span id="error-title" class="error"></span>
          <input type="text" name="title" value="" placeholder="Title" style="width: 650px;"/>
          <div>
            <span id="label-assigned">No one is assigned</span>
            <input type="hidden" name="assignedUserName" value=""/>
            @helper.html.dropdown {
              <li><a href="javascript:void(0);" class="assign" data-name="">Clear assignee</a></li>
              <li class="divider"></li>
              @collaborators.map { collaborator =>
                <li><a href="javascript:void(0);" class="assign" data-name="@collaborator">@collaborator</a></li>
              }
            }
            <div class="pull-right">
              <span id="label-milestone">No milestone</span>
              <input type="hidden" name="milestoneId" value=""/>
              @helper.html.dropdown {
                <li><a href="javascript:void(0);" class="milestone" data-id="">No milestone</a></li>
                <li class="divider"></li>
                @milestones.map { milestone =>
                  <li><a href="javascript:void(0);" class="milestone" data-id="@milestone.milestoneId">@milestone.title</a></li>
                }
              }
            </div>
          </div>
          <hr>
          @helper.html.preview(repository, "", false, true, true, "width: 650px; height: 200px;")
        </div>
      </div>
      <input type="submit" class="btn btn-success" value="Submit new issue"/>
    </div>
    <div class="span3">
      <strong>Add Labels</strong>
      <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');
    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(' well be assigned'));
    }
    $('input[name=assignedUserName]').val(userName);
  });

  $('a.milestone').click(function(){
    var title = $(this).text();
    var milestoneId = $(this).data('id');

    if(milestoneId == ''){
      $('#label-milestone').text('No milestone');
    } else {
      $('#label-milestone').html($('<span>').append('Milestone: ').append($('<strong>').text(title)));
    }
    $('input[name=milestoneId]').val(milestoneId);
  });

  $('a.toggle-label').click(function(){
    if($(this).data('selected') == true){
      $(this).css({
        'background-color': 'white',
        'color'           : 'black'
      });
      $(this).data('selected', false);
    } else {
      $(this).css({
        'background-color': '#' + $(this).data('bgcolor'),
        'color'           : '#' + $(this).data('fgcolor')
      });
      $(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>