@props([
    'events' => [],
])

<div class="flow-root">
    <ul role="list" class="-mb-8">
        @foreach($events as $index => $event)
            <li>
                <div class="relative pb-8">
                    @if(!$loop->last)
                        <span class="absolute top-4 ltr:left-4 rtl:right-4 -ml-px h-full w-0.5 {{ ($event['completed'] ?? false) ? 'bg-liv-500' : 'bg-slate-200' }}" aria-hidden="true"></span>
                    @endif
                    <div class="relative flex items-start space-x-3 rtl:space-x-reverse">
                        <div>
                            <span class="h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white {{ ($event['completed'] ?? false) ? 'bg-liv-500 text-white' : (($event['active'] ?? false) ? 'bg-amber-500 text-white ring-amber-100 animate-pulse' : 'bg-slate-100 text-slate-400') }}">
                                @if($event['completed'] ?? false)
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                                @else
                                    <span class="text-xs font-bold">{{ $index + 1 }}</span>
                                @endif
                            </span>
                        </div>
                        <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4 rtl:space-x-reverse">
                            <div>
                                <p class="text-sm font-semibold {{ ($event['active'] ?? false) ? 'text-amber-700 font-bold' : 'text-slate-900' }}">{{ $event['title'] }}</p>
                                @if(!empty($event['description']))
                                    <p class="text-xs text-slate-500 mt-0.5">{{ $event['description'] }}</p>
                                @endif
                            </div>
                            <div class="text-right rtl:text-left text-xs whitespace-nowrap text-slate-400">
                                <time>{{ $event['time'] ?? '' }}</time>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        @endforeach
    </ul>
</div>