@(label: Option[model.Label], repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
@import context._
@import view.helpers._
@defining(label.map(_.labelId).getOrElse("new")){ labelId =>
<div id="edit-label-area-@labelId">
  <form style="margin-bottom: 0px;">
    <input type="text" id="labelName-@labelId" style="width: 300px; margin-bottom: 0px;" value="@label.map(_.labelName)"@if(labelId == "new"){ placeholder="New label name"}/>
    <div id="label-color-@labelId" class="input-append color bscp" data-color="#@label.map(_.color).getOrElse("888888")" data-color-format="hex" style="width: 100px; margin-bottom: 0px;">
      <input type="text" class="span3" id="labelColor-@labelId" value="#@label.map(_.color).getOrElse("888888")" readonly style="width: 100px;">
      <span class="add-on"><i style="background-color: #@label.map(_.color).getOrElse("888888");"></i></span>
    </div>
    <script>
    $('div#label-color-@labelId').colorpicker();
    </script>
    <span class="pull-right">
      <span id="label-error-@labelId" class="error"></span>
      <input type="button" id="cancel-@labelId" class="btn label-edit-cancel" value="Cancel">
      <input type="button" id="submit-@labelId" class="btn btn-success" style="margin-bottom: 0px;" value="@(if(labelId == "new") "Create label"  else "Save changes")"/>
    </span>
  </form>
</div>
<script>
$(function(){
  $('#submit-@labelId').click(function(e){
    $.post('@url(repository)/issues/labels/@{if(labelId == "new") "new" else labelId + "/edit"}', {
      'labelName' : $('#labelName-@labelId').val(),
      'labelColor': $('#labelColor-@labelId').val()
    }, function(data, status){
      $('div#edit-label-area-@labelId').remove();
      @if(labelId == "new"){
        $('#new-label-table').hide();
        // Insert row into the top of table
        $('#label-row-header').after(data);
      } else {
        // Replace table row
        $('#label-row-@labelId').after(data).remove();
      }
    }).fail(function(xhr, status, error){
      var errors = JSON.parse(xhr.responseText);
      if(errors.labelName){
        $('span#label-error-@labelId').text(errors.labelName);
      } else if(errors.labelColor){
        $('span#label-error-@labelId').text(errors.labelColor);
      } else {
        $('span#label-error-@labelId').text('error');
      }
    });
    return false;
  });

  $('#cancel-@labelId').click(function(e){
    $('div#edit-label-area-@labelId').remove();
    @if(labelId == "new"){
      $('#new-label-table').hide();
    } else {
      $('#label-@labelId').show();
    }
  });
});
</script>
}