@extends('layouts.parent')

@section('title', $paper->title.' · '.config('brand.name'))

@section('content')
    <div class="content">
        <x-admin.page-header
            kicker="{{ $paper->trackLabel() }} · {{ $paper->subject }}"
            :title="$paper->title"
            :meta="$paper->questions->count().' questions. Answers stay hidden here so practice remains honest. '.$child?->first_name.' sits this paper from the student login.'"
        >
            <x-slot:actions>
                <a href="{{ route('parent.exam-prep.track', $paper->track) }}" class="btn mec-btn-secondary btn-md">Back to papers</a>
            </x-slot:actions>
        </x-admin.page-header>

        @if ($attempt)
            <div class="alert alert-success">{{ $child->first_name }} last scored {{ $attempt->score }}/{{ $attempt->total }} ({{ $attempt->percent() }}%).</div>
        @endif

        @foreach ($paper->questions as $question)
            <article class="card mec-panel mb-3">
                <div class="card-body">
                    <p class="mec-section-label mb-2">Question {{ $question->number }}{{ $question->topic ? ' · '.$question->topic : '' }}</p>
                    <h3 class="fs-16 mb-3">{{ $question->stem }}</h3>
                    <div class="mec-exam-options">
                        @foreach ($question->options() as $letter => $text)
                            <div class="mec-exam-option">
                                <span class="mec-exam-letter">{{ $letter }}</span>
                                <span>{{ $text }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
            </article>
        @endforeach
    </div>
@endsection