<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: 20%">{{ strings?.page?.key?.zset?.table?.score }}</span>
        <span style="flex: 60%">{{ strings?.page?.key?.zset?.table?.value }}</span>
        <span style="flex: 20%; text-align: right">
            @if (!isReadonly) {
                <button mat-icon-button (click)="addZSet($event)" matTooltip="Add">
                    <mat-icon>add</mat-icon>
                </button>
            }
        </span>
    </div>
    @for (item of pagedItems; track item.index) {
        <div class="p3xr-key-type-row">
            <span class="p3xr-key-col" style="flex: 20%; cursor: pointer" (click)="editValue(item, $event)">{{ item.score }}</span>
            <span class="p3xr-value-col" [class.p3xr-pre]="valueFormat !== 'hex'" style="flex: 60%; cursor: pointer" (click)="editValue(item, $event)">@if (valueFormat === 'hex') {<p3xr-hex-monitor [value]="truncateDisplay(item.member)" [truncated]="isTruncated(item.member)"></p3xr-hex-monitor>} @else {{{ truncateDisplay(formatValue(item.member)) }}@if (isTruncated(item.member)) {<span style="opacity: 0.5;">...</span>}}</span>
            <span style="flex: 20%; text-align: right" class="p3xr-key-type-row-actions">
                @if (!isReadonly) { <mat-icon class="icon-warn" (click)="deleteZSet(item, $event)" matTooltip="Delete">delete</mat-icon> }
                <mat-icon class="icon-accent" (click)="showJsonItem(item.member, $event)" matTooltip="JSON">account_tree</mat-icon>
                <mat-icon class="icon-accent" (click)="copyItem(item.member)" matTooltip="Copy">content_copy</mat-icon>
                <mat-icon class="icon-accent" (click)="downloadItem(item.index)" matTooltip="Download">download</mat-icon>
                @if (!isReadonly) { <mat-icon class="icon-primary" (click)="editValue(item, $event)" matTooltip="Edit">edit</mat-icon> }
            </span>
        </div>
    }
</div>