@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" tuiDropdownContext [tuiDropdown]="messageContextMenu">
        <span class="message-text">{{ message.message }}</span>
        <masonry style="max-height: 300px">
          @for (file of filterExpressedMedia(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="300px" maxWidth="300px" [src]="file.path"
                              [thumbnailOverwrite]="file.extraMetaData['thumbnailMetaData']"></video-player>
              } @else {
                <video-player maxHeight="300px" maxWidth="300px" [src]="file.path"></video-player>
              }
            }
          }
        </masonry>

        <div tuiGroup orientation="vertical" style="width: 100%">
          @for (file of filterNonExpressedMedia(message.files); track file) {
            <div style="width: 100%; height: 50px; display: flex; align-items: center; padding: 0 10px; background: var(--tui-background-accent-1); gap: 5px">
              <tui-icon icon="@tui.file"/>
              <span>{{ file.fileName }}</span>
            </div>
          }
        </div>
      </div>
      <div class="below"></div>

      <ng-template #messageContextMenu>
        <tui-data-list>
          <button
            tuiOption
            type="button"
            iconEnd="@tui.pencil"
            (click)="messageBoxViewModel().editingMessage.set({message: message.message, messageId: message.msgid}); messageBoxViewModel().message.set(message.message);"
          >
            {{ "chat.elements.messages.contextMenu.edit" | translate }}
          </button>

          <button
            style="color: var(--tui-text-negative)"
            tuiOption
            type="button"
            iconEnd="@tui.trash"
            (click)="onDelete.emit(message.msgid)"
          >
            {{ "chat.elements.messages.contextMenu.delete" | translate }}
          </button>
        </tui-data-list>
      </ng-template>
    </div>
  }
}