<!-- Sidebar with Categories -->
<div class="md:col-span-1">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 sticky top-4 transition-colors duration-200">
        <h3 class="font-semibold text-gray-700 dark:text-gray-300 mb-3">Categories</h3>
        <div class="space-y-2" id="sidebar-categories">
            {% for value in categories %}
            <label class="flex items-center space-x-2 cursor-pointer">
                <input type="checkbox" name="sidebar-categories" value="{{ value }}" 
                       class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 sidebar-category-checkbox dark:bg-gray-700 dark:border-gray-600">
                <span class="text-sm text-gray-600 dark:text-gray-400">{{ value }}</span>
            </label>
            {% endfor %}
        </div>
        <button id="update-categories-btn" 
                class="w-full mt-4 bg-gray-600 text-white text-sm font-semibold py-2 px-4 rounded hover:bg-gray-700 transition duration-200">
            Update
        </button>
    </div>
</div>
