<!-- Action buttons when NOT editing -->
@if (!editable) {
    <div class="p3xr-key-type-actions">
        @if (!isReadonly) {
            @if (isGtSm) {
                <button mat-raised-button class="btn-primary p3xr-action-btn" type="button" (click)="setBufferUpload()">
                    <mat-icon>upload</mat-icon>
                    <span>{{ strings?.intention?.setBuffer }}</span>
                </button>
            } @else {
                <button mat-mini-fab class="btn-primary" type="button" (click)="setBufferUpload()"
                    [matTooltip]="strings?.intention?.setBuffer ?? 'Upload'" matTooltipPosition="above">
                    <mat-icon>upload</mat-icon>
                </button>
            }
        }
        @if (isGtSm) {
            <button mat-raised-button class="btn-accent p3xr-action-btn" type="button" (click)="downloadBufferFile()">
                <mat-icon>download</mat-icon>
                <span>{{ strings?.intention?.downloadBuffer }}</span>
            </button>
        } @else {
            <button mat-mini-fab class="btn-accent" type="button" (click)="downloadBufferFile()"
                [matTooltip]="strings?.intention?.downloadBuffer ?? 'Download'" matTooltipPosition="above">
                <mat-icon>download</mat-icon>
            </button>
        }
        @if (isGtSm) {
            <button mat-raised-button class="btn-accent p3xr-action-btn" type="button" (click)="jsonViewer($event)">
                <mat-icon>account_tree</mat-icon>
                <span>{{ strings?.intention?.jsonViewShow }}</span>
            </button>
        } @else {
            <button mat-mini-fab class="btn-accent" type="button" (click)="jsonViewer($event)"
                [matTooltip]="strings?.intention?.jsonViewShow ?? 'JSON'" matTooltipPosition="above">
                <mat-icon>account_tree</mat-icon>
            </button>
        }
        @if (isGtSm) {
            <button mat-raised-button class="btn-accent p3xr-action-btn" type="button" (click)="copyValue()">
                <mat-icon>content_copy</mat-icon>
                <span>{{ strings?.intention?.copy }}</span>
            </button>
        } @else {
            <button mat-mini-fab class="btn-accent" type="button" (click)="copyValue()"
                [matTooltip]="strings?.intention?.copy ?? 'Copy'" matTooltipPosition="above">
                <mat-icon>content_copy</mat-icon>
            </button>
        }
        @if (!isReadonly) {
            @if (isGtSm) {
                <button mat-raised-button class="btn-primary p3xr-action-btn" type="button" (click)="formatJson()">
                    <mat-icon>format_line_spacing</mat-icon>
                    <span>{{ strings?.intention?.formatJson }}</span>
                </button>
            } @else {
                <button mat-mini-fab class="btn-primary" type="button" (click)="formatJson()"
                    [matTooltip]="strings?.intention?.formatJson ?? 'Format JSON'" matTooltipPosition="above">
                    <mat-icon>format_line_spacing</mat-icon>
                </button>
            }
        }
        @if (isGtSm) {
            <button mat-raised-button class="btn-primary p3xr-action-btn" type="button" (click)="jsonEditor()">
                <mat-icon>description</mat-icon>
                <span>{{ strings?.intention?.jsonViewEditor }}</span>
            </button>
        } @else {
            <button mat-mini-fab class="btn-primary" type="button" (click)="jsonEditor()"
                [matTooltip]="strings?.intention?.jsonViewEditor ?? 'JSON Editor'" matTooltipPosition="above">
                <mat-icon>description</mat-icon>
            </button>
        }
        @if (redisState.redisVersion().isAtLeast(8, 4)) {
            @if (isGtSm) {
                <button mat-raised-button class="btn-accent p3xr-action-btn" type="button" (click)="showDigest()">
                    <mat-icon>numbers</mat-icon>
                    <span>Digest</span>
                </button>
            } @else {
                <button mat-mini-fab class="btn-accent" type="button" (click)="showDigest()"
                    matTooltip="Digest" matTooltipPosition="above">
                    <mat-icon>numbers</mat-icon>
                </button>
            }
        }
        @if (!isReadonly) {
            @if (isGtSm) {
                <button mat-raised-button class="btn-primary p3xr-action-btn" type="button" (click)="edit()">
                    <mat-icon>edit</mat-icon>
                    <span>{{ strings?.intention?.edit }}</span>
                </button>
            } @else {
                <button mat-mini-fab class="btn-primary" type="button" (click)="edit()"
                    [matTooltip]="strings?.intention?.edit ?? 'Edit'" matTooltipPosition="above">
                    <mat-icon>edit</mat-icon>
                </button>
            }
        }
    </div>
}

