<div class="dialog-container">
  <app-layouts-default-dialog
    [disableClose]="false"
    (closed)="onClosed($event)"
  >
    <div appLayoutsDefaultDialog="header">{{ title }}</div>
    <div class="dialog-body" appLayoutsDefaultDialog="body">
      <mat-horizontal-stepper
        fxFlexFill
        [linear]="true"
        #stepper
        [selectedIndex]="currentStep"
        (animationDone)="doneAnimation()"
      >
        <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">
              <app-group-profile-list-01
                [userInfos]="data.groupBuddyList.buddyList"
                [selectedUser]="selectedUserList"
                [checkable]="true"
                [isDialog]="true"
                (toggleCheck)="onChangeSelectedUserList($event)"
              >
              </app-group-profile-list-01>
            </div>
          </div>
        </mat-step>
        <mat-step label="Step 2">
          <div class="ucap-dialog-app-group-select-user">
            <app-group-select-user
              *ngIf="
                currentStep > 0 && currentManageType === GroupManageType.Add
              "
              [isDialog]="true"
              [checkable]="true"
              [selectedUserList]="selectedUserList"
              (toggleCheckUser)="onChangeSelectedUserList($event)"
              (toggleCheckGroup)="onSelectBySectionUserGroup($event)"
            ></app-group-select-user>

            <app-sections-select-group
              *ngIf="
                currentStep > 0 &&
                (currentManageType === GroupManageType.Copy ||
                  GroupManageType.Move)
              "
              [isDialog]="true"
              [checkable]="true"
              [curGroup]="data.groupBuddyList.group"
              [selectedGroupList]="selectedGroupList"
              [selectedUserList]="selectedUserList"
              (changeUserList)="onChangeSelectedUserList($event)"
              (changeGroupList)="onSelectBySectionGroup($event)"
              (changeGroupName)="onChangeGroupName($event)"
            ></app-sections-select-group>
            <!-- </ng-container> -->
          </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>
                {{ 'group:dialog.selectedMember' | ucapI18n }} (<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-stroked-button
          (click)="onDelete(stepper)"
          [disabled]="checkDisableBtn()"
        >
          {{ 'group:dialog.btn.remove' | ucapI18n }}
        </button>
        <button
          mat-button
          class="bg-primary-darkest"
          [disabled]="checkDisableBtn()"
          (click)="onUpdateMember(stepper, GroupManageType.Copy)"
        >
          {{ 'group:dialog.title.copyGroup' | ucapI18n }}
        </button>
        <button
          mat-button
          class="bg-primary-darkest"
          [disabled]="checkDisableBtn()"
          (click)="onUpdateMember(stepper, GroupManageType.Move)"
        >
          {{ 'group:dialog.title.moveGroup' | ucapI18n }}
        </button>
      </div>
      <div *ngIf="currentStep > 0">
        <button mat-button mat-stroked-button (click)="onCancel(stepper)">
          {{ 'group:dialog.btn.cancel' | ucapI18n }}
        </button>
        <button
          mat-button
          class="bg-primary-darkest"
          (click)="onConfirm(stepper)"
          [disabled]="checkDisableBtnConfirm()"
        >
          {{ 'group:dialog.btn.compleate' | ucapI18n }}
        </button>
      </div>
    </div>
  </app-layouts-default-dialog>
</div>