<mat-card class="confirm-card mat-elevation-z dialog-creat-chat">
  <mat-card-header>
    <mat-card-title
      cdkDrag
      cdkDragRootElement=".cdk-overlay-pane"
      cdkDragHandle
      >{{ data.title }}</mat-card-title
    >
    <button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
      <i class="mdi mdi-window-close"></i>
    </button>
  </mat-card-header>
  <mat-card-content>
    <div>
      <mat-horizontal-stepper [linear]="isLinear" #stepper>
        <mat-step label="Step 1" state="phone">
          <ucap-local-organization-select-user
            (changeUserList)="onChangeSelectedUserList($event)"
          ></ucap-local-organization-select-user>
          <ng-template
            [ngTemplateOutlet]="selectedUserListTemplate"
          ></ng-template>
          <div>
            <button mat-button>취소</button>
            <button mat-button matStepperNext>
              완료
            </button>
          </div>
        </mat-step>
        <mat-step label="Step 2" state="chat">
          <div>
            <mat-label>새 그룹 추가</mat-label>
            <input
              matInput
              #searchWordInput
              placeholder="그룹 이름을 입력해주세요."
            />
            <button
              mat-button
              matSuffix
              mat-icon-button
              aria-label="Clear"
              (click)="searchWordInput.value = ''; onClickCancel()"
            >
              <mat-icon>close</mat-icon>
            </button>
          </div>
          <ng-template
            [ngTemplateOutlet]="selectedUserListTemplate"
          ></ng-template>
          <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button (click)="onClickComplete(searchWordInput.value)">
              Next
            </button>
          </div>
        </mat-step>
      </mat-horizontal-stepper>
    </div>

    <!-- <mat-card-actions class="button-form flex-row">
      <button
        mat-stroked-button
        (click)="onClickChoice(false)"
        class="mat-primary"
      >
        {{ 'common.messages.no' | translate }}
      </button>
      <button
        mat-flat-button
        [disabled]="getBtnValid()"
        (click)="onClickChoice(true)"
        class="mat-primary"
      >
        {{ 'common.messages.yes' | translate }}
      </button>
    </mat-card-actions> -->
  </mat-card-content>
</mat-card>

<ng-template #selectedUserListTemplate>
  <div class="list-chip">
    <mat-chip-list aria-label="User selection">
      <mat-chip
        *ngFor="let userInfo of selectedUserList"
        [selected]="getChipsRemoveYn(userInfo)"
        (removed)="onClickDeleteUser(userInfo)"
      >
        <!-- {{ userInfo | ucapTranslate: 'name' }} -->
        {{ userInfo.name }}
        <mat-icon matChipRemove *ngIf="getChipsRemoveYn(userInfo)"
          >clear</mat-icon
        >
      </mat-chip>
    </mat-chip-list>
  </div>
  <ng-container
    *ngIf="
      SelectUserDialogType.NewChat === SelectUserDialogType.NewChat;
      then newchatcount;
      else defaultcount
    "
  ></ng-container>
  <ng-template #newchatcount>
    <span [ngClass]="selectedUserList.length >= 300 ? 'text-warn-color' : ''">
      {{ selectedUserList.length }} / 300
      <!-- {{ environment.productConfig.CommonSetting.maxChatRoomUser - 1 }} -->
      <!-- {{ 'common.units.persons' | translate }} -->
    </span>
    <span
      class="text-warn-color"
      style="float: right;"
      *ngIf="selectedUserList.length >= 300"
    >
      <!-- ({{
        'chat.errors.maxCountOfRoomMemberWith'
          | translate
            : {
                maxCount:
                  environment.productConfig.CommonSetting.maxChatRoomUser - 1
              }
      }}) -->
    </span>
  </ng-template>
  <ng-template #defaultcount>
    <span>
      {{ selectedUserList.length }}
      <!-- {{ 'common.units.persons' | translate }} -->
    </span>
  </ng-template>
</ng-template>
