<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-exam-options">
        @foreach ($question['options'] as $option)
            <label class="jel-exam-option">
                <input
                    type="radio"
                    name="useroption[{{ $question['submission_key'] }}]"
                    value="{{ $option['key'] }}"
                    @checked(old('useroption.'.$question['submission_key']) === $option['key'])
                >
                <span class="jel-exam-option-body">
                    <span class="jel-exam-option-key">{{ $option['key'] }}</span>
                    <span class="jel-exam-option-copy">
                        <strong>{{ $option['english'] }}</strong>
                        @if ($option['hindi'])
                            <small>{{ $option['hindi'] }}</small>
                        @endif
                    </span>
                </span>
            </label>
        @endforeach
    </div>
</article>
