@php
    use App\Support\Badges\BadgeCatalog;
    use App\Support\Badges\BadgeDomain;
    use App\Support\Diff\ValueStringifier;
    use Illuminate\Support\Str;

    $badge = BadgeCatalog::spec(BadgeDomain::DiffRowStatus, $row->status);
    $stringifier = app(ValueStringifier::class);
    $rowId = 'diff-row-'.Str::slug($row->key.'-'.$row->status->value);
    $padding = $compact ? 'p-3' : 'p-4';
@endphp

<article
    aria-labelledby="{{ $rowId }}"
    class="rounded-xl border border-warning-200 bg-warning-50/70 {{ $padding }} dark:border-warning-500/30 dark:bg-warning-500/10"
>
    <div class="flex flex-wrap items-start justify-between gap-3">
        <div class="space-y-1">
            <div class="flex flex-wrap items-center gap-2">
                <h4 id="{{ $rowId }}" class="text-sm font-semibold text-gray-950 dark:text-white">{{ $row->label }}</h4>
                <x-filament::badge :color="$badge->color" :icon="$badge->icon">{{ $badge->label }}</x-filament::badge>
            </div>
            <p class="text-xs text-gray-600 dark:text-gray-300">Changed value</p>
        </div>
    </div>

    <div class="mt-3">
        @if ($row->isListLike)
            @include('filament.partials.diff.inline-list', [
                'row' => $row,
                'compact' => $compact,
                'dimUnchanged' => $dimUnchanged,
            ])
        @else
            <dl class="grid gap-3 md:grid-cols-2">
                <div>
                    <dt class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">From</dt>
                    <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $stringifier->stringify($row->oldValue) }}</dd>
                </div>
                <div>
                    <dt class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">To</dt>
                    <dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">{{ $stringifier->stringify($row->newValue) }}</dd>
                </div>
            </dl>
        @endif
    </div>
</article>