@if (serviceManager.currentSession != null) {
  @for (message of messages(); track message.msgid; let i = $index) {
    <div
      class="message"
      [class.author]="message.author == serviceManager.currentSession()!.userData.userid"
      [class.chained_start]="isMessageStartOfChain(i)"
      [class.chained_middle]="isMessageMiddleInChain(i)"
      [class.chained_end]="isMessageEndOfChain(i)"
    >
      <div class="above">
        <span>{{message.sent_at.T * 1000 | date: 'HH:mm'}}</span>
      </div>
      <div class="bubble">
        <span class="message-text">{{message.message}}</span>
        <masonry style="max-height: 300px">
          @for (file of message.files; track file) {
            @if (file.type == "image") {
              <img [src]="file.path" style="width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 25px"/>
            } @else if (file.type == "video") {
              @if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
                <video-player maxHeight="250px" maxWidth="250px" [src]="file.path" [thumbnailOverwrite]="file.extraMetaData['thumbnailMetaData']"></video-player>
              } @else {
                <video-player maxHeight="250px" maxWidth="250px" [src]="file.path"></video-player>
              }
            }
          }
        </masonry>
      </div>
      <div class="below"></div>
    </div>
  }
}