<!-- Quiz View with Sidebar -->
<div id="quiz-view" class="hidden">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
        <!-- Main Quiz Content -->
        <div class="md:col-span-3">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 transition-colors duration-200">
                <div class="flex justify-between items-center mb-6">
                    <div>
                        <span id="question-counter" class="text-sm text-gray-500 dark:text-gray-400">Question 1</span>
                        <span id="selected-categories-display" class="text-xs text-gray-400 dark:text-gray-500 ml-2"></span>
                    </div>
                    <a href="/" class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 font-medium">
                        ← Back to Lobby
                    </a>
                </div>
                
                <!-- Context Display (hidden if empty) -->
                <div id="context-container" class="mb-6 hidden bg-blue-50 dark:bg-blue-900/30 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
                    <p id="question-context" class="text-base text-blue-800 dark:text-blue-300 font-medium whitespace-pre-wrap"></p>
                </div>
                
                <!-- Question Container -->
                <div id="question-container" class="mb-6">
                    <p id="question-text" class="text-xl text-gray-800 dark:text-gray-100 mb-4"></p>
                    <input type="text" id="answer-input" 
                           class="w-full px-4 py-3 border dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400"
                           placeholder="Your answer...">
                </div>
                
                <button id="submit-btn" 
                        class="w-full bg-green-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-green-700 transition duration-200">
                    Submit Answer (Enter)
                </button>

                <!-- Result Container (initially hidden) -->
                <div id="result-container" class="mt-6 hidden">
                    <!-- Result content will be inserted here -->
                </div>
            </div>
        </div>

        {% include "components/sidebar.html" %}
    </div>
</div>
