{% if question.question_type == 'matching' %}
{% include 'partials/matching_question.html' %}
{% else %}
{# Regular MCQ/SCQ template #}
{% csrf_token %}
<input type="hidden" id="current-question-id" value="{{ question.id }}">
<input type="hidden" id="current-question-number" value="{{ current_number }}">

<div class="question-text">{{ question.text }}</div>

<div class="options-container">
    {% for option in question.options.all %}
    <div class="option-item" id="option-{{ option.letter }}" data-letter="{{ option.letter }}" style="cursor: pointer;">
        <input type="checkbox" id="checkbox-{{ option.letter }}" value="{{ option.letter }}"
            data-letter="{{ option.letter }}"
            style="margin-right: 0.5rem; width: 1.2rem; height: 1.2rem; cursor: pointer; pointer-events: auto;">
        <span class="option-letter" style="pointer-events: none;">{{ option.letter }}</span>
        <span style="pointer-events: none;">{{ option.text }}</span>
    </div>
    {% endfor %}
</div>

<script>
    (function () {
        const container = document.querySelector('.options-container');

        // Handle option item clicks (clicking anywhere on the div except checkbox)
        container?.addEventListener('click', (e) => {
            // If click was directly on checkbox, let it handle itself
            if (e.target.type === 'checkbox') return;

            const optionItem = e.target.closest('.option-item');
            if (!optionItem) return;

            const letter = optionItem.dataset.letter;
            if (letter) toggleOption(letter);
        });

        // Handle checkbox changes (direct checkbox clicks or programmatic changes)
        container?.addEventListener('change', (e) => {
            if (e.target.type === 'checkbox') {
                const { letter }  = e.target.dataset;
                if (letter) updateSelection(letter);
            }
        });
    })();
</script>
{% endif %}