<div class="dialog-container">
  <app-layouts-default-dialog
    [disableClose]="false"
    (closed)="onClosed($event)"
  >
    <div appLayoutsDefaultDialog="header">
      {{ data.title }}
    </div>
    <div class="dialog-body" appLayoutsDefaultDialog="body">
      <mat-horizontal-stepper
        [linear]="true"
        #stepper
        [selectedIndex]="currentStep"
      >
        <mat-step label="Step 1">
          <div>
            <div>
              {{ data.groupBuddyList.group.name }}
            </div>
            <div>
              <button
                mat-button
                (click)="onAdd(stepper)"
                aria-label="대화상대 추가"
              >
                <mat-icon>add</mat-icon>
              </button>
            </div>
          </div>
          <div>
            <app-group-profile-list-item-02
              *ngFor="let userInfo of this.data.groupBuddyList.buddyList"
              [userInfo]="userInfo"
              [isDialog]="true"
              [checked]="getCheckedUser(userInfo)"
              [checkable]="true"
              (changeCheckUser)="onToggleCheck($event)"
            ></app-group-profile-list-item-02>
          </div>
        </mat-step>
        <mat-step label="Step 2">
          <ng-template #dialogContainer></ng-template>
        </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">
      <div *ngIf="currentStep === 0">
        <button mat-button (click)="onDelete(stepper)">삭제</button>
        <button
          mat-button
          (click)="onUpdateMember(stepper, GroupUserDialaogType.Copy)"
        >
          그룹복사
        </button>
        <button
          mat-button
          (click)="onUpdateMember(stepper, GroupUserDialaogType.Move)"
        >
          그룹이동
        </button>
      </div>
      <div *ngIf="currentStep > 0">
        <button mat-button (click)="onCnacel(stepper)">취소</button>
        <button mat-button (click)="onConfirm(stepper)">
          완료
        </button>
      </div>
    </div>
  </app-layouts-default-dialog>
</div>