<!-- Edit mode buttons -->
@if (editable) {
    <div class="p3xr-key-type-actions">
        @if (!isReadonly) {
            <mat-slide-toggle [(ngModel)]="validateJson" class="btn-accent" style="margin-right: 8px;">
                {{ strings?.label?.validateJson }}
            </mat-slide-toggle>
        }
        @if (isGtSm) {
            <button mat-raised-button class="btn-warn p3xr-action-btn" type="button" (click)="cancelEdit()">
                <mat-icon>cancel</mat-icon>
                <span>{{ strings?.intention?.cancel }}</span>
            </button>
        } @else {
            <button mat-mini-fab class="btn-warn" type="button" (click)="cancelEdit()"
                [matTooltip]="strings?.intention?.cancel ?? 'Cancel'" matTooltipPosition="above">
                <mat-icon>cancel</mat-icon>
            </button>
        }
        @if (!isReadonly) {
            @if (isGtSm) {
                <button mat-raised-button class="btn-primary p3xr-action-btn" type="button" (click)="setBufferUpload()">
                    <mat-icon>upload</mat-icon>
                    <span>{{ strings?.intention?.setBuffer }}</span>
                </button>
            } @else {
                <button mat-mini-fab class="btn-primary" type="button" (click)="setBufferUpload()"
                    [matTooltip]="strings?.intention?.setBuffer ?? 'Upload'" matTooltipPosition="above">
                    <mat-icon>upload</mat-icon>
                </button>
            }
        }
        @if (!isReadonly) {
            @if (isGtSm) {
                <button mat-raised-button class="btn-primary p3xr-action-btn" type="button" (click)="save()">
                    <mat-icon>save</mat-icon>
                    <span>{{ strings?.intention?.save }}</span>
                </button>
            } @else {
                <button mat-mini-fab class="btn-primary" type="button" (click)="save()"
                    [matTooltip]="strings?.intention?.save ?? 'Save'" matTooltipPosition="above">
                    <mat-icon>save</mat-icon>
                </button>
            }
        }
    </div>
}

<!-- Value display / editor -->
<div class="p3xr-key-type-content">
    @if (editable) {
        <mat-form-field class="p3xr-key-type-editor" appearance="fill">
        
            @if (p3xrValue && p3xrValue.toString() === '[object ArrayBuffer]') {
                <div class="p3xr-key-type-buffer-info">
                    {{ strings?.label?.isBuffer?.({ maxValueAsBuffer: prettyBytes(maxValueAsBuffer) }) }}
                    {{ bufferDisplay() }}
                </div>
            }
            @if (buffer) {
                <div class="p3xr-key-type-buffer-info">
                    {{ strings?.label?.isBuffer?.({ maxValueAsBuffer: prettyBytes(maxValueAsBuffer) }) }}
                    {{ bufferDisplay() }}
                </div>
                <textarea matInput [(ngModel)]="p3xrValueBuffer" cdkTextareaAutosize cdkAutosizeMinRows="4"></textarea>
            } @else {
                <textarea matInput [(ngModel)]="p3xrValue" cdkTextareaAutosize cdkAutosizeMinRows="4"></textarea>
            }
        </mat-form-field>
    } @else {
        <div class="p3xr-key-type-display" [style.overflow]="valueFormat === 'hex' ? 'visible' : 'auto'" style="cursor: pointer; max-width: 100%;" (click)="edit()">
            @if (valueFormat === 'hex') {
                <p3xr-hex-monitor [value]="truncateDisplay(p3xrValue)" [truncated]="isTruncated(p3xrValue)"></p3xr-hex-monitor>
            } @else {
                <span class="p3xr-pre" style="word-break: break-all; white-space: pre-wrap;">{{ truncateDisplay(formatValue(p3xrValue)) }}@if (isTruncated(p3xrValue)) {<span style="opacity: 0.5;">...</span>}</span>
            }
        </div>
    }
</div>