@php
    $statusBadgeClass = match ($question['status']) {
        'correct' => 'jel-status-success',
        'wrong' => 'jel-status-danger',
        default => 'jel-status-secondary',
    };
    $statusLabel = match ($question['status']) {
        'correct' => 'Correct',
        'wrong' => 'Wrong',
        default => 'Not Answered',
    };
@endphp

<article
    class="jel-exam-question-card @if ($questionIndex === 0) is-active @endif"
    data-question-card
    data-question-index="{{ $questionIndex }}"
    data-palette-index="{{ $question['palette_index'] }}"
>
    <header class="jel-exam-question-head">
        <div>
            <span class="jel-portal-kicker">Question {{ $question['global_number'] }}</span>
            <h2>{{ $question['prompt'] }}</h2>
        </div>
        <span class="jel-history-count">{{ $question['global_number'] }} / {{ $totalQuestions }}</span>
    </header>

    @if ($question['prompt_hindi'])
        <p class="jel-exam-question-translation">{{ $question['prompt_hindi'] }}</p>
    @endif

    <div class="jel-review-options">
        @foreach ($question['options'] as $option)
            <div
                class="
                    jel-review-option
                    @if ($option['key'] === $question['user_answer']) is-user-answer @endif
                    @if ($option['key'] === $question['correct_answer']) is-correct-answer @endif
                    @if ($option['key'] === $question['user_answer'] && $question['user_answer'] !== $question['correct_answer']) is-user-wrong @endif
                "
            >
                <span class="jel-exam-option-key">{{ $option['key'] }}</span>
                <div class="jel-exam-option-copy">
                    <strong>{{ $option['english'] }}</strong>
                    @if ($option['hindi'])
                        <small>{{ $option['hindi'] }}</small>
                    @endif
                </div>
            </div>
        @endforeach
    </div>

    <div class="jel-review-meta">
        <span class="jel-status-badge {{ $statusBadgeClass }}">{{ $statusLabel }}</span>
        <span class="jel-review-answer-user">Your Answer: {{ $question['user_answer'] ?: 'Not Answered' }}</span>
        <span class="jel-review-answer-correct">Correct Answer: {{ $question['correct_answer'] ?: '-' }}</span>
    </div>
</article>
