<div class="card-block flex-no-shrink separator-bottom col-xs-12 large-padding p-t-24 p-b-24">
  <div class="row">
    <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
      <h4 class="text-center text-medium" id="childDevicesDrawerTitle">
        {{ 'Assign child devices' | translate }}
      </h4>
    </div>
  </div>
</div>

<c8y-sub-assets-grid
  [title]="''"
  [emptyStateText]="'All child devices are already assigned' | translate"
  [refresh]="refresh"
  [actionControls]="[]"
  [columnsConfigKey]="'assign-child-devices'"
  [selectable]="true"
  [parent-group]="parentDevice"
  [baseQuery]="baseQuery"
  (itemsSelect)="onSelected($event)"
  class="d-contents"
></c8y-sub-assets-grid>

<div class="text-center card-footer p-24 separator">
  <button
    (click)="onCancel.emit()"
    type="button"
    class="btn btn-default"
    title="{{ 'Cancel' | translate }}"
  >
    <span>{{ 'Cancel' | translate }}</span>
  </button>
  <button
    (click)="assignDevices()"
    type="button"
    class="btn btn-primary"
    [ngClass]="{ 'btn-pending': pendingStatus }"
    title="{{ 'Assign' | translate }}"
    [disabled]="selected.length === 0 || !canAssignDevice"
  >
    <span>{{ 'Assign' | translate }}</span>
  </button>
</div>