@php
    use App\Support\SmsDirection;
@endphp

@if($smsThread->isEmpty())
    <p class="text-sm text-slate-500">{{ __('devices.sms.thread_empty') }}</p>
@else
    <p class="text-xs text-slate-500 mb-3">
        {{ __('devices.sms.thread_summary', ['sent' => $smsStats['sent'], 'received' => $smsStats['received']]) }}
    </p>
    <ul class="space-y-3 max-h-[32rem] overflow-y-auto pr-1">
        @foreach($smsThread as $sms)
            @php $isSent = SmsDirection::isSent($sms); @endphp
            <li class="flex {{ $isSent ? 'justify-end' : 'justify-start' }}">
                <div class="max-w-[85%] rounded-lg px-3 py-2 border {{ $isSent ? 'bg-blue-50 border-blue-200' : 'bg-emerald-50 border-emerald-200' }}">
                    <div class="flex flex-wrap items-center gap-2 mb-1">
                        <x-sms-direction-badge :sms="$sms" />
                        <time class="text-[10px] text-slate-500"
                              datetime="{{ $sms->received_at?->toIso8601String() }}"
                              title="{{ $sms->received_at?->format('d/m/Y H:i:s') }}">
                            {{ $sms->received_at?->format('d/m/Y H:i') }}
                        </time>
                    </div>
                    <p class="text-sm text-slate-800 whitespace-pre-wrap break-words">{{ $sms->body }}</p>
                </div>
            </li>
        @endforeach
    </ul>
@endif