@php
    $definition = $record['definition'] ?? '-';
    $type = $record['type'] ?? '-';
    $value = $record['value'] ?? '-';
    $path = $record['path'] ?? '-';
    $raw = $record['raw'] ?? null;
    $rawJson = is_array($raw) ? json_encode($raw, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) : null;
@endphp

<div class="space-y-4">
    <div class="grid grid-cols-1 gap-3">
        <div class="rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-white/10 dark:bg-white/5">
            <div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-300">Definition</div>
            <div class="mt-1 flex items-start justify-between gap-3">
                <div class="break-all font-mono text-xs text-gray-800 dark:text-gray-100">{{ $definition }}</div>
                <button
                    type="button"
                    x-data
                    @click="navigator.clipboard.writeText(@js($definition))"
                    class="shrink-0 text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                >
                    Copy
                </button>
            </div>
        </div>

        <div class="rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-white/10 dark:bg-white/5">
            <div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-300">Type</div>
            <div class="mt-1 break-all font-mono text-xs text-gray-800 dark:text-gray-100">{{ $type }}</div>
        </div>

        <div class="rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-white/10 dark:bg-white/5">
            <div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-300">Value</div>
            <div class="mt-1 flex items-start justify-between gap-3">
                <div class="whitespace-pre-wrap break-words text-sm text-gray-800 dark:text-gray-100">{{ $value }}</div>
                <button
                    type="button"
                    x-data
                    @click="navigator.clipboard.writeText(@js($value))"
                    class="shrink-0 text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                >
                    Copy
                </button>
            </div>
        </div>

        <div class="rounded-lg border border-gray-200 bg-white p-3 shadow-sm dark:border-white/10 dark:bg-white/5">
            <div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-300">Path</div>
            <div class="mt-1 break-all font-mono text-xs text-gray-800 dark:text-gray-100">{{ $path }}</div>
        </div>
    </div>

    @if ($rawJson)
        <div class="rounded-lg border border-gray-200 bg-gray-50 p-3 dark:border-white/10 dark:bg-white/5">
            <div class="mb-2 flex items-center justify-between text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-300">
                <span>Raw</span>
                <button
                    type="button"
                    x-data
                    @click="navigator.clipboard.writeText(@js($rawJson))"
                    class="text-xs font-medium text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
                >
                    Copy
                </button>
            </div>
            <pre class="max-h-[420px] overflow-auto text-xs font-mono leading-relaxed text-gray-800 dark:text-gray-100"><code class="language-json">{{ $rawJson }}</code></pre>
        </div>
    @endif
</div>