{% if show_answer %}
<div class="answer-feedback {{ 'correct' if is_correct else 'incorrect' }}">
    {% if is_correct %}
    ✓ Rätt svar!
    {% else %}
    ✗ Fel svar. Rätt svar är: {{ question.correct_answer }}
    {% endif %}
</div>
{% endif %}

<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 }}"
        onclick="selectOption('{{ option.letter }}', {{ question.id }}, {{ session.id }})">
        <span class="option-letter">{{ option.letter }}</span>
        <span>{{ option.text }}</span>
    </div>
    {% endfor %}
</div>

{% if show_answer %}
<div class="difficulty-section">
    <div class="difficulty-label">Hur svårt var detta?</div>
    <div class="difficulty-buttons">
        <button class="difficulty-btn again" onclick="submitDifficulty('again', {{ question.id }}, {{ session.id }})">
            <div>Igen</div>
            <small style="font-size: 0.75rem; font-weight: 400;">&lt;1m</small>
        </button>
        <button class="difficulty-btn hard" onclick="submitDifficulty('hard', {{ question.id }}, {{ session.id }})">
            <div>Svårt</div>
            <small style="font-size: 0.75rem; font-weight: 400;">&lt;6m</small>
        </button>
        <button class="difficulty-btn good" onclick="submitDifficulty('good', {{ question.id }}, {{ session.id }})">
            <div>Bra</div>
            <small style="font-size: 0.75rem; font-weight: 400;">&lt;10m</small>
        </button>
        <button class="difficulty-btn easy" onclick="submitDifficulty('easy', {{ question.id }}, {{ session.id }})">
            <div>Lätt</div>
            <small style="font-size: 0.75rem; font-weight: 400;">4d</small>
        </button>
    </div>
</div>
{% endif %}

<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>

<script>
    let selectedAnswer = null;

    function selectOption(letter, questionId, sessionId) {
        if ({{ 'true' if show_answer else 'false' }
    }) return; // Don't allow changing answer after submission

    selectedAnswer = letter;

    // Visual feedback
    document.querySelectorAll('.option-item').forEach(opt => {
        opt.style.borderColor = 'var(--border)';
        opt.style.background = 'white';
    });

    const selected = document.getElementById('option-' + letter);
    selected.style.borderColor = 'var(--primary)';
    selected.style.background = '#f0f4ff';

    // Submit answer
    htmx.ajax('POST', `/submit/${sessionId}/`, {
        target: '#quiz-content',
        values: {
            question_id: questionId,
            answer: letter
        }
    });
}

    function submitDifficulty(difficulty, questionId, sessionId) {
        htmx.ajax('POST', `/difficulty/${sessionId}/`, {
            values: {
                question_id: questionId,
                difficulty: difficulty
            }
        });

        // Move to next question after a brief delay
        setTimeout(() => {
            navigateQuestion('next', sessionId);
        }, 300);
    }

    function navigateQuestion(direction, sessionId) {
        htmx.ajax('GET', `/quiz/${sessionId}/${direction}/`, {
            target: '#quiz-content'
        });
    }
</script>