@(labels: List[model.Label], repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
@import context._
<div id="label-edit">
  <ul class="label-list nav nav-pills nav-stacked">
    @labels.map { label =>
    <li style="border: 1px solid white;">
      <a href="javascript:void(0);" class="label-edit-link" data-label-id="@label.labelId">
        <span class="count-right"><i class="icon-remove-circle"></i></span>
        <span style="background-color: #@label.color;" class="label-color">&nbsp;&nbsp;</span>
        @label.labelName
      </a>
    </li>
    }
  </ul>
  <script>
  $(function(){
    $('i.icon-remove-circle').click(function(e){
      e.stopPropagation();
      if(confirm('Are you sure you want to delete this?')){
        $.get('@path/@repository.owner/@repository.name/issues/label/' + $(this).parents('a').data('label-id') + '/delete',
          function(data){
            $('#label-edit').parent().empty().html(data);
          }
        );
      }
    });

    $('a.label-edit-link').click(function(e){
      if($('input[name=editLabelId]').val() != $(this).data('label-id')){
        $('#editLabelArea').remove();
        var element = this;
        $.get('@path/@repository.owner/@repository.name/issues/label/' + $(this).data('label-id') + '/edit',
          function(data){
            $(element).parent().append(data);
            $('div#label-edit li').css('border', '1px solid white');
            $(element).parent().css('border', '1px solid #eee');
          }
        );
      } else {
        $('#editLabelArea').remove();
        $('div#label-edit li').css('border', '1px solid white');
      }
    });
  });
  </script>
</div>