@if (serviceManager.currentSession != null) {
  @for (message of messages(); track message.msgid; let i = $index) {
    <div
      class="message"
      [class.author]="
        messageAsDm(message).author == serviceManager.currentSession()!.userData.userid ||
        messageAsNetwork(message).author.userid == 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) {
            <div style="position:relative;">
              @if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
                @if (file.extraMetaData['progressShown']) {
                  <tui-progress-circle
                    style="position: absolute; top: 0; right: 0; z-index: 10; transform: translate(-50%, -50%)"
                    [max]="file.extraMetaData['totalChunks']"
                    [value]="file.extraMetaData['uploadedChunks']"
                  />
                }
              }
              @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>
                }
              }
            </div>
          }
        </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-base-alt); gap: 5px">
              @if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
                @if (file.extraMetaData['progressShown']) {
                  <tui-progress-circle
                    size="xs"
                    [max]="file.extraMetaData['totalChunks']"
                    [value]="file.extraMetaData['uploadedChunks']"
                  />
                } @else {
                  <tui-icon icon="@tui.file"/>
                }
              } @else {
                <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>
  }
}