<div ng-if="!$ctrl.labels.length"> There are no labels for this node. </div>

<div class="col-sm-12 form-inline !p-0" ng-if="$ctrl.labels.length">
  <div ng-repeat="label in $ctrl.labels" class="mt-1">
    <div class="input-group col-sm-5 input-group-sm">
      <span class="input-group-addon">name</span>
      <input
        type="text"
        class="form-control"
        ng-model="label.key"
        placeholder="e.g. com.example.foo"
        ng-change="$ctrl.updateLabel(label)"
        data-cy="node-label-input_{{ $index }}"
      />
    </div>
    <div class="input-group col-sm-5 input-group-sm">
      <span class="input-group-addon">value</span>
      <input type="text" class="form-control" ng-model="label.value" placeholder="e.g. bar" ng-change="$ctrl.updateLabel(label)" data-cy="node-label-value_{{ $index }}" />
    </div>
    <button class="btn btn-light" type="button" ng-click="$ctrl.removeLabel($index)">
      <pr-icon icon="'trash-2'" class-name="'icon-secondary icon-md'"></pr-icon>
    </button>
  </div>
</div>
