{% macro colors_tab(primary_color, secondary_color, csrf_token) %}
<form id="colorSettingsForm" method="POST" action="{{ url_for('main.update_colors') }}">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    
    <!-- Primary Color Section -->
    <div class="mb-5">
        <h6 class="mb-3">Primary Color</h6>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body">
                        <label class="form-label">Main Color</label>
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <input type="color" 
                                   class="form-control form-control-color d-none" 
                                   id="primaryColor" 
                                   name="primary_color"
                                   value="{{ primary_color }}"
                                   data-original-value="{{ primary_color }}">
                            <button type="button" 
                                    class="btn btn-outline-secondary" 
                                    onclick="document.getElementById('primaryColor').click()">
                                <i class="fas fa-palette me-1"></i> Choose Color
                            </button>
                        </div>
                        <small class="text-muted">Used for primary buttons, links, and accents</small>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card h-100">
                    <div class="card-body">
                        <label class="form-label">Derived Colors</label>
                        <div class="d-flex gap-3" id="primaryDerivedColors">
                            <div class="text-center">
                                <div class="color-preview p-3 rounded shadow-sm mb-2" 
                                     data-color-type="base"
                                     style="background-color: var(--primary-color); width: 80px; height: 80px;">
                                </div>
                                <small class="d-block text-muted">Base</small>
                            </div>
                            <div class="text-center">
                                <div class="color-preview p-3 rounded shadow-sm mb-2" 
                                     data-color-type="light"
                                     style="background-color: var(--primary-light); width: 80px; height: 80px;">
                                </div>
                                <small class="d-block text-muted">Light</small>
                            </div>
                            <div class="text-center">
                                <div class="color-preview p-3 rounded shadow-sm mb-2" 
                                     data-color-type="bg-light"
                                     style="background-color: var(--primary-bg-light); width: 80px; height: 80px;">
                                </div>
                                <small class="d-block text-muted">Background</small>
                            </div>
                            <div class="text-center">
                                <div class="color-preview p-3 rounded shadow-sm mb-2" 
                                     data-color-type="opacity"
                                     style="background-color: var(--primary-opacity-15); width: 80px; height: 80px;">
                                </div>
                                <small class="d-block text-muted">Opacity 15%</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Secondary Color Section -->
    <div class="mb-5">
        <h6 class="mb-3">Secondary Color</h6>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="card h-100">
                    <div class="card-body">
                        <label class="form-label">Main Color</label>
                        <div class="d-flex align-items-center gap-3 mb-3">
                            <input type="color" 
                                   class="form-control form-control-color d-none" 
                                   id="secondaryColor" 
                                   name="secondary_color"
                                   value="{{ secondary_color }}"
                                   data-original-value="{{ secondary_color }}">
                            <button type="button" 
                                    class="btn btn-outline-secondary" 
                                    onclick="document.getElementById('secondaryColor').click()">
                                <i class="fas fa-palette me-1"></i> Choose Color
                            </button>
                        </div>
                        <small class="text-muted">Used for secondary elements and highlights</small>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="card h-100">
                    <div class="card-body">
                        <label class="form-label">Derived Colors</label>
                        <div class="d-flex gap-3" id="secondaryDerivedColors">
                            <div class="text-center">
                                <div class="color-preview p-3 rounded shadow-sm mb-2" 
                                     data-color-type="base"
                                     style="background-color: var(--secondary-color); width: 80px; height: 80px;">
                                </div>
                                <small class="d-block text-muted">Base</small>
                            </div>
                            <div class="text-center">
                                <div class="color-preview p-3 rounded shadow-sm mb-2" 
                                     data-color-type="light"
                                     style="background-color: var(--secondary-light); width: 80px; height: 80px;">
                                </div>
                                <small class="d-block text-muted">Light</small>
                            </div>
                            <div class="text-center">
                                <div class="color-preview p-3 rounded shadow-sm mb-2" 
                                     data-color-type="opacity"
                                     style="background-color: var(--secondary-opacity-15); width: 80px; height: 80px;">
                                </div>
                                <small class="d-block text-muted">Opacity 15%</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-end gap-2">
        <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#resetColorsModal">
            <i class="fas fa-undo me-1"></i> Reset to Defaults
        </button>
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-save me-1"></i> Save Colors
        </button>
    </div>
</form>
{% endmacro %}