@php
    /** @var list<array<string, mixed>> $inProgressSessions */
    $inProgressSessions = $inProgressSessions ?? [];
@endphp

<x-page.card>
    <h2 class="text-base font-semibold text-gray-900">Começou e não finalizou</h2>
    <p class="mt-1 text-xs text-gray-500">
        Participantes com questionário em andamento.
    </p>
    <div class="mt-4 overflow-x-auto">
        <x-table.table>
            <thead class="border-b bg-gray-50">
                <tr>
                    <x-table.th>Participante</x-table.th>
                    <x-table.th>Bateria</x-table.th>
                    <x-table.th>Time</x-table.th>
                    <x-table.th>Área</x-table.th>
                    <x-table.th class="text-right">Progresso</x-table.th>
                    <x-table.th>Última atividade</x-table.th>
                </tr>
            </thead>
            <tbody class="divide-y">
                @forelse($inProgressSessions as $row)
                    @php
                        $started = \Illuminate\Support\Carbon::parse($row['last_activity_at']);
                    @endphp
                    <tr class="hover:bg-gray-50">
                        <x-table.td>
                            <p class="font-medium text-gray-900">{{ $row['user_name'] }}</p>
                            <p class="text-xs text-gray-500">{{ $row['user_email'] }}</p>
                        </x-table.td>
                        <x-table.td class="text-gray-800">{{ $row['battery_title'] }}</x-table.td>
                        <x-table.td class="text-gray-600">{{ $row['team_name'] ?? '—' }}</x-table.td>
                        <x-table.td class="text-gray-600">{{ $row['sector_name'] ?? '—' }}</x-table.td>
                        <x-table.td class="text-right tabular-nums text-gray-900">
                            {{ $row['answers_given'] }}/{{ $row['total_questions'] }}
                        </x-table.td>
                        <x-table.td class="text-sm text-gray-600">
                            {{ $started->format('d/m/Y H:i') }}
                        </x-table.td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="6" class="px-4 py-8 text-center text-sm text-gray-500">
                            Nenhum participante com questionário em andamento para os filtros selecionados.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </x-table.table>
    </div>
</x-page.card>