@if ($activities->isEmpty())
    <p class="text-muted text-center mb-0 py-3">لا توجد أنشطة مسجّلة</p>
@else
    <ul class="timeline">
        @foreach ($activities as $activity)
            @php
                $color = match ($activity->status) {
                    'completed' => 'success',
                    'cancelled' => 'secondary',
                    default => $activity->scheduled_at?->isPast() ? 'danger' : 'primary',
                };
            @endphp
            <li class="timeline-item">
                <span class="timeline-dot bg-{{ $color }}">
                    <i class="fa-solid {{ \App\Models\Activity::TYPE_ICONS[$activity->type] ?? 'fa-bell' }}"></i>
                </span>
                <div class="d-flex justify-content-between align-items-start gap-2 flex-wrap">
                    <div class="flex-grow-1">
                        <div class="timeline-title">{{ $activity->title }}</div>
                        @if ($activity->description)
                            <div class="small text-muted" style="white-space: pre-line">{{ $activity->description }}</div>
                        @endif
                        @if ($activity->outcome)
                            <div class="small text-success mt-1"><i class="fa-solid fa-comment-dots"></i> {{ $activity->outcome }}</div>
                        @endif
                        <div class="timeline-meta mt-1">
                            {!! badge($activity->type_label, 'info') !!}
                            {!! badge($activity->status_label, $color) !!}
                            <span class="ms-2"><i class="fa-regular fa-clock"></i> {{ arabicDate($activity->scheduled_at, true) }}</span>
                            <span class="ms-2"><i class="fa-regular fa-user"></i> {{ $activity->user?->name ?? '—' }}</span>
                        </div>
                    </div>
                    @if ($activity->status === 'pending')
                        @can('activities.edit')
                            <button class="btn btn-sm btn-outline-success"
                                    onclick="confirmAction('{{ route('activities.complete', $activity) }}', 'إنهاء النشاط', 'سيتم تعليم النشاط كمكتمل.', '#198754')">
                                <i class="fa-solid fa-check"></i>
                            </button>
                        @endcan
                    @endif
                </div>
            </li>
        @endforeach
    </ul>
@endif