<c8y-title>
  {{ moduleConfig.name | translate }}
</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    icon="c8y-group-open"
    label="{{ moduleConfig.name | translate }}"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item
  [placement]="'right'"
  *ngIf="moduleConfig.showAddGroupBtn"
>
  <button
    class="btn btn-link"
    title="{{ 'Add group' | translate }}"
    (click)="onAddGroupClick()"
    [disabled]="shouldDisableAddGroup"
    [attr.data-cy]="'groups-add-group-button'"
  >
    <i
      class="m-r-4"
      c8yIcon="plus-circle"
    ></i>
    {{ 'Add group' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-help
  src="/docs/device-management-application/grouping-devices/#grouping-devices"
  *ngIf="moduleConfig.showGroupsContextHelp"
></c8y-help>

<c8y-add-group
  [refresh]="refresh"
  (onCancel)="onAddGroupClick()"
  *ngIf="showAddGroup()"
></c8y-add-group>
<c8y-sub-assets-grid
  class="content-fullpage d-flex d-col border-top border-bottom"
  [refresh]="refresh"
  [filterable]="filterable"
  [sortable]="sortable"
  [columns]="columns"
  [columnsConfigKey]="'sub-assets-grid'"
  [baseQuery]="moduleConfig.baseQuery"
></c8y-sub-assets-grid>