{{-- Activity timeline (Vuexy / Bootstrap) --}}
<div>
    @forelse ($activities as $activity)
        <div class="d-flex mb-3">
            <div class="d-flex flex-column align-items-center me-3">
                <span class="badge bg-label-primary rounded-circle p-2 lh-1">
                    <i class="ti tabler-point-filled"></i>
                </span>
                @if (!$loop->last)
                    <span class="flex-grow-1 my-1" style="width: 2px; background: var(--bs-border-color);"></span>
                @endif
            </div>
            <div class="pb-3 w-100">
                <p class="mb-1 fw-medium">{{ $activity->description }}</p>
                @if ($activity->getChangesForDisplay())
                    <div class="bg-label-secondary rounded p-2 small mb-2">
                        {!! $activity->getChangesForDisplay() !!}
                    </div>
                @endif
                <div class="d-flex flex-wrap align-items-center gap-2 text-muted small">
                    <span><i class="ti tabler-user me-1"></i>{{ $activity->getCauserName() }}</span>
                    <span>&middot;</span>
                    <span><i class="ti tabler-clock me-1"></i>{{ $activity->created_at->format('d/m/Y H:i') }}</span>
                </div>
            </div>
        </div>
    @empty
        <div class="text-center text-muted py-5">
            <i class="ti tabler-history ti-lg mb-2 d-block"></i>
            <p class="mb-0 small">{{ __('No activity recorded yet.') }}</p>
        </div>
    @endforelse
</div>