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

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

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

<c8y-help
  *ngIf="isSmartGroup; else assetsHelp"
  src="/docs/device-management-application/grouping-devices/#using-smart-groups"
></c8y-help>

<ng-template #assetsHelp>
  <c8y-help src="/docs/cockpit/managing-assets/#managing-assets"></c8y-help>
</ng-template>

<div
  class="card content-fullpage"
  [ngClass]="{
    'card--grid grid__col--8-4--md grid__row--fit-auto': shouldShowAssetsProperties,
    'd-flex d-col': !shouldShowAssetsProperties
  }"
>
  <c8y-group-info
    class="grid__col--fullspan"
    *ngIf="moduleConfig.showDetails"
    [group]="group"
    (groupChange)="groupChange($event)"
  ></c8y-group-info>
  <c8y-sub-assets-grid
    class="d-contents"
    [refresh]="refresh"
    [parent-group]="group"
    [filterable]="filterable"
    [displayOptions]="displayOptions"
    [columnsConfigKey]="'sub-assets-grid'"
    [baseQuery]="moduleConfig.baseQuery"
  ></c8y-sub-assets-grid>
  <div
    class="inner-scroll bg-level-1"
    *ngIf="shouldShowAssetsProperties"
  >
    <c8y-asset-properties
      class="d-contents"
      [properties]="customProperties"
      [asset]="group"
      (assetChange)="groupChange($event)"
    ></c8y-asset-properties>
  </div>
</div>

<div [ngClass]="{ drawerOpen: showAddGroup() }">
  <div class="bottom-drawer">
    <c8y-add-group
      [currentGroupId]="currentGroupId"
      [refresh]="refresh"
      (onCancel)="onAddGroupClick()"
      *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
        class="d-contents"
        *ngIf="showAssignChildDevices"
        (onCancel)="showAssignChildDevices = false"
        [refresh]="refresh"
        [currentGroupId]="currentGroupId"
        [parentDevice]="showChildrenForDevice"
      ></c8y-assign-child-devices>
    </div>
  </div>
</div>