{%- raw %}
<div id="tailwindColorsSection" class="hidden">
    <h3 class="text-lg font-semibold mb-2 mt-4">Suggested Tailwind Colors</h3>
    <div class="grid grid-cols-2 gap-4">
        {% if rebuild_context.design.colors.get('suggested_tailwind') %}
            {% for key, value in rebuild_context.design.colors.suggested_tailwind.items() %}
            <div class="flex items-center">
                <span class="mr-2 font-medium">{{ key }}</span>
                <span class="text-gray-600">{{ value }}</span> 
            </div>
            {% endfor %}
        {% else %}
            <div class="flex items-center">
                <span class="text-gray-600">No Tailwind color suggestions available</span>
            </div>
        {% endif %}
    </div>
</div>
{% endraw %}

const loadColorScheme = (data) => {
    // Initialize containers
    const colorsContainer = document.getElementById('extractedColorsContainer');
    colorsContainer.innerHTML = '';
    
    // Add extracted colors
    for (const category of ['background', 'text', 'accent']) {
        if (data.design.colors[category] && data.design.colors[category].length > 0) {
            const categoryWrapper = document.createElement('div');
            categoryWrapper.className = 'mb-4';
            categoryWrapper.innerHTML = `<h4 class="text-sm font-semibold mb-2">${category.charAt(0).toUpperCase() + category.slice(1)}</h4>`;
            
            const colorsGrid = document.createElement('div');
            colorsGrid.className = 'grid grid-cols-4 gap-2';
            
            data.design.colors[category].forEach(color => {
                colorsGrid.innerHTML += `
                    <div class="color-item">
                        <div class="w-full h-8 rounded" style="background-color: ${color}"></div>
                        <div class="text-xs text-center mt-1">${color}</div>
                    </div>
                `;
            });
            
            categoryWrapper.appendChild(colorsGrid);
            colorsContainer.appendChild(categoryWrapper);
        }
    }
    
    // Add Tailwind suggested colors if available
    if (data.design.colors.suggested_tailwind) {
        const tailwindSection = document.getElementById('tailwindColorsSection');
        tailwindSection.classList.remove('hidden');
        
        Object.entries(data.design.colors.suggested_tailwind).forEach(([key, value]) => {
            // Add tailwind suggestions UI if needed
        });
    } else {
        // Hide the Tailwind suggestions section if not available
        const tailwindSection = document.getElementById('tailwindColorsSection');
        if (tailwindSection) {
            tailwindSection.classList.add('hidden');
        }
    }
}