<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>
      <ng-template #dialogContainer></ng-template>
    </div>
    <ng-template [ngTemplateOutlet]="selectedUserListTemplate"></ng-template>
  </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>