{{-- Observations Timeline / Feed --}}
<div class="max-h-[32rem] overflow-y-auto space-y-6 pr-2 custom-scrollbar dark:bg-gray-800"
    style="scrollbar-width: thin;">
    @forelse($observations as $observation)
        {{-- Observation Card with dynamic border color based on status --}}
        <div
            class="relative pl-5 border-l-2 {{ $observation->status === \App\Enums\SaleTicketObservationEnum::PENDING ? 'border-orange-400' : 'border-main-two' }} transition-all hover:border-l-4 mb-3">

            <div
                class="bg-white-200 dark:bg-slate-900/40 p-5 rounded-r-2xl border border-gray-200 dark:border-gray-700 shadow-sm transition-colors duration-300">

                {{-- Top Actions & Stage Badge --}}
                <div class="flex justify-between items-start mb-4">
                    <div class="flex items-center gap-2">
                        <span
                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider shadow-sm {{ $observation->stage->color() }}">
                            {{ $observation->stage->label() }}
                        </span>

                        <span
                            class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider shadow-sm {{ $observation->status->color() }}">
                            {{ $observation->status->label() }}
                        </span>
                    </div>

                    {{-- Dropdown Menu --}}
                    @if (
                        $observation->status === \App\Enums\SaleTicketObservationEnum::PENDING &&
                            auth()->user()->can('finalize_sales_ticket_comment'))
                        <x-dropdown>
                            <div x-data class="dark:bg-gray-800">
                                <form x-ref="updateStatusForm{{ $observation->id }}"
                                    action="{{ route('sale-tickets.observations.mark-as-corrected', $observation->id) }}"
                                    method="POST">
                                    @csrf
                                    @method('PATCH')
                                </form>

                                <x-confirm-button type="warning" title="Mark as answered?"
                                    description="This will notify the team that the observation has been addressed."
                                    acceptLabel="Confirm" acceptColor="green"
                                    form-ref="updateStatusForm{{ $observation->id }}"
                                    class="block w-full px-4 py-2 text-sm text-left text-gray-700 dark:text-gray-200 hover:bg-main-two hover:text-white transition-colors">
                                    <i class="fas fa-check-circle mr-2"></i> {{ __('Mark as answered') }}
                                </x-confirm-button>
                            </div>
                        </x-dropdown>
                    @endif
                </div>

                {{-- Observation Message --}}
                <div class="text-gray-700 dark:text-gray-200 leading-relaxed mb-5 text-sm">
                    {{ $observation->message }}
                </div>

                {{-- Footer Metadata --}}
                <div
                    class="flex flex-wrap justify-between items-center pt-4 border-t border-gray-100 dark:border-gray-700/50">
                    <div class="flex items-center space-x-2">
                        <div
                            class="w-8 h-8 rounded-xl bg-main-two/10 dark:bg-main-one/10 flex items-center justify-center border border-main-two/20 dark:border-main-one/20">
                            <i class="fas fa-user text-xs text-main-two dark:text-main-one"></i>
                        </div>
                        <span class="text-xs font-black uppercase tracking-tight text-main-two dark:text-main-one">
                            {{ $observation->user->name }}
                        </span>
                    </div>

                    <div
                        class="text-[10px] text-gray-400 dark:text-gray-500 flex flex-col text-right uppercase font-bold tracking-tighter">
                        <span>Created {{ $observation->created_at->diffForHumans() }}</span>
                        @if ($observation->responded_at)
                            <span class="text-main-two dark:text-main-one font-black mt-0.5">Answered
                                {{ $observation->responded_at->diffForHumans() }}</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    @empty
        {{-- Empty State --}}
        <div
            class="flex flex-col items-center py-12 text-center bg-white/50 dark:bg-slate-900/30 rounded-2xl border-2 border-dashed border-gray-100 dark:border-gray-800">
            <div class="w-12 h-12 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
                <i class="fas fa-clipboard-list text-xl text-gray-300 dark:text-gray-600"></i>
            </div>
            <p class="text-gray-500 dark:text-gray-400 text-sm font-bold uppercase tracking-widest">
                {{ __('No observations found') }}</p>
        </div>
    @endforelse
</div>