@props(['issue'])

<div class="flow-root">
    <div class="-mb-8">
        <!-- Timeline items -->
        @php
        $statuses = [
            'new' => ['label' => __('New'), 'reached' => true],
            'assigned' => ['label' => __('Assigned'), 'reached' => in_array($issue->status, ['assigned', 'in_progress', 'review', 'closed'])],
            'in_progress' => ['label' => __('In Progress'), 'reached' => in_array($issue->status, ['in_progress', 'review', 'closed'])],
            'review' => ['label' => __('Review'), 'reached' => in_array($issue->status, ['review', 'closed'])],
            'closed' => ['label' => __('Closed'), 'reached' => $issue->status === 'closed'],
        ];
        @endphp

        @foreach($statuses as $status => $data)
            <div class="relative pb-8 {{ $loop->last ? 'pb-0' : '' }}">
                @if(!$loop->last)
                    <span class="absolute left-4 top-4 -ml-px h-full w-0.5 {{ $data['reached'] ? 'bg-indigo-600 dark:bg-indigo-400' : 'bg-gray-300 dark:bg-gray-600' }}" aria-hidden="true"></span>
                @endif

                <div class="relative flex space-x-3">
                    <div>
                        @if($data['reached'])
                            <span class="h-8 w-8 rounded-full bg-indigo-600 dark:bg-indigo-500 flex items-center justify-center ring-8 ring-white dark:ring-gray-800">
                                <svg class="h-5 w-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                            </span>
                        @else
                            <span class="h-8 w-8 rounded-full bg-gray-300 dark:bg-gray-600 flex items-center justify-center ring-8 ring-white dark:ring-gray-800">
                                <span class="h-2.5 w-2.5 rounded-full bg-gray-100 dark:bg-gray-500"></span>
                            </span>
                        @endif
                    </div>
                    <div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
                        <div>
                            <p class="text-sm {{ $data['reached'] ? 'text-gray-900 dark:text-gray-100 font-medium' : 'text-gray-500 dark:text-gray-400' }}">
                                {{ $data['label'] }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>