{% for field in fieldslist %}
	<div class="col-xs-6">
		<div class="field-group">

			<label class="flex between-xs">
				<div class="padding-x-small">
					<span class="js-title-attr">
						{{ field.multi_lang[0].value  }}
						<span class="{{ field.mandatory ? 'text-error' : 'text-success' }}">{{ field.mandatory ? '(obrigatório)' : '(opcional)' }}</span>
					</span>
					<input type="hidden" name="attr_label[{{ field.attribute_id }}]" value="{{ field.multi_lang[0].value }}" class="js-attr-name">
          <input type="hidden" name="attr_type[{{ field.attribute_id }}]" value="{{ field.attribute_info.input_type }}" class="js-attr-type">
				</div>
				<span class="text-x-small padding-x-small js-attributes-clear cursor-pointer" title="Limpar o valor atual do campo">Limpar</span>
			</label>

			<div class="row x-small-space-xs">
				<div class="col-xs">

					{# Shopee Attribute input type: SINGLE_DROP_DOWN = 1 | SINGLE_COMBO_BOX = 2 | FREE_TEXT_FILED = 3 | MULTI_DROP_DOWN = 4 | MULTI_COMBO_BOX = 5 | Brand_Input_Type = 6 #}
					{% if field.attribute_value_list %}

						{% if field.attribute_info.input_type and (field.attribute_info.input_type == 1 or field.attribute_info.input_type == 4 ) %}
							<select class="field-entry field-entry-medium" id="attr_value[{{ field.attribute_id }}]" name="attr_value[{{ field.attribute_id }}]">
								{% for key, item in field.attribute_value_list %}
									{% for index, attr_value in item.multi_lang %}
										<option value="{{ attr_value.value }}" {{ (attr_value.value == dadosprod[field.attribute_id]['attribute_unit_value']) ? 'selected' : '' }}>
											{{ attr_value.value }}
										</option>
									{% endfor %}
								{% endfor %}
							</select>
						{% endif %}

						{% if field.attribute_info.input_type and (field.attribute_info.input_type == 2 or field.attribute_info.input_type == 5) %}
							<input
								type="text"
								id="attr_value[{{ field.attribute_id }}]"
								name="attr_value[{{ field.attribute_id }}]"
								class="field-entry field-entry-medium js-attributes-autocomplete-value
											{{ field.attribute_info.input_validation_type == 1 ? 'mask-int' : '' }}
											{{ field.attribute_info.input_validation_type == 2 ? '' : '' }}
											{{ field.attribute_info.input_validation_type == 3 ? 'mask-number-en-decimal' : '' }}
											{{ field.attribute_info.input_validation_type == 4 ? 'mask-date' : '' }}" 
              	value="{{ dadosprod[field.attribute_id]['attribute_value'] }}"
              	{{ field.mandatory ? 'required' : '' }}
							>
              <div class="data-source hidden">
                {% for key, option in field.attribute_value_list %}
                  {% for index, attr_value in option.multi_lang %}
                    <div class="js-attributes-autocomplete-item" data-value="{{ option.value_id }}">{{ attr_value.value }}</div>
									{% endfor %}
                {% endfor %}
              </div>
						{% endif %}

						{% if field.name == constant('Type_ShopeeAttribute::Tp_Marca') and field.attribute_info.input_type == 6 %}
							<input
								type="text"
								id="attr_value[{{ field.attribute_id }}]"
								name="attr_value[{{ field.attribute_id }}]"
								class="field-entry field-entry-medium js-attributes-autocomplete-value
											{{ field.attribute_info.input_validation_type == 1 ? 'mask-int' : '' }}
											{{ field.attribute_info.input_validation_type == 2 ? '' : '' }}
											{{ field.attribute_info.input_validation_type == 3 ? 'mask-number-en-decimal' : '' }}
											{{ field.attribute_info.input_validation_type == 4 ? 'mask-date' : '' }}" 
              	value="{{ dadosprod[field.attribute_id]['attribute_value'] }}"
              	{{ field.mandatory ? 'required' : '' }}
							>
              <div class="data-source hidden">
                {% for key, option in field.attribute_value_list %}
                  <div class="js-attributes-autocomplete-item" data-value="{{ option.value_id }}">{{ option.display_brand_name }}</div>
                {% endfor %}
              </div>
						{% endif %}

					{% else %}
						{# Only FREE_TEXT_FILED = 3 #}
						<input 
							type="text" 
							id="attr_value[{{ field.attribute_id }}]" 
							name="attr_value[{{ field.attribute_id }}]" 
							class="field-entry field-entry-medium
										{{ field.attribute_info.input_validation_type == 1 ? 'mask-int' : '' }}
										{{ field.attribute_info.input_validation_type == 2 ? '' : '' }}
										{{ field.attribute_info.input_validation_type == 3 ? 'mask-number-en-decimal' : '' }}
										{{ field.attribute_info.input_validation_type == 4 ? 'mask-date' : '' }}" 
							value="{{ dadosprod[field.attribute_id]['attribute_value'] }}" 
							{{ field.mandatory ? 'required' : '' }}
						>
					{% endif %}
				</div>

				{% if field.attribute_info.attribute_unit_list %}
					<div class="col-xs">
						<select name="attr_unit_value[{{field.attribute_id}}]" class="field-entry field-entry-medium">
							{% for key, allowed_unit in field.attribute_info.attribute_unit_list %}
								<option value="{{ allowed_unit }}" {{ (allowed_unit == dadosprod[field.attribute_id]['attribute_unit_value']) ? 'selected' : '' }}>
									{{ allowed_unit }}
								</option>
							{% endfor %}
						</select>
					</div>
				{% endif %}
			</div>

			{% if field.name != constant('Type_ShopeeAttribute::Tp_Marca') %}
				<label class="attributes-disabled top-margin-small cursor-pointer">
					<input type="checkbox" class="js-attributes-disabled hidden" name="attr_value_na[{{ field.attribute_id }}]" value="{{ constant('Type_DsimDnao::Tp_Sim') }}" {{ (dadosprod[field.attribute_id]['attribute_value_na']) ? 'checked' : '' }}>
					<span class="text-gray">N/A</span>
				</label>
			{% endif %}

		</div>
	</div>
{% endfor %}

<script type="text/javascript">
	$(document).ready(function () {
		$('.js-attributes-autocomplete-value').on('focus', function (event) {

			var sourceContent = [];

			$(this).siblings('.data-source').find('.js-attributes-autocomplete-item').each(function (index, el) {
				sourceContent[index] = {
					label: $(this).text(),
					value: $(this).data('value')
				}
			});

			$('.js-attributes-autocomplete-value').autocomplete({
				source: sourceContent,

				select: function (event, ui) {
					this.value = ui.item.label;
					return false;
				},

				focus: function (event, ui) {
					return false;
				}
			});
		});
	});
</script>
