{% 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.quote.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.quote.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) %}
	        <input type="hidden" id="js_selected_color_id_{{ product_id }}_{{ imprint_id }}_{{ i }}" value="0" data-type="">
	        <div class="relative-col">
	            <div class="row color-selection-block">
	            	{% if ob_project_transaction_configuration_rule.quote.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="background:{{ imprint_color.hex }};" data-color="{{ imprint_color.pms|capitalize }}"></span>{{ imprint_color.pms|capitalize }}</a></li>
				                           {% endfor %}
				                           
{# 				                           {% for key,imprint_color in standard_imprint_color %}#}
{# 				                           		<li data-value="{{ imprint_color }}"><a href="javascript:void(0)"><span style="background:{{ imprint_color }};" data-color="{{ imprint_color }}"></span>{{ imprint_color|capitalize }}</a></li>#}
{# 				                           {% endfor %} #}
				                        </ul>
				                        
				                       
				                        {% if ob_project_transaction_configuration_rule.quote.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.quote.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">
		                     <i class="pantone-color-icon"></i>
		                     <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" />
		                                <input id="pms_color_select_hashkey_{{ product_id }}_{{ imprint_id }}_{{ i }}" type="hidden" />
		                                <span style="background:#da1e1e;" data-toggle="dropdown"></span>
		                             </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 %}
	{% endblock ajax_body %}