{% csrf_token %}
<input type="hidden" id="current-question-id" value="{{ question.id }}">

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

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

<div class="nav-buttons">
    <button class="nav-btn" {% if not has_previous %}disabled{% endif %}
        onclick="navigateQuestion('previous', {{ session.id }})">
        ← Föregående
    </button>
    <button class="nav-btn" {% if not has_next %}disabled{% endif %}
        onclick="navigateQuestion('next', {{ session.id }})">
        Nästa →
    </button>
</div>