<div
  [ngClass]="{ drawerOpen: true }"
  *ngIf="!currentGroupId; else stepper"
>
  <div class="bottom-drawer has-backdrop"
    role="dialog" 
    [cdkTrapFocus]="!currentGroupId" 
    aria-modal="true" 
    aria-labelledby="drawerTitle">
    <div class="d-contents">
      <ng-container [ngTemplateOutlet]="stepper"></ng-container>
    </div>
  </div>
</div>

<ng-template #stepper>
  <c8y-stepper
    class="d-col flex-nowrap no-align-items fit-h c8y-stepper--no-btns"
    [disableDefaultIcons]="{ edit: true, done: false }"
    [disableProgressButtons]="true"
    [customClasses]="['col-md-6', 'col-md-offset-3', 'm-t-24', 'm-b-40', 'p-0', 'flex-no-shrink']"
    linear
    c8yProductExperience
    inherit
    [actionName]="PRODUCT_EXPERIENCE.EVENT"
    [actionData]="{ component: PRODUCT_EXPERIENCE.ADD_GROUP.COMPONENTS.ADD_GROUP }"
  >
    <cdk-step
      [stepControl]="formGroupStepOne"
      [label]="'New group' | translate"
    >
      <div class="p-16 p-t-0 flex-no-shrink separator-bottom col-xs-12">
        <div class="row">
          <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
            <div class="h4 text-center text-medium" id="drawerTitle">
              {{ 'New group' | translate }}
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 flex-grow no-gutter">
        <div class="card-inner-scroll fit-h">
          <div class="card-block p-b-0">
            <div class="row">
              <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
                <c8y-form-group [novalidation]="true">
                  <div [formGroup]="formGroupStepOne">
                    <c8y-form-group>
                      <label translate>Name</label>
                      <input
                        class="form-control"
                        placeholder="{{ 'e.g. First floor' | translate }} "
                        type="text"
                        required
                        formControlName="name"
                        maxlength="254"
                        #nameRef
                      />
                    </c8y-form-group>

                    <c8y-form-group>
                      <label translate>Description</label>
                      <input
                        class="form-control"
                        placeholder="{{ 'e.g. first floor devices' | translate }}"
                        type="text"
                        formControlName="description"
                      />
                    </c8y-form-group>
                  </div>
                </c8y-form-group>
                <c8y-form-group>
                  <div [formGroup]="formGroupStepOne"></div>
                </c8y-form-group>
                <div
                  class="alert alert-info max-width-100"
                  translate
                  *ngIf="!canAssignDevice"
                >
                  You don't have permission to assign devices.
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <c8y-stepper-buttons
        class="d-block card-footer p-24 separator"
        (onCancel)="onCancel.emit()"
        (onCustom)="createGroup()"
        [disabled]="!canCreateGroup"
        [labels]="
          canAssignDevice
            ? { next: btnLabels.next, cancel: btnLabels.cancel }
            : { custom: btnLabels.create, cancel: btnLabels.cancel }
        "
        [showButtons]="
          canAssignDevice ? { next: true, cancel: true } : { custom: true, cancel: true }
        "
      ></c8y-stepper-buttons>
    </cdk-step>
    <cdk-step [label]="'Assign devices' | translate">
      <div class="p-16 p-t-0 flex-no-shrink separator-bottom col-xs-12">
        <div class="row">
          <div class="col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
            <div class="h4 text-center text-medium">
              {{ 'Assign devices' | translate }}
            </div>
          </div>
        </div>
      </div>
      <div class="col-xs-12 no-gutter flex-grow">
        <c8y-device-grid
          [title]="'Select target devices' | translate"
          [actionControls]="actionControls"
          [infiniteScroll]="'auto'"
          [selectable]="true"
          [withChildren]="true"
          [pagination]="pagination"
          (itemsSelect)="onSelected($event)"
          [refresh]="refresh"
          c8yProductExperience
          [actionName]="PRODUCT_EXPERIENCE.EVENT"
          [actionData]="{ component: PRODUCT_EXPERIENCE.ADD_GROUP.COMPONENTS.ADD_GROUP }"
        ></c8y-device-grid>
      </div>
      <c8y-stepper-buttons
        class="d-block card-footer p-24 separator"
        (onCancel)="onCancel.emit()"
        (onCustom)="createGroup()"
        [labels]="{ custom: btnLabels.create }"
        [disabled]="!canAssignDevice"
        [pending]="pendingStatus"
      ></c8y-stepper-buttons>
    </cdk-step>
  </c8y-stepper>
</ng-template>

<div
  *ngIf="showAssignChildDevices"
  [ngClass]="{ drawerOpen: showAssignChildDevices }"
>
  <div
    class="m-t-40 bottom-drawer has-backdrop"
    role="dialog"
    aria-modal="true"
    aria-labelledby="childDevicesDrawerTitle"
    [ngStyle]="!!currentGroupId && { right: '0px'  }"
  >
    <div class="d-flex d-col no-align-items fit-h">
      <c8y-assign-child-devices
        class="d-contents"
        (onCancel)="showAssignChildDevices = false"
        [refresh]="refresh"
        [currentGroupId]="currentGroupId"
        [parentDevice]="showChildrenForDevice"
        [onlySelect]="true"
        (onSelectedDevices)="onSelectedChildDevices($event)"
      ></c8y-assign-child-devices>
    </div>
  </div>
</div>