{{-- Observations feed (Vuexy / Bootstrap) --}}
<div class="overflow-y-auto pe-1" style="max-height: 28rem;">
    @forelse ($observations as $observation)
        @php
            $isPending = $observation->status === \App\Enums\SaleTicketObservationEnum::PENDING;
        @endphp
        <div class="card border shadow-none mb-3 border-start border-3 {{ $isPending ? 'border-warning' : 'border-primary' }}">
            <div class="card-body">
                {{-- Top: badges + actions --}}
                <div class="d-flex justify-content-between align-items-start mb-3">
                    <div class="d-flex flex-wrap gap-1">
                        {{-- El stage es interno: solo staff lo ve. En vistas de cliente se pasa showStage=false. --}}
                        @if ($showStage ?? true)
                            <span class="badge {{ $observation->stage->color() }}">{{ $observation->stage->label() }}</span>
                        @endif
                        <span class="badge {{ $observation->status->color() }}">{{ $observation->status->label() }}</span>
                    </div>

                    @if ($isPending && auth()->user()->can('finalize_sales_ticket_comment'))
                        <form action="{{ route('sale-tickets.observations.mark-as-corrected', $observation->id) }}"
                            method="POST" id="obsForm{{ $observation->id }}">
                            @csrf
                            @method('PATCH')
                        </form>
                        <button type="button" class="btn btn-sm btn-label-success"
                            onclick="event.preventDefault(); const f = document.getElementById('obsForm{{ $observation->id }}'); Swal.fire({ title: '{{ __('Mark as answered?') }}', text: '{{ __('This will notify the team that the observation has been addressed.') }}', icon: 'question', showCancelButton: true, confirmButtonText: '{{ __('Confirm') }}', cancelButtonText: '{{ __('Cancel') }}', reverseButtons: true, customClass: { confirmButton: 'btn btn-primary', cancelButton: 'btn btn-label-secondary' }, buttonsStyling: false }).then((r) => { if (r.isConfirmed) f.submit(); });">
                            <i class="ti tabler-check me-1"></i>{{ __('Mark as answered') }}
                        </button>
                    @endif
                </div>

                {{-- Message --}}
                <p class="mb-3">{{ $observation->message }}</p>

                {{-- Footer metadata --}}
                <div class="d-flex flex-wrap justify-content-between align-items-center pt-3 border-top text-muted small gap-2">
                    <span><i class="ti tabler-user me-1"></i>{{ $observation->user->name }}</span>
                    <span class="text-end">
                        <span class="d-block">{{ __('Created') }} {{ $observation->created_at->diffForHumans() }}</span>
                        @if ($observation->responded_at)
                            <span class="d-block text-primary fw-medium">{{ __('Answered') }} {{ $observation->responded_at->diffForHumans() }}</span>
                        @endif
                    </span>
                </div>
            </div>
        </div>
    @empty
        <div class="text-center text-muted py-5">
            <i class="ti tabler-clipboard-off ti-lg mb-2 d-block"></i>
            <p class="fw-bold mb-0 small text-uppercase">{{ __('No observations found') }}</p>
        </div>
    @endforelse
</div>