@(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)

  <div class="row-fluid">
    <div class="span9">
      <form action="@url(repository)/issues/new" method="POST" validate="true">
      <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=""/>
            <div class="btn-group">
              <button class="btn dropdown-toggle" data-toggle="dropdown">
                <i class="icon-cog"></i>
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu">
                <li><a href="javascript:void(0);" id="clear-assignee">Clear assignee</a></li>
                <li class="divider"></li>
                @collaborators.map { collaborator =>
                  <li><a href="javascript:void(0);" class="assign">@collaborator</a></li>
                }
              </ul>
            </div>
            <div class="pull-right">
              <span id="label-milestone">No milestone</span>
              <input type="hidden" name="milestoneId" value=""/>
              <div class="btn-group">
                <button class="btn dropdown-toggle" data-toggle="dropdown">
                  <i class="icon-cog"></i>
                  <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <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>
                  }
                </ul>
              </div>
            </div>
          </div>
          <hr>
          @html.preview(repository, "", false, true, true, "width: 650px; height: 200px;")
        </div>
      </div>
      <input type="submit" class="btn btn-success" value="Submit new issue"/>
      </form>
    </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>
}
<script>
$(function(){
  $('a.assign').click(function(){
    $('#label-assigned').html($(this).text() + ' well be assigned');
    $('input[name=assignedUserName]').val($(this).text());
  });

  $('a#clear-assignee').click(function(){
    $('#label-assigned').text('No one will be assigned');
    $('input[name=assignedUserName]').val('');
  });

  $('a.milestone').click(function(){
    $('#label-milestone').text($(this).text());
    $('input[name=milestoneId]').val($(this).data('id'));
  });

  $('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>