@if (loading()) {
  @for (_ of [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}]; track _; let i = $index) {
    <div class="message"
         [class.chained_start]="i == 0 || i == 3 || i == 6"
         [class.chained_end]="i == 2 || i == 5 || i == 9"
         [class.chained_middle]="i != 0 && i != 3 && i != 6 && i != 2 && i != 5 && i != 9"
         [class.author]="i == 3 || i == 4 || i == 5"
    >
      <div class="bubble" [tuiSkeleton]="true">
        {{i}}
      </div>
    </div>
  }
} @else {
  @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>
    }
  }

}