@push('styles')
    @vite('resources/css/portal-questionnaire-hub.css')
@endpush

<x-app-layout>
    <x-page.header title="Visualização assistida — {{ $user->name }}">
        <x-slot name="action">
            <x-ui.button
                href="{{ route('users.edit', $user) }}"
                class="!bg-white !text-gray-800 border border-gray-300 hover:!bg-gray-50"
            >
                Voltar à edição
            </x-ui.button>
        </x-slot>
    </x-page.header>

    <div class="mb-6 rounded-lg border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-950">
        <strong>Modo assistido.</strong> Esta é a visão do portal para <strong>{{ $user->name }}</strong>.
        Não é possível iniciar ou responder ao questionário a partir desta tela.
    </div>

    <x-page.card>
        <div class="mx-auto max-w-lg rounded-2xl border border-gray-200 bg-white p-4 shadow-sm">
            <h2 class="portal-section-title mb-4 text-center text-xl text-gray-900">Bateria de Perguntas</h2>
            @include('portal.questionnaire._hub-content', [
                'battery' => $battery,
                'reasonUnavailable' => $reasonUnavailable,
                'participantSession' => $participantSession,
                'assistedPreview' => true,
            ])
        </div>
    </x-page.card>

    @if($diagnostic->scopeRows !== [])
        <div class="mt-6">
        <x-page.card>
            <h3 class="text-sm font-semibold text-gray-800 mb-3">Resumo técnico</h3>
            <ul class="list-disc space-y-1 pl-5 text-sm text-gray-700">
                @foreach($diagnostic->scopeRows as $row)
                    <li>
                        {{ $row->sectorName }} + {{ $row->trainingGroupName }}:
                        @if($row->isVisible())
                            vê <strong>{{ $row->publishedBattery?->title }}</strong>
                        @else
                            {{ $row->blockReasonLabel() }}
                        @endif
                    </li>
                @endforeach
            </ul>
        </x-page.card>
        </div>
    @endif
</x-app-layout>