<c8y-title>
  {{ title }}
</c8y-title>

<c8y-action-bar-item [placement]="'right'" *ngIf="!isSmartGroup()">
  <button
    class="btn btn-link"
    title="{{ 'Add group' | translate }}"
    (click)="showAddGroup = !showAddGroup"
    [disabled]="shouldDisableAddGroup"
  >
    <i c8yIcon="plus-circle" class="m-r-4"></i><span translate>Add group</span>
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'right'" *ngIf="!isSmartGroup()">
  <button
    class="btn btn-link"
    title="{{ 'Assign devices' | translate }}"
    (click)="showAssignDevices = !showAssignDevices"
    [disabled]="shouldDisableAssignDevices"
  >
    <i c8yIcon="plus-circle" class="m-r-4"></i><span translate>Assign devices</span>
  </button>
</c8y-action-bar-item>

<div class="card content-fullpage d-flex d-col">
  <c8y-group-info
    *ngIf="showGroupInfo"
    [group]="group"
    (onGroupChange)="groupChange($event)"
  ></c8y-group-info>
  <c8y-sub-assets-grid
    [refresh]="refresh"
    [parent-group]="group"
    [filterable]="filterable"
    [displayOptions]="displayOptions"
    class="d-contents"
  ></c8y-sub-assets-grid>
</div>

<div [ngClass]="{ drawerOpen: showAddGroup }">
  <div class="bottom-drawer">
    <c8y-add-group
      [currentGroupId]="currentGroupId"
      [refresh]="refresh"
      (onCancel)="showAddGroup = false"
      *ngIf="showAddGroup"
    ></c8y-add-group>
  </div>
</div>

<div [ngClass]="{ drawerOpen: showAssignDevices }">
  <div class="bottom-drawer">
    <div class="d-flex d-col no-align-items fit-h">
      <c8y-assign-devices
        class="d-contents"
        (onCancel)="showAssignDevices = false"
        [refresh]="refresh"
        [currentGroupId]="currentGroupId"
        (onShowChildDevices)="showAssignChildDevices=$event"
        (selectedDevice)="showChildrenForDevice=$event"
        *ngIf="showAssignDevices"
      ></c8y-assign-devices>
    </div>
  </div>
</div>

<div [ngClass]="{ drawerOpen: showAssignChildDevices }" >
  <div class="bottom-drawer m-t-40">
    <div class="d-flex d-col no-align-items fit-h">
      <c8y-assign-child-devices
        *ngIf="showAssignChildDevices"
        class="d-contents"
        (onCancel)="showAssignChildDevices = false"
        [refresh]="refresh"
        [currentGroupId]="currentGroupId"
        [parentDevice]="showChildrenForDevice"
      ></c8y-assign-child-devices>
    </div>
  </div>
</div>