<p3xr-key-pager-inline [paging]="paging" (pageChanged)="updatePagedItems()"></p3xr-key-pager-inline>

<div class="p3xr-key-type-table">
    <div class="p3xr-key-type-header">
        <span style="flex: 1">{{ strings?.page?.key?.stream?.table?.timestamp }}</span>
        <span style="text-align: right">
            @if (!isReadonly) {
                <button mat-icon-button (click)="addStream($event)" [matTooltip]="strings?.intention?.add ?? 'Add'">
                    <mat-icon>add</mat-icon>
                </button>
            }
        </span>
    </div>

    @for (entry of pagedEntries; track entry.id) {
        <div class="p3xr-key-stream-entry-block">
            <!-- Entry header: timestamp + actions -->
            <div class="p3xr-key-stream-entry-header">
                <span class="p3xr-key-stream-timestamp">
                    <strong>{{ entry.id }}</strong>
                    <span class="p3xr-key-stream-timestamp-human">{{ showTimestamp(entry.id) }}</span>
                </span>
                <span class="p3xr-key-type-row-actions">
                    @if (!isReadonly) {
                        <mat-icon class="icon-warn" (click)="deleteStreamTimestamp(entry.id, $event)" [matTooltip]="strings?.intention?.delete ?? 'Delete'">delete</mat-icon>
                    }
                    <mat-icon class="icon-accent" (click)="viewEntryJson(entry, $event)" [matTooltip]="strings?.json ?? 'JSON'">account_tree</mat-icon>
                    <mat-icon class="icon-accent" (click)="copyEntry(entry)" [matTooltip]="strings?.intention?.copy ?? 'Copy'">content_copy</mat-icon>
                    <mat-icon class="icon-accent" (click)="downloadEntry(entry)" [matTooltip]="strings?.intention?.downloadBuffer ?? 'Download'">download</mat-icon>
                </span>
            </div>

            <!-- Entry fields -->
            <div class="p3xr-key-stream-data">
                @for (field of entry.fields; track field[0]) {
                    <div style="display: flex; gap: 8px; padding: 2px 0;">
                        <span style="min-width: 120px; opacity: 0.7;">{{ field[0] }}</span>
                        <span class="p3xr-value-col" [class.p3xr-pre]="valueFormat !== 'hex'" style="flex: 1; max-height: 200px; word-break: break-all;">@if (valueFormat === 'hex') {<p3xr-hex-monitor [value]="truncateDisplay(field[1])" [truncated]="isTruncated(field[1])"></p3xr-hex-monitor>} @else {{{ truncateDisplay(formatValue(field[1])) }}@if (isTruncated(field[1])) {<span style="opacity: 0.5;">...</span>}}</span>
                    </div>
                }
            </div>
        </div>
    }
</div>