@php
    use App\Support\Diff\ValueStringifier;

    $stringifier = app(ValueStringifier::class);
    $labelClasses = 'text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400';
    $mutedTextClasses = $dimUnchanged ? 'text-gray-500 dark:text-gray-400' : 'text-gray-900 dark:text-gray-100';
    $itemPadding = $compact ? 'px-2 py-1 text-xs' : 'px-2.5 py-1 text-sm';
@endphp

<div class="space-y-3" aria-label="{{ $row->label }} list diff">
    @if ($row->addedItems !== [])
        <div class="space-y-2">
            <div class="{{ $labelClasses }}">Added items</div>
            <ul aria-label="Added items" class="flex flex-wrap gap-2">
                @foreach ($row->addedItems as $item)
                    <li class="rounded-full bg-success-100 {{ $itemPadding }} text-success-800 dark:bg-success-500/20 dark:text-success-100">
                        {{ $stringifier->stringify($item) }}
                    </li>
                @endforeach
            </ul>
        </div>
    @endif

    @if ($row->removedItems !== [])
        <div class="space-y-2">
            <div class="{{ $labelClasses }}">Removed items</div>
            <ul aria-label="Removed items" class="flex flex-wrap gap-2">
                @foreach ($row->removedItems as $item)
                    <li class="rounded-full bg-danger-100 {{ $itemPadding }} text-danger-800 dark:bg-danger-500/20 dark:text-danger-100">
                        {{ $stringifier->stringify($item) }}
                    </li>
                @endforeach
            </ul>
        </div>
    @endif

    @if ($row->unchangedItems !== [])
        <div class="space-y-2">
            <div class="{{ $labelClasses }}">Unchanged items</div>
            <ul aria-label="Unchanged items" class="flex flex-wrap gap-2">
                @foreach ($row->unchangedItems as $item)
                    <li class="rounded-full bg-gray-100 {{ $itemPadding }} {{ $mutedTextClasses }} dark:bg-white/5">
                        {{ $stringifier->stringify($item) }}
                    </li>
                @endforeach
            </ul>
        </div>
    @endif
</div>