<ng-container>
  <table class="table table-striped table-center">
    <thead>
    <tr>
      <th class="table__remove-col"></th>
      <th>Attribute</th>
      <th>Property</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let entry of attributes;  let i = index;">
      <td>
        <button type="button" (click)="removeAttribute(i)" data-toggle="tooltip" title="Remove"
                class="btn btn-default remove">
          <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
        </button>
      </td>
      <td>
        <input type="text" class="form-control" [(ngModel)]="entry.key"
               name="{{callbackInfo ? 'callback-info' : 'custom-attribute'}}-{{i}}"/>
      </td>
      <td>
        <input type="text" class="form-control" [(ngModel)]="entry.value"
               name="{{callbackInfo ? 'callback-info' : 'custom-attribute'}}-{{i}}-val"/>
      </td>
    </tr>
    </tbody>
  </table>
  <button type="button" (click)="addAttribute()" class="btn btn-default"
          data-toggle="tooltip"
          title="Add new access">
    <span class="glyphicon glyphicon-plus green-blue" aria-hidden="true"></span>
    Add new {{ callbackInfo ? 'callback information' : 'custom attribute'}}
  </button>
</ng-container>
