<!-- MESSAGE -->
<div
  #mbContainer
  class="message-row"
  [ngClass]="{
    me: isMe,
    contact: !isMe,
    highlight: highlight
  }"
>
  <ucap-chat-message-box-read-here
    id="message-box-readhere"
    *ngIf="existReadToHere"
  >
  </ucap-chat-message-box-read-here>

  <ucap-chat-message-box-date-splitter *ngIf="dateChanged" [message]="message">
  </ucap-chat-message-box-date-splitter>

  <div #mbChatRow class="chat-row">
    <div *ngIf="isInformation(message); then information; else contents"></div>
    <ng-template #information>
      <ng-container class="bubble" [ngSwitch]="message.type">
        <ucap-chat-message-box-information
          *ngSwitchCase="EventType.Join"
          [message]="message"
        ></ucap-chat-message-box-information>

        <ucap-chat-message-box-information
          *ngSwitchCase="EventType.Exit"
          [message]="message"
        >
        </ucap-chat-message-box-information>
        <ucap-chat-message-box-information
          *ngSwitchCase="EventType.ForcedExit"
          [message]="message"
        >
        </ucap-chat-message-box-information>
        <ucap-chat-message-box-information
          *ngSwitchCase="EventType.RenameRoom"
          [message]="message"
        >
        </ucap-chat-message-box-information>
        <ucap-chat-message-box-information
          *ngSwitchCase="EventType.GuideForRoomTimerChanged"
          [message]="message"
          senderName="{{ senderInfo | ucapOrganizationTranslate: 'name' }}"
        >
        </ucap-chat-message-box-information>
        <ucap-chat-message-box-information
          *ngSwitchCase="EventType.NotificationForiOSCapture"
          [message]="message"
          senderName="{{ senderInfo | ucapOrganizationTranslate: 'name' }}"
        >
        </ucap-chat-message-box-information>
      </ng-container>
    </ng-template>
    <ng-template #contents>
      <div class="ballon-container">
        <div class="header">
          <div class="user-profile-thumb">
            <div class="profileImage">
              <img
                ucapImage
                [base]="profileImageRoot"
                [path]="senderInfo?.profileImageFile"
                [default]="defaultProfileImage"
              />
            </div>
          </div>
          <div class="sender-info">
            <div class="name">
              {{ senderInfo | ucapOrganizationTranslate: 'name' }}
            </div>
            <div class="grade">
              {{ senderInfo | ucapOrganizationTranslate: 'grade' }}
            </div>
          </div>
          <div class="date">
            {{ message.sendDate | ucapDate: 'LT' }}
          </div>
          <div class="btn-area">
            <button mat-icon-button color="primary" aria-label="">
              <mat-icon>more_vert</mat-icon>
            </button>
          </div>
        </div>

        <div class="contents">
          <ng-container
            class="bubble"
            *ngIf="!isInformation(message)"
            [ngSwitch]="message.type"
          >
            <ucap-chat-message-box-text
              *ngSwitchCase="EventType.Character"
              [message]="message"
              (openLink)="onOpenLink($event)"
            >
            </ucap-chat-message-box-text>

            <ucap-chat-message-box-file
              *ngSwitchCase="EventType.File"
              [message]="message"
              [roomInfo]="roomInfo"
            >
            </ucap-chat-message-box-file>

            <ucap-chat-message-box-sticker
              *ngSwitchCase="EventType.Sticker"
              [message]="message"
              (openLink)="onOpenLink($event)"
            >
              <img
                ucapUiChatStickerComponent="stickerImage"
                [src]="getStickerImage(message)"
                onerror="this.src='assets/sticker/sticker_default.png'"
              />
            </ucap-chat-message-box-sticker>

            <ucap-chat-message-box-mass
              *ngSwitchCase="EventType.MassText"
              [message]="message"
              (openLink)="onOpenLink($event)"
              (massDetail)="onOpenMassDetail($event)"
            >
            </ucap-chat-message-box-mass>

            <ucap-chat-message-box-schedule
              *ngSwitchCase="EventType.Plan"
              [message]="message"
            >
            </ucap-chat-message-box-schedule>

            <ucap-chat-message-box-video-conference
              *ngSwitchCase="EventType.VideoConference"
              [message]="message"
            >
            </ucap-chat-message-box-video-conference>

            <ucap-chat-message-box-translation
              *ngSwitchCase="EventType.Translation"
              [message]="message"
              (openLink)="onOpenLink($event)"
            ></ucap-chat-message-box-translation>

            <ucap-chat-message-box-mass-translation
              *ngSwitchCase="EventType.MassTranslation"
              [message]="message"
              (openLink)="onOpenLink($event)"
            >
            </ucap-chat-message-box-mass-translation>

            <ucap-chat-message-box-recall
              *ngSwitchCase="EventType.RecalledMessage"
            ></ucap-chat-message-box-recall>

            <ucap-chat-message-box-sms
              *ngSwitchCase="'SMS'"
            ></ucap-chat-message-box-sms>

            <ucap-chat-message-box-reply
              *ngSwitchCase="'REPLY'"
            ></ucap-chat-message-box-reply>
          </ng-container>
        </div>
      </div>
      <div *ngIf="unreadCount" class="unread-count text-accent-chat">
        {{ unreadCount }}
      </div>
    </ng-template>
  </div>
</div>
