@(labels: List[model.Label],
  repository: service.RepositoryService.RepositoryInfo,
  hasWritePermission: Boolean)(implicit context: app.Context)
@import context._
@import view.helpers._
@html.main(s"Labels - ${repository.owner}/${repository.name}"){
  @html.menu("issues", repository){
    @issues.html.tab("labels", hasWritePermission, repository)
    <table class="table table-bordered table-hover table-issues" id="new-label-table" style="display: none;">
      <tr><td></td></tr>
    </table>
    <table class="table table-bordered table-hover table-issues">
      <tr>
        <th style="background-color: #eee;">
          <span class="small">@labels.size labels</span>
        </th>
      </tr>
      @labels.map { label =>
        <tr>
          <td style="padding-top: 15px; padding-bottom: 15px;">
            <div class="milestone row-fluid" id="label-@label.labelId">
              <div class="span8">
                <div style="margin-top: 6px">
                  <a href="@url(repository)/issues?labels=@urlEncode(label.labelName)">
                    <span style="background-color: #@label.color; color: #@label.fontColor; padding: 8px; font-size: 120%; border-radius: 4px;">@label.labelName</span>
                  </a>
                </div>
              </div>
              <div class="@if(hasWritePermission){span2} else {span4}">
                <div class="pull-right">
                  <span class="muted">x open issues</span>
                </div>
              </div>
              @if(hasWritePermission){
                <div class="span2">
                  <div class="pull-right">
                    <a href="javascript:void(0);" class="label-edit-link" data-label-id="@label.labelId">Edit</a>
                    &nbsp;&nbsp;
                    <a href="@url(repository)/issues/labels/@label.labelId/delete" class="delete">Delete</a>
                  </div>
                </div>
              }
            </div>
          </td>
        </tr>
        }
        @if(labels.isEmpty){
        <tr>
          <td style="padding: 20px; background-color: #eee; text-align: center;">
            No labels to show.
            @if(hasWritePermission){
              <a href="@url(repository)/issues/labels/new">Create a new label.</a>
            }
          </td>
        </tr>
      }
    </table>
  }
}
<script>
$(function(){
  $('a.delete').click(function(){
    return confirm('Once you delete this label, there is no going back.\nAre you sure?');
  });

  $('#new-label-button').click(function(e){
    if($('#new-label-area').size() != 0){
      closeLabelForm();
    } else {
      closeLabelForm();
      $.get('@url(repository)/issues/labels/new',
          function(data){
            $('#new-label-table').show().find('tr td').append(data);
          }
      );
    }
  });

  $('a.label-edit-link').click(function(e){
    closeLabelForm();
    var labelId = $(this).data('label-id');
    $.get('@url(repository)/issues/labels/' + labelId + '/edit',
      function(data){
        $('#label-' + labelId).hide().parent().append(data);
      }
    );
  });
});

function closeLabelForm(){
  // creation form
  if($('#new-label-area').size() != 0){
    $('#new-label-table').hide();
    $('#new-label-area').remove();
  }
  // editing form
  var editingId = $('input[name=editLabelId]').val();
  if(editingId){
    $('#edit-label-area').remove();
    $('#label-' + editingId).show();
  }
}
</script>