{% extends '::baseAjax.html.twig' %}
{% block ajax_body %}
{% if color_no>0 %}
	<div class="row choose-variation js_select_color_boxes">
         <div class="col-lg-5 col-md-1 col-sm-1 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>
         <div class="col-lg-5 col-md-7 col-sm-7 col-xs-12 col-lg-offset-1">
            <div class="print-title js_color_title" data-type="pms">
         	    {{ 'request_quote.print_position.imprint_color.pantone'|trans }}
            </div>
         </div>
     </div>
     {% block request_quote_edit_selected_color_row %}
     	{% for i in range(1, color_no) %}
		{% set standard_color = '' %}
        {% set pms_color_code = '' %}
        {% set pms_color_hashkey = '' %}
        {% for key,sel_col in imprint_info.selected_colors %}
        	{% set k = (key + 1) %}
        	{% if k == i %}
        		{% set standard_color = sel_col.color_id %}
        		{% set pms_color_code = sel_col.pms_color.pms_color_code %}
        		{% set pms_color_hashkey = sel_col.pms_color.pms_color_hashkey %}
        	{% endif %}
        {% endfor %}
        	 <input type="hidden" id="js_selected_color_id_{{ product_id }}_{{ imprint_id }}_{{ i }}" value="{{ standard_color }}" data-type="">
	        <div class="relative-col">
	            <div class="row color-selection-block">
		            <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">
				                        	{% if standard_color is defined %}
				                        		{{ standard_color }}
				                        	{% else %}
		            							{{ 'request_quote.select_color'|trans }}
		            						{% endif %}	
				                        	<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 style="display:none;" data-value="{{ imprint_color }}"><a href="javascript:void(0)"><span style="background:{{ imprint_color }};" data-color="{{ imprint_color }}"></span>{{ imprint_color|capitalize }}</a></li>
												<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 %}
				                        </ul>
				                        <div class="or-block">{{ 'request_quote.or'|trans }}</div>
				                    </div>
			                </div>
		                {% endif %}
		            </div>
		            <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" value="{{ (pms_color_code is defined) ? pms_color_code : '' }}" />
		                                <input id="pms_color_select_hashkey_{{ product_id }}_{{ imprint_id }}_{{ i }}" type="hidden" value="{{ (pms_color_hashkey is defined) ? pms_color_hashkey : '' }}" />
		                                <span style="background:#{{ pms_color_hashkey }};" data-toggle="dropdown"></span>
		                             </div>
		                             <div class="color-selection-box dropdown-menu color-selection-box-class-{{ i }}">
		                             	<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>
	        	</div>
			</div>
       {% endfor %}
       {% endblock request_quote_edit_selected_color_row %}
{% endif %}
{% endblock ajax_body %}