<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
        fxFlexFill
        [linear]="true"
        #stepper
        [selectedIndex]="currentStep"
      >
        <mat-step label="Step 1">
          <div class="ucap-dialog-group-manage-container">
            <div class="group-name">
              <span class="sub-title">{{
                data.groupBuddyList.group.name
              }}</span>
              <button
                mat-button
                (click)="onAdd(stepper)"
                aria-label="대화상대 추가"
              >
                <mat-icon class="material-icons-outlined">person_add</mat-icon>
              </button>
            </div>

            <div class="ucap-dialog-app-group-profile-list">
              <perfect-scrollbar style="width: 100%; height: 100%;">
                <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>
              </perfect-scrollbar>
            </div>
          </div>
        </mat-step>
        <mat-step label="Step 2">
          <div class="ucap-dialog-app-group-select-user">
            <ng-template #dialogContainer></ng-template>
            <!-- <ng-container
              *ngIf="currentStep > 0"
              [ngSwitch]="selectContentType"
            ></ng-container>
            <div *ngSwitchCase="ManageContentType.Add"></div> -->
          </div>
          <div class="ucap-dialog-organization-profile-selection">
            <ucap-organization-profile-selection-01
              [userInfoList]="selectedUserList"
              [removableFor]="removableForSelection"
              [colorFor]="colorForSelection"
              (removed)="onRemovedProfileSelection($event)"
              class="ucap-organization-selected-list"
            >
              <ng-template ucapOrganizationProfileSelection01Header>
                선택된 대화상대 (<span class="number">{{
                  selectedUserList.length
                }}</span
                >)
              </ng-template>
            </ucap-organization-profile-selection-01>
          </div>
        </mat-step>
      </mat-horizontal-stepper>
    </div>

    <div appLayoutsDefaultDialog="action" class="btn-box">
      <div *ngIf="currentStep === 0">
        <button mat-button mat-stroked-button (click)="onDelete(stepper)">
          삭제
        </button>
        <button
          mat-button
          class="bg-primary-darkest"
          (click)="onUpdateMember(stepper, GroupUserDialaogType.Copy)"
        >
          그룹복사
        </button>
        <button
          mat-button
          class="bg-primary-darkest"
          (click)="onUpdateMember(stepper, GroupUserDialaogType.Move)"
        >
          그룹이동
        </button>
      </div>
      <div *ngIf="currentStep > 0">
        <button mat-button mat-stroked-button (click)="onCnacel(stepper)">
          취소
        </button>
        <button
          mat-button
          class="bg-primary-darkest"
          (click)="onConfirm(stepper)"
        >
          완료
        </button>
      </div>
    </div>
  </app-layouts-default-dialog>
</div>