<c8y-title *ngIf="!currentGroupId">
  {{ 'Add group' | translate }}
</c8y-title>

<div class="d-contents" *ngIf="!currentGroupId; else stepper">
  <ng-container [ngTemplateOutlet]="stepper"></ng-container>
</div>

<ng-template #stepper>
  <c8y-stepper
    class="flex-col flex-nowrap no-align-items fit-h c8y-stepper--no-btns"
    [disableDefaultIcons]="{ edit: true, done: false }"
    [customClasses]="['col-md-6', 'col-md-offset-3', 'p-t-16', 'p-b-32', 'flex-no-shrink']"
    linear
  >
    <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">
            <h4 class="text-center text-medium">
              {{ 'New group' | translate }}
            </h4>
          </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>
                  <div [formGroup]="formGroupStepOne">
                    <c8y-form-group>
                      <label translate>Name</label>
                      <input
                        class="form-control"
                        type="text"
                        formControlName="name"
                        placeholder="{{ 'e.g. First floor' | translate }} "
                        #nameRef
                        required
                      />
                      <c8y-messages>
                        <c8y-message *ngIf="!formGroupStepOne.untouched && !nameRef.value" translate
                          >This field is required.</c8y-message
                        >
                      </c8y-messages>
                    </c8y-form-group>

                    <c8y-form-group>
                      <label translate>Description</label>
                      <input
                        class="form-control"
                        type="text"
                        formControlName="description"
                        placeholder="{{ 'e.g. first floor devices' | translate }}"
                      />
                    </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">
            <h4 class="text-center text-medium">
              {{ 'Assign devices' | translate }}
            </h4>
          </div>
        </div>
      </div>
      <div class="col-xs-12 no-gutter flex-grow">
        <c8y-device-grid
          [title]="'Select target devices' | translate"
          [actionControls]="[]"
          [infiniteScroll]="'auto'"
          [selectable]="'true'"
          [pagination]="pagination"
          (itemsSelect)="onSelected($event)"
          [refresh]="refresh"
          class="d-contents"
        >
          <div class="c8y-empty-state">
            <h1 c8yIcon="search"></h1>
            <div>
              <p>
                <strong>{{ 'No matching devices.' | translate }}</strong>
              </p>
              <small>{{ 'Refine your search terms' | translate }}</small>
            </div>
          </div>
        </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>