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

<div class="p3xr-key-type-table">
    <div class="p3xr-key-type-header">
        <span style="flex: 20%">{{ strings?.page?.key?.hash?.table?.hashkey }}</span>
        <span style="flex: 60%">{{ strings?.page?.key?.hash?.table?.value }}</span>
        <span style="flex: 20%; text-align: right">
            @if (!isReadonly) {
                <button mat-icon-button (click)="addHash($event)" matTooltip="Add">
                    <mat-icon>add</mat-icon>
                </button>
            }
        </span>
    </div>

    @for (item of pagedItems; track item.key) {
        <div class="p3xr-key-type-row">
            <span class="p3xr-key-col" style="flex: 20%; cursor: pointer" (click)="editValue(item.key, item.value, $event)">{{ item.key }}</span>
            <span class="p3xr-value-col" [class.p3xr-pre]="valueFormat !== 'hex'" style="flex: 60%; cursor: pointer" (click)="editValue(item.key, item.value, $event)">@if (valueFormat === 'hex') {<p3xr-hex-monitor [value]="truncateDisplay(item.value)" [truncated]="isTruncated(item.value)"></p3xr-hex-monitor>} @else {{{ truncateDisplay(formatValue(item.value)) }}@if (isTruncated(item.value)) {<span style="opacity: 0.5;">...</span>}}</span>
            <span style="flex: 20%; text-align: right" class="p3xr-key-type-row-actions">
                @if (!isReadonly && redisState.redisVersion().isAtLeast(8, 0)) {
                    <mat-icon [style.color]="getFieldTtlColor(item.key) || null"
                              [style.opacity]="hasFieldTtl(item.key) ? 0.7 : 0.3"
                              [class.p3xr-tree-ttl-pulse]="isFieldTtlPulsing(item.key)"
                              (click)="setFieldTtl(item.key, $event)"
                              [matTooltip]="hasFieldTtl(item.key) ? ('TTL: ' + formatFieldTtl(item.key)) : (strings?.intention?.ttl)">schedule</mat-icon>
                }
                @if (!isReadonly) {
                    <mat-icon class="icon-warn" (click)="deleteHashKey(item.key, $event)" matTooltip="Delete">delete</mat-icon>
                }
                <mat-icon class="icon-accent" (click)="showJsonItem(item.value, $event)" matTooltip="JSON">account_tree</mat-icon>
                <mat-icon class="icon-accent" (click)="copyItem(item.value)" matTooltip="Copy">content_copy</mat-icon>
                <mat-icon class="icon-accent" (click)="downloadItem(item.key)" matTooltip="Download">download</mat-icon>
                @if (!isReadonly) {
                    <mat-icon class="icon-primary" (click)="editValue(item.key, item.value, $event)" matTooltip="Edit">edit</mat-icon>
                }
            </span>
        </div>
    }
</div>