<div fxLayout="column" class="list">
  <div class="search-list">
    <perfect-scrollbar class="room-user-scrollbar">
      <ucap-profile-user-list-item
        *ngFor="let userInfo of userInfoList"
        [userInfo]="userInfo"
        [presence]="getStatusBulkInfo(userInfo) | async"
        [sessionVerinfo]="sessionVerinfo"
        (contextmenu)="onContextMenuRoomUser($event, userInfo)"
        (openProfile)="onClickOpenProfile(userInfo.seq)"
      >
      </ucap-profile-user-list-item>
    </perfect-scrollbar>
  </div>
  <div
    fxFlex="1 1 50px"
    fxLayout="row"
    fxLayoutAlign="center center"
    class="btn-box"
  >
    <button mat-flat-button class="mat-primary" (click)="onClickAddMember()">
      {{ 'chat.addMemberToRoom' | translate }}
    </button>
    <button mat-flat-button class="mat-primary" (click)="onClickAddGroup()">
      {{ 'chat.addMemberToGroup' | translate }}
    </button>
  </div>
</div>

<div
  style="visibility: hidden; position: fixed"
  [style.left]="roomUserContextMenuPosition.x"
  [style.top]="roomUserContextMenuPosition.y"
  #roomUserContextMenuTrigger="matMenuTrigger"
  [matMenuTriggerFor]="roomUserContextMenu"
></div>
<mat-menu #roomUserContextMenu="matMenu">
  <ng-template matMenuContent let-buddy="buddy">
    <button mat-menu-item (click)="onClickContextMenu('FORCING_EXIT', buddy)">
      {{ 'chat.ejectFromRoom' | translate }}
    </button>
  </ng-template>
</mat-menu>
