@php
    /** @var \App\Models\Revision $revision */
    $render = function ($value): string {
        if ($value === null || $value === '') {
            return '—';
        }

        return is_scalar($value)
            ? (string) $value
            : json_encode($value, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
    };
@endphp

{{-- Old beside new, field by field. Reading the difference is the point:
     "changed the Catalan title" is useful, "saved the page" is not. --}}
<div class="space-y-4">
    @forelse ($revision->fields() as $field)
        @php($diff = $revision->diff($field))

        <div class="space-y-2">
            <p class="text-sm font-semibold text-gray-700 dark:text-gray-200">{{ $field }}</p>

            <div class="grid gap-2 sm:grid-cols-2">
                <div class="rounded-lg border border-danger-200 bg-danger-50/50 p-3 dark:border-danger-800/40 dark:bg-danger-500/5">
                    <p class="mb-1 text-xs font-medium uppercase tracking-wide text-danger-700 dark:text-danger-400">
                        {{ __('panel.revisions.before') }}
                    </p>
                    <pre class="overflow-x-auto whitespace-pre-wrap break-words text-xs text-gray-700 dark:text-gray-300">{{ $render($diff['old']) }}</pre>
                </div>

                <div class="rounded-lg border border-success-200 bg-success-50/50 p-3 dark:border-success-800/40 dark:bg-success-500/5">
                    <p class="mb-1 text-xs font-medium uppercase tracking-wide text-success-700 dark:text-success-400">
                        {{ __('panel.revisions.after') }}
                    </p>
                    <pre class="overflow-x-auto whitespace-pre-wrap break-words text-xs text-gray-700 dark:text-gray-300">{{ $render($diff['new']) }}</pre>
                </div>
            </div>
        </div>
    @empty
        <p class="text-sm text-gray-500 dark:text-gray-400">
            {{ __('panel.revisions.no_changes') }}
        </p>
    @endforelse
</div>