<!-- Initial Setup View -->
<div id="setup-view" 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">
        <h1 class="text-3xl font-bold text-gray-800 dark:text-gray-100">{{ title }}</h1>
        <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>
    
    <div class="mb-6">
        <h2 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Select Categories:</h2>
        <div class="space-y-2" id="categories-container">
            {% for value in categories %}
            <label class="flex items-center space-x-3 p-3 border dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer transition">
                <input type="checkbox" name="categories" value="{{ value }}" 
                       class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500 category-checkbox dark:bg-gray-700 dark:border-gray-600">
                <span class="text-gray-700 dark:text-gray-300">{{ value }}</span>
            </label>
            {% endfor %}
        </div>
    </div>
    
    <button id="start-btn" 
            class="w-full bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-blue-700 transition duration-200">
        Start
    </button>
</div>
