<div class="dialog-container">
  <app-layouts-default-dialog
    [disableClose]="false"
    (closed)="onClosed($event)"
  >
    <div appLayoutsDefaultDialog="header">
      그룹 생성
    </div>
    <div class="dialog-body" appLayoutsDefaultDialog="body">
      <mat-horizontal-stepper
        [linear]="true"
        #stepper
        [selectedIndex]="currentStep"
      >
        <mat-step label="Step 1">
          <form name="inputForm" [formGroup]="inputForm" novalidate>
            <mat-form-field
              hintLabel="금지단어[-,_]"
              style="display: block; margin-bottom: 10px;"
            >
              <input
                matInput
                #input
                maxlength="20"
                placeholder="그룹명을 입력하세요."
                formControlName="groupName"
                (keyup)="onKeyupGroupName()"
              />
              <mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
              <!-- <mat-error *ngIf="inputForm.get('groupName').hasError('groupNameBanned')"> -->
              <!-- {{
                    'group.errors.bannedWords'
                      | translate: { bannedWords: appService.bannedGroupNames.join(',') }
                  }} -->
              <!-- 금지단어[-,_] -->
              <!-- </mat-error> -->
              <!-- <mat-error *ngIf="inputForm.get('groupName').hasError('groupNameSamed')"> -->
              <!-- {{ 'group.errors.sameNameExist' | translate }} -->
              <!-- 이미 존재하는 그룹명입니다. -->
              <!-- </mat-error> -->
            </mat-form-field>
          </form>
        </mat-step>
        <mat-step label="Step 1">
          <app-group-select-user
            style="height: 500px;"
            [isDialog]="true"
            [checkable]="true"
            [selectedUserList]="selectedUserList"
            (toggleCheckUser)="onChangeUserList($event)"
            (toggleCheckGroup)="onChangeGroupList($event)"
          ></app-group-select-user>
        </mat-step>
      </mat-horizontal-stepper>

      <div>
        <ucap-organization-profile-selection-01
          [userInfoList]="selectedUserList"
          [removableFor]="removableForSelection"
          [colorFor]="colorForSelection"
          (removed)="onRemovedProfileSelection($event)"
        >
        </ucap-organization-profile-selection-01>
      </div>
    </div>
    <div appLayoutsDefaultDialog="action">
      <button mat-button (click)="onCancel(stepper)">취소</button>
      <button mat-button (click)="onConfirm(stepper)">
        완료
      </button>
      <button
        *ngIf="currentStep < 1"
        mat-button
        (click)="onCompleteConfirm(stepper)"
      >
        그룹지정후 완료
      </button>
    </div>
  </app-layouts-default-dialog>
</div>
