@php
    /** @var ?\App\Models\Tenant $tenant */
    /** @var \Illuminate\Support\Collection<int, \App\Models\OperationRun> $runs */
    /** @var string $operationsIndexUrl */
@endphp

<div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-800 dark:bg-gray-900">
    <div class="flex items-center justify-between gap-3">
        <div class="text-sm font-semibold">Recent operations</div>

        <a
            href="{{ $operationsIndexUrl }}"
            class="text-sm font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
        >
            View all operations
        </a>
    </div>

    @if ($runs->isEmpty())
        <div class="mt-3 text-sm text-gray-500 dark:text-gray-400">
            No operations yet.
        </div>
    @else
        <ul class="mt-3 divide-y divide-gray-100 dark:divide-gray-800">
            @foreach ($runs as $run)
                <li class="flex items-center justify-between gap-3 py-2">
                    <div class="min-w-0">
                        <div class="truncate text-sm font-medium">
                            {{ \App\Support\OperationCatalog::label((string) $run->type) }}
                        </div>

                        <div class="text-xs text-gray-500 dark:text-gray-400">
                            {{ $run->created_at?->diffForHumans() ?? '—' }}
                        </div>
                    </div>

                    <div class="flex shrink-0 items-center gap-3">
                        <div class="text-right text-xs text-gray-600 dark:text-gray-300">
                            <div>{{ (string) $run->status }}</div>
                            <div>{{ (string) $run->outcome }}</div>
                        </div>

                        <a
                            href="{{ \App\Support\OperationRunLinks::tenantlessView($run) }}"
                            class="text-sm font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400 dark:hover:text-primary-300"
                        >
                            View
                        </a>
                    </div>
                </li>
            @endforeach
        </ul>
    @endif
</div>