<mat-card class="confirm-card mat-elevation-z">
  <mat-card-header>
    <mat-card-title>
      {{ data.title }}
      <span class="count">
        {{ selectedUserList.length }} / {{ data.selectedUserList.length }}
      </span>
      <mat-checkbox
        #checkbox
        labelPosition="before"
        [checked]="
          selectedUserList.length === data.selectedUserList.length &&
          data.selectedUserList.length > 0
        "
        (change)="onCheckAllUser(checkbox.checked)"
        (click)="$event.stopPropagation()"
      >
        {{ 'common.messages.selectAll' | translate }}
      </mat-checkbox>
    </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 class="item-list">
      <cdk-virtual-scroll-viewport
        itemSize="60"
        #cvsvDeptUser
        perfectScrollbar
        fxFlexFill
      >
        <ucap-profile-user-list-item
          *cdkVirtualFor="let userInfo of data.selectedUserList"
          [userInfo]="userInfo"
          [sessionVerinfo]="sessionVerinfo"
          [selectedUserList]="selectedUserList"
          [checkable]="userInfo.seq !== loginRes.userSeq"
          [checkDisabled]="false"
          [isChecked]="getCheckedUser(userInfo)"
          (checkUser)="onCheckUser($event)"
          (click)="onToggleUser(userInfo)"
          (openProfile)="onClickOpenProfile($event)"
          [matTooltip]="
            userInfo.companyName +
            ' / ' +
            userInfo.lineNumber +
            ' / ' +
            userInfo.hpNumber
          "
          matTooltipPosition="after"
        >
        </ucap-profile-user-list-item>
      </cdk-virtual-scroll-viewport>
    </div>
  </mat-card-content>
  <mat-card-actions class="button-farm flex-row">
    <button
      mat-stroked-button
      (click)="onClickChoice(false)"
      class="mat-primary"
    >
      {{ 'common.messages.cancel' | translate }}
    </button>
    <button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
      {{ 'common.messages.apply' | translate }}
    </button>
  </mat-card-actions>
</mat-card>
