<div class="chat-list-item">
  <div class="profileImage">
    <img
      class="thumbnail"
      ucapImage
      [base]="profileImageRoot"
      [path]="profileImage"
      [default]="defaultProfileImage"
    />
  </div>
  <div class="roomName">
    {{ roomName }}
    <strong *ngIf="roomInfo.roomType === RoomType.Multi"
      >({{ roomInfo.joinUserCount }})</strong
    >
  </div>
  <div class="lastMessage">{{ roomInfo.finalEventMessage }}</div>
  <div class="date">{{ roomInfo.finalEventDate | ucapDate: 'LT' }}</div>

  <span
    class="noti-sum"
    *ngIf="!!roomInfo.noReadCnt && roomInfo.noReadCnt > 0"
    [matBadgeHidden]="roomInfo.noReadCnt === 0"
    [matBadge]="roomInfo.noReadCnt"
    matBadgeOverlap="true"
    matBadgeColor="accent"
    matBadgePosition="below after"
  ></span>

  <button
    mat-icon-button
    aria-label="room-menu"
    *ngIf="!checkable"
    [matMenuTriggerFor]="roomMenu"
    (click)="$event.stopPropagation()"
  >
    <mat-icon>more_vert</mat-icon>
  </button>
  <mat-checkbox
    *ngIf="checkable"
    #checkbox
    [checked]="checked"
    (change)="onToggleItem(checkbox.checked)"
    (click)="$event.stopPropagation()"
    class="group-check"
  >
  </mat-checkbox>
</div>

<mat-menu #roomMenu="matMenu">
  <span class="manu-title">{{ roomName }}</span>
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>대화방 열기</span>
  </button>
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>알림 해제</span>
  </button>
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>대화방 나가기</span>
  </button>
</mat-menu>
