{{-- Audit trail of workflow actions. --}}
<section class="slmc-card p-6">
    <h3 class="mb-4 flex items-center gap-2 text-lg font-bold text-slmc"><i class="ri-history-line text-slmc-600"></i> Activity</h3>
    @forelse($evaluation->actions as $a)
        <div class="relative flex gap-3 pb-5 last:pb-0">
            @unless($loop->last)<span class="absolute top-9 bottom-0 left-[15px] w-px bg-slmc-line"></span>@endunless
            <span @class([
                'relative flex size-8 shrink-0 items-center justify-center rounded-full text-sm',
                'bg-emerald-100 text-emerald-700' => $a->action === 'approve',
                'bg-orange-100 text-orange-700' => $a->action === 'return',
                'bg-blue-100 text-blue-700' => $a->action === 'submit',
                'bg-slate-100 text-slate-500' => $a->action === 'save',
            ])>
                <i class="{{ ['approve' => 'ri-check-double-line', 'return' => 'ri-arrow-go-back-line', 'submit' => 'ri-send-plane-line', 'save' => 'ri-save-line'][$a->action] ?? 'ri-record-circle-line' }}"></i>
            </span>
            <div class="min-w-0 text-sm">
                <p class="font-semibold text-slmc">{{ $a->label() }}</p>
                <p class="text-xs text-gray-500">{{ $a->actor_name }} · {{ ucfirst($a->actor_role) }} · {{ $a->created_at->format('j M Y, g:i a') }}</p>
                @if($a->remarks)<p class="mt-1 rounded-lg bg-orange-50 px-3 py-2 text-xs whitespace-pre-line text-orange-800">{{ $a->remarks }}</p>@endif
            </div>
        </div>
    @empty
        <p class="text-sm text-gray-500">No activity yet.</p>
    @endforelse
</section>