{% extends '::baseAjax.html.twig' %}
{% block ajax_body %}
{% if color_no>0 %}
 		{# <div class="row choose-variation js_select_color_boxes">
 			{% if ob_project_transaction_configuration_rule.shopping_cart.product_detail_popup.option.standard_color.status == 1 %}
	         <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
	         	{% if standard_imprint_color|length > 0 %}
		            <div class="print-title js_color_title" data-type="standard">
		                {{ 'request_quote.print_position.imprint_color.standard'|trans }}
		            </div>
	            {% endif %}
	         </div>
	        {% endif %}
	          
	        {% if ob_project_transaction_configuration_rule.shopping_cart.product_detail_popup.option.pms_color.status == 1 and pms_color is defined %}
	         <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
	            <div class="print-title js_color_title" data-type="pms">
	         	    {{ 'request_quote.print_position.imprint_color.pantone'|trans }}
	            </div>
	         </div>
	        {% endif %} 
	     </div>    #}
	    {# {% for i in range(1, color_no) %} #}
	    {% set i = color_no %}
	        <div class="relative-col">
	        	<input type="hidden" id="js_selected_color_id_{{ product_id }}_{{ imprint_id }}_{{ i }}" value="0" data-type="" class="js_seleted_color_input_type">
	            <div class="row color-selection-block">
	            	{% if ob_project_transaction_configuration_rule.shopping_cart.product_detail_popup.option.standard_color.status == 1 %}         
		            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
						{% if standard_imprint_color|length > 0 %}
			                <div class="selection-color-box">
			                    	<i class="select-color-icon"></i>
				                    <div class="dropdown dropdown_size color-select-box">
				                        <button aria-expanded="true" data-toggle="dropdown" id="js_dropdownMenu_standard{{ product_id }}_{{ imprint_id }}_{{ i }}" type="button" class="btn dropdown-toggle">{{ 'request_quote.select_color'|trans }}<span class="caret"></span></button>
				                        <ul class="dropdown-menu js_select_color_from_list js_set_selected_value" role="menu" aria-labelledby="dropdownMenu_{{ i }}"  data-product-id="{{ product_id }}" data-imprint-id="{{ imprint_id }}" data-color-no="{{ i }}" data-type="standard">
											{% for key,imprint_color in standard_imprint_color %}
				                           		<li data-value="{{ imprint_color.pms|capitalize }}"><a href="javascript:void(0)">
				                           		<span style="display:none;background:{{ imprint_color.hex }};" data-color="{{ imprint_color.pms|capitalize }}"></span>
				                           		{{ imprint_color.pms|capitalize }}</a></li>
				                           {% endfor %}
										</ul>
				                        {% if ob_project_transaction_configuration_rule.shopping_cart.product_detail_popup.option.pms_color.status == 1 and pms_color is defined %}
				                          <div class="or-block">{{ 'request_quote.or'|trans }}</div>
				                        {% endif %}
				                    </div>
			                </div>
		                {% endif %}
		            </div>
		            {% endif %}
		            
		            {% if ob_project_transaction_configuration_rule.shopping_cart.product_detail_popup.option.pms_color.status == 1 and pms_color is defined %}
		            <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 position-inherit">
			             <div class="selection-color-box color-selection">
		                    <div id="pms_color_id_{{ i }}" class="dropdown dropdown_size color-section-box color-section-box-class-{{ i }}"  data-product-id="{{ product_id }}" data-imprint-id="{{ imprint_id }}">                                                                
		                        	<div class="dropdown color-selected-col color-selected-col-class-{{ i }}" id="Color-picker-1">
										<input id="pms_color_select_code_{{ product_id }}_{{ imprint_id }}_{{ i }}" type="text" class="color-section-box-inpt" placeholder="Select Color" readonly="readonly"/>
		                                <input id="pms_color_select_hashkey_{{ product_id }}_{{ imprint_id }}_{{ i }}" type="hidden" />
		                                <span style="background:#da1e1e;" data-toggle="dropdown"></span>
		                                {% if i>1 %}
		                                <a href="javascript:void(0);" class="remove-pms-color js_remove_imprint_color" data-product_id="{{ product_id }}" data-imprint_id="{{ imprint_id }}" data-rm-id="{{i}}">X</a>
		                                {% endif %}
		                             </div>
		                             <div class="color-selection-box dropdown-menu color-selection-box-class-{{ i }} color-imprint-id-{{ imprint_id }}">
		                             	<h5>{{ 'request_quote.panton_color_selection'|trans }}</h5>
		                                <p>{{ 'request_quote.pms_color_note'|trans }}</p>
		                                <span>{{ 'request_quote.pms_color_standard_color'|trans }}</span>
		                                <div class="dropdown dropdown_size color-select-box color-select-box-class-{{ i }}">
		                                	<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu17" data-toggle="dropdown" aria-expanded="true">Choose your color<span class="caret"></span>
		                                    </button>
		                                    	<ul class="dropdown-menu js_pms_color" role="menu" aria-labelledby="dropdownMenu17">
			                                        {% for key,pc in pms_color %}
			                                        	<li data-counter="{{ i }}"   data-hashkey="{{ key }}" data-colorname="{{ pc }}"><a href="javascript:void(0)"><span style="background:#{{ key }};"></span>{{ pc }}</a></li>
			                                        {% endfor %}
		                                        	<li><a href="javascript:void(0)">{{ 'request_quote.choose_your_color'|trans }}</a></li>
		                                        </ul>
										 </div>
		                                 <p>{{ 'request_quote.pms_color_note_1'|trans }}</p>
		                                 <div class="color-table color-table-class-{{ i }}">
										 </div>
		                                 <p class="center">{{ 'request_quote.pms_color_note_2'|trans }}</p>
		                               </div> 
		                    </div>
	                      </div>
	                </div>
	                {% endif %}  
	        	</div>

			</div>
	       {# {% endfor %} #}
	       {% endif %}
	       {% if color_no ==1 %}
	         <a href="javascript:void(0);" style="font-size: 15px; font-weight: normal;" class="js_add_additional_imprint_color" data-product_id="{{product_id}}" data-imprint_id={{imprint_id}}>Add Additional Imprint Colour</a> 
	        {% endif %}
	{% endblock ajax_body %}