<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="content-fullpage shadow1"
  [ngClass]="{
    'card--grid grid__col--8-4--md grid__row--fit-auto': shouldShowAssetsProperties,
    'd-flex d-col': !shouldShowAssetsProperties
  }"
>
  <c8y-group-info
    [group]="group"
    (onGroupChange)="groupChange($event)"
    class="grid__col--fullspan"
  ></c8y-group-info>
  <c8y-sub-assets-grid
    [refresh]="refresh"
    [parent-group]="group"
    [filterable]="filterable"
    [displayOptions]="displayOptions"
  ></c8y-sub-assets-grid>
  <div class="inner-scroll bg-gray-white" *ngIf="shouldShowAssetsProperties">
    <c8y-asset-properties
      [properties]="customProperties"
      [asset]="group"
      class="d-contents"
    ></c8y-asset-properties>
  </div>
</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>