<div>
	<form id="js-mlfichatecnica" action="{{ action }}" method="post" enctype="multipart/form-data">
		<div class="js-adm-modal-container adm-modal-container-full" data-tempos-garantia='{{ mercadolivre_lista_tempos_garantia }}' data-product-id="{{ product_id is defined ? product_id : 0 }}" data-image-manager="{{ text_image_manager }}">

			<div class="adm-modal-header">
				<div class="flex between-xs">
					<div class="padding-large">
						<span class="text-x-large text-dark text-bold">Configurações Mercado Livre</span>
					</div>
					<i class="fas fa-times text-small text-dark padding-large cursor-pointer js-adm-modal-close"></i>
				</div>
			</div>

			<div class="adm-modal-content horizontal-padding-large">
				<input type="hidden" name="redirect" value="{{ redirect }}"/>
				<div class="row small-space-xs">
					{% if unique_product %}
						<div class="col-xs-12 form unique_produto" id="tabela_temp">
							<span class="text-large text-dark">{{ products[0].name }}</span>
							<input type="hidden" name="product_ml" id="idproduto" value="{{ products[0].product_key_id }}"/>
							<input type="hidden" name="type_product[{{ products[0].product_key_id }}]" value="{{ type_product }}"/>
							<hr class="top-margin-medium bottom-border-gray">
						</div>
						<div class="col-xs-12 field-group">
							<label for="custom_title" class="field-label">{{ entry_custom_title }}</label>
							<input type="text" name="custom_title" maxLength="60" id="custom_title" value="{{ mkt_custom_title }}" class="field-entry field-entry-medium" {{ custom_title_enabled }}/>
						</div>
					{% else %}
						<div class="col-xs-6">
							{{ lang_ml_select_product }}
						</div>
						<div class="col-xs-12 form" id="tabela_temp">
							<input type="text" name="ml" id="ml" value="" class="field-entry field-entry-medium bottom-margin-small full-width" placeholder="Digite o nome do produto"/>
							<div id="product-ml" class="scrollbox full-width">
								{% for product_ml in products %}
									<div id="product_ml{{ product_ml.product_key_id }}">
										{{ product_ml.name }}
										<img src="view/image/delete.png" alt=""/>
										<input type="hidden" name="product_ml[]" value="{{ product_ml.product_key_id }}"/>
										<input type="hidden" name="type_product[{{ product_ml.product_key_id }}]" value="{{ product_ml.IsGrid ? constant('Type_ProdutoMkt::Tp_MktProd_Grade') : constant('Type_ProdutoMkt::Tp_MktProd_Normal') }}"/>
									</div>
								{% endfor %}
							</div>
						</div>
					{% endif %}

          <div class="col-xs-6 field-group">
            <label for="" class="field-label">{{ entry_table_price }}</label>
            <select name="merca_table_price" class="field-entry field-entry-medium">
              {% for marketplace_price in marketplace_prices %}
                <option value="{{ marketplace_price.getMarketplacePriceId() }}" {{ ((marketplace_price_id != '' and marketplace_price.getMarketplacePriceId() == marketplace_price_id) or (marketplace_price_id == '' and marketplace_price.getStandard())) ? 'selected' : '' }} >{{ marketplace_price.title }}</option>
              {% endfor %}
            </select>
          </div>

					<div class="col-xs-6 field-group">
						<label for="" class="field-label">{{ entry_codigo_barras }}</label>
						<input type="text" name="codigo_barras" id="codigo_barras" value="{{ codigo_barras }}" class="field-entry field-entry-medium background-gray text-bold" readonly/>
					</div>

					<div class="col-xs-6 field-group">
						<label for="" class="field-label">{{ entry_mercadolivre_shipping }}</label>
						<select name="mercaShipping" id="mercaShipping" class="field-entry field-entry-medium">
							{% for mercadolivre_modoenvios in mercadolivre_modoenvios_array %}
								<option value="{{ mercadolivre_modoenvios.value }}" {{ mercadolivre_modoenvios.status ? '' : 'disabled' }} {{ mercadolivre_modoenvios.active }}>{{ mercadolivre_modoenvios.label }}</option>
							{% endfor %}
						</select>
					</div>

					<div class="col-xs-6 field-group">
						<label for="mercaListType" class="field-label">{{ entry_mercadolivre_listing_type }}</label>
						<select name="mercaListType" id="mercaListType" class="field-entry field-entry-medium" {{ option_disable ? 'readonly' : ''}}>
							<option value="">{{ ml_text_select }}</option>
							{% for mercadolivre_type in mercadolivre_types %}
								<option value="{{ mercadolivre_type.value }}" {{ mercadolivre_type.value == mercaListType ? 'selected' : '' }}>{{ mercadolivre_type.name }}</option>
							{% endfor %}
						</select>
					</div>

					<div class="col-xs-6 field-group">
						<label for="mercaCondition" class="field-label">{{ entry_mercadolivre_condition }}</label>
						<select name="mercaCondition" id="mercaCondition" {{ option_disable ? 'readonly' : '' }} class="field-entry field-entry-medium">
							<option value="">{{ ml_text_select }}</option>
							{% for mercadolivre_conditions in mercadolivre_conditions_array %}
								<option value="{{ mercadolivre_conditions.value }}" {{ mercadolivre_conditions.active }}>{{ mercadolivre_conditions.label }}</option>
							{% endfor %}
						</select>
					</div>

					<div class="col-xs-12 field-group">
						<label for="mercaWarrantyType" class="field-label">{{ entry_mercadolivre_warranty }}</label>
						<div class="field-entry-group">
							<select name="mercaWarrantyType" id="mercaWarrantyType" class="field-entry field-entry-medium js-mercaWarrantyType">
								<option value="">{{ ml_text_select }}</option>
								{% for mercadolivre_tipo_garantia in mercadolivre_tipo_garantia_array %}
									<option value="{{ mercadolivre_tipo_garantia.value }}" {{ mercadolivre_tipo_garantia.active }}>
										{{ mercadolivre_tipo_garantia.label }}
									</option>
								{% endfor %}
							</select>
							<input type="text" name="mercaWarranty" id="mercaWarranty" value="{{ mercaWarranty }}" class="field-entry field-entry-medium mask-number"/>
							<select name="mercaWarrantyTypeTime" id="mercaWarrantyTypeTime" class="field-entry field-entry-medium">
								<option value="">{{ ml_text_select }}</option>
								{% for mercadolivre_tempo_garantia in mercadolivre_tempo_garantia_array %}
									<option value="{{ mercadolivre_tempo_garantia.value }}" {{ mercadolivre_tempo_garantia.active }}>
										{{ mercadolivre_tempo_garantia.label }}
									</option>
								{% endfor %}
							</select>
						</div>
					</div>

					<div class="col-xs-6 field-group">
						<label class="field-label">{{ entry_mercadolivre_video }}
							<a href="https://www.mercadolivre.com.br/a/store/clips-escola-de-videos-home" target="_blank" class="tooltip-mercadolivre-video"
								data-tooltip="{{ mercadolivre_video_warning }}">
								<i class="fas fa-exclamation-circle text-medium text-info"></i></a>
						</label>
						<input type="text" name="mercaVideoId" id="mercaVideoId" value="{{ mercaVideoId }}" class="field-entry field-entry-medium" disabled/>
					</div>

					<div class="col-xs-6 field-group">
						<label for="" class="field-label">{{ entry_mercadolivre_shipping_free }}</label>
						<select name="mercaShippingFree" id="mercaShippingFree" class="field-entry field-entry-medium">
							{% for mercadolivre_status in mercadolivre_status_array %}
								<option value="{{ mercadolivre_status.value }}" {{ mercadolivre_status.active }}>{{ mercadolivre_status.label }}</option>
							{% endfor %}
						</select>
					</div>
				</div>

				<hr class="vertical-margin-x-large bottom-border-gray">

				<div class="row small-space-xs">
					<div class="col-xs-6">
						<span class="text-large text-dark">{{ entry_mercadolivre_category }}</span>
						<div class="flex middle-xs top-margin-small">
							<div class="padding-small circle" style="background:green"></div>
							<span class="text-x-small left-padding-small right-padding-large category_ok">Listagem permitida</span>
							<div class="padding-small circle" style="background:red"></div>
							<span class="text-x-small left-padding-small category_nok">Listagem não permitida</span>
						</div>
						<span id="category_tree_span" class="category_ok top-margin-medium">
							{{ mercaTree }}
						</span>
						<div id="category_shipping_preferences" class="top-margin-small text-small text-dark border-gray padding-small rounded-small hidden">
							<div class="tooltip-container">
								<b>
									<i class="fas fa-exclamation-circle right-margin-small" aria-hidden="true"></i>Valores a ser utilizados no cálculo do frete:</b>
								<div class="tooltip-content">
									<div class="tooltip-inner">
										O mercado livre usa o peso, comprimento, largura e altura para cálculo do frete conforme as especificações da categoria, que são informados abaixo.
									</div>
								</div>
							</div>
							<div id="category_shipping_preferences_items"></div>
						</div>
					</div>

					<div class="col-xs-6">
						<input type="hidden" name="mercaTree" value="{{ mercaTree }}" id="mercaTree"/>
						<input type="hidden" name="mercaId" value="{{ mercaId }}" id="mercaId"/>
						<select name="mercadolivre_cat_selection[]" id="mercaId" class="mercadolivre_cat_selection field-entry field-entry-medium bottom-margin-small">
							<option value="">{{ ml_text_select }}</option>
							{{ mercadolivre_cats }}
						</select>
						<div id="ml_attr_row_wrapper" style="display:none"></div>
					</div>
				</div>

				<hr class="vertical-margin-x-large bottom-border-gray">

				{% if html_options  %}
					<div class="row small-space-xs" id="attribute_not_variable_title">
						<div class="col-xs">
							<span class="text-large">Ficha Técnica</span>
						</div>
					</div>
				{% endif %}

				<div class="row small-space-xs attribute_not_variable" id="attribute_not_variable">
					{{ html_options }}
				</div>

				<hr class="vertical-margin-x-large bottom-border-gray">

				<div class="row small-space-xs" id="attribute_variation">
					{{ html_variations }}
				</div>
			</div>

			<div class="adm-modal-footer padding-large">
				<div class="flex end-xs">
					<button type="button" class="btn-default btn-medium btn-outline right-margin-small js-adm-modal-close">
						<span>{{ button_cancel }}</span>
					</button>
					<button type="button" class="btn-default btn-medium btn-primary js-modal-save" data-sincro="{{ product_marketId }}">
						<span>{{ button_save }}</span>
					</button>
				</div>
			</div>

		</div>
	</form>

	<style type="text/css">
		#category_tree_span {
			display: block;
			font-weight: bold;
			margin-bottom: 8px;
		}
		.category_ok {
			color: green;
		}
		.category_nok {
			color: red;
		}
	</style>

	<script src="view/javascript/template/module/bulksetting-mercadolivre.js"></script>
</div>
