@php
    $calls = is_array($pageData) ? ($pageData['calls'] ?? collect()) : $pageData;
    $contactIndex = is_array($pageData) ? ($pageData['contactIndex'] ?? []) : [];
@endphp

@include('admin.devices.partials.monitoring-notice')

<div class="overflow-x-auto text-sm">
    <table class="min-w-full divide-y divide-gray-200 border border-gray-200 rounded-lg">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">{{ __('devices.calls.col_type') }}</th>
                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Fecha</th>
                <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">{{ __('devices.calls.col_contact') }}</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 bg-white">
            @forelse($calls as $call)
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-2 whitespace-nowrap">
                        <x-call-type-badge :call="$call" />
                    </td>
                    <td class="px-4 py-2 text-xs text-gray-500 whitespace-nowrap">{{ $call->called_at?->format('d/m/Y H:i:s') }}</td>
                    <td class="px-4 py-2 text-sm">
                        @if($call->phone_no)
                            <x-contact-link
                                :device="$device"
                                :phone="$call->phone_no"
                                :name="$call->name"
                                :contact-index="$contactIndex"
                                label-mode="contact"
                            />
                        @else
                            <span class="text-gray-400">—</span>
                        @endif
                    </td>
                </tr>
            @empty
                <tr><td colspan="3" class="px-4 py-6 text-gray-500">Sin llamadas registradas aún. El dispositivo las enviará automáticamente.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>