{# product_detail|printr #}
{% set defaultSelected = (product_detail.images[0].actual_color_id is defined) ? product_detail.images[0].actual_color_id : null %}
{% set colorSection = 1 %}
<div class="product-color-section">
    <div class="product-detils-title">
        {% for index,color in attr.values %}
            {% set checked = '' %}
            {% if request_quote_session.color is defined  %}
                {% for key,color_detail in request_quote_session.color %}
                    {% if(key[3:] ==  index ) %}
                        {% set checked = 'checked=checked' %}
                    {% endif %}
                {% endfor %}
            {% endif %}
            {% if checked=='checked=checked' %}
            {{ section_counter }}. Select Color <span id="js-show-selected-color"> ({{ color }}) </span>
            {% endif %}
         {% endfor %}                
    </div>

   <ul class="product-color-listing">
        <div id="product_detail_Product-color-slider" class="panel-collapse collapse in" role="tabpanel" style=""
            aria-expanded="true">
            <div class="panel-body">
                <div id="js-color-box" class="owl-carousel owl-theme wish-list-color-box js_request_quote js-color-section">
                    {% for index,color in attr.values %}
                        {% set checked = '' %}
                        {% if request_quote_session.color is defined  %}
                            {% for key,color_detail in request_quote_session.color %}
                                {% if(key[3:] ==  index ) %}
                                    {% set checked = 'checked=checked' %}
                                    {% set color_selected = 1 %}
                                {% endif %}
                            {% endfor %}
                        {% endif %}

                <li  class="color-item-slide">
                {# for ETS supplier flow #}
                    {% if product_detail.supplier.supplier_id==457 %}
                        {% set slugurl = null %}
                        {% if product_detail.mapped_color_products[index] is defined and checked=='' %}
                            {% set slugurl = path('officebrain_product_bundle_product_detail',{'productSlug':product_detail.mapped_color_products[index]})%}
                            <a href="{{slugurl}}" style="height: 35px;width: 35px;border-radius: 100%;" title="{{ color }}">
                                <div style="background-image:url('{{ ob_project_product_color_base_url~index~'.jpg' }}'); border: 1px solid #ccc;"> 
                                </div>
                            </a>
                        {% else %}
                            <div style="background-image:url('{{ ob_project_product_color_base_url~index~'.jpg' }}');">
                            <input {{ checked }} class=" js-input-color-selector js_request_quote_color_chk_{{ attr.id }}_{{ index }}" id="order_decoration_color_{{ attr.id }}_{{ index }}" type="checkbox" name="lists[request_quote_color]" value="{{ index }}" />
                            <label class="js-color-selector" title="{{ color }}" id="order_decoration_color_label_{{ attr.id }}_{{ index }}" for="order_decoration_color_{{ attr.id }}_{{ index }}"  
                            data-attribute-id="{{ attr.id }}" data-attribute-value-id="{{ index }}" 
                            data-product-id="{{ product_detail.product_id }}" data-minimumPrice="{{ product_detail.min_price }}" data-defaultqty="{{ product_detail.minimum_quantity }}"></label>
                            </div>
                        {% endif %}
                    {% else %}    
                        <div style="background-image:url('{{ ob_project_product_color_base_url~index~'.jpg' }}');">
                        <input {{ checked }} class=" js-input-color-selector js_request_quote_color_chk_{{ attr.id }}_{{ index }}" id="order_decoration_color_{{ attr.id }}_{{ index }}" type="checkbox" name="lists[request_quote_color]" value="{{ index }}" />
                        <label class="js-color-selector" title="{{ color }}" id="order_decoration_color_label_{{ attr.id }}_{{ index }}" for="order_decoration_color_{{ attr.id }}_{{ index }}"  
                        data-attribute-id="{{ attr.id }}" data-attribute-value-id="{{ index }}" 
                        data-product-id="{{ product_detail.product_id }}" data-minimumPrice="{{ product_detail.min_price }}" data-defaultqty="{{ product_detail.minimum_quantity }}"></label>
                        </div>
                        
                    {% endif %}
                    {# {% if checked=='checked=checked' %}
                        <span class="color-name" style="display:none;">{{ color }}</span>
                        {% else %}
                        <span class="color-name" style="display:none;">{{ color }}</span>
                        {% endif %} #}
            </li>
            {% endfor %}
                </div>
            </div>
        </div>
    </ul>
</div>
{% set section_counter =  section_counter + 1 %}