<div class="col-xs-12 col-md-2">
	<div class="relative flex nowrap-xs middle-xs between-xs bottom-margin-medium left-border-gray left-padding-medium">
	
		{# icon to show error synchronize shopee #}
		{% if marketplace.warning or marketplace.error %}
			<i 
				style="color: #af3944;" 
				title="Erro de atualização do produto na Shopee"
				class="fa-solid fa-circle-exclamation cursor-pointer right-margin-x-small js-icon-error-synchronize" 
			>
			</i>
		{% endif %}

		{% if marketplace.mktvinculo is empty %}
			<span class="text-small text-dark visible-block">{{ not_list_mkt }}</span>
		{% endif %}

		{% if ((product_status == 'Habilitado') and (not marketplace.bloq_opcoes_mkt)) %}

			{% if (marketplace.mktvinculo) %}
				<button class="btn-default btn-small-square btn-white js-button-advertisement">
					<span class="text-medium text-dark">Anúncios</span>
					<i class="fa fa-angle-down"></i>
				</button>
			{% endif %}

			{% if shopee_status %}
				<div class="new-dropdown left-margin-medium js-new-dropdown">
					<div class="new-dropdown-control">
						<span class="new-dropdown-control-dot"></span>
						<span class="new-dropdown-control-dot"></span>
						<span class="new-dropdown-control-dot"></span>
					</div>
					<div class="new-dropdown-content background-white border-gray shadow-medium right js-new-dropdown-content">
						{% if (marketplace.mktvinculo) %}

							{% if marketplace.linkType == constant('Type_MarketplaceLink::Tp_Stock') %}
								<a class="new-dropdown-content-item text-small text-dark text-decoration-none desvincular" data-link="{{ marketplace.desvinc }}">{{ text_desvinc_product }}</a>
							{% else %}
								{% if product_status == 'Habilitado' %}
									<a class="new-dropdown-content-item text-small text-dark text-decoration-none sincronizar" data-link="{{ marketplace.sincronizar }}" data-mercaid="{{ marketplace.marketId }}">{{ lang_syn }}</a>
								{% endif %}
								<a class="new-dropdown-content-item text-small text-dark text-decoration-none js-bulkSettingUnique" data-prod-type="{{ type_product }}" data-product-id="{{ product_key_id }}">{{ edit_datasheet }}</a>
								{% if marketplace.pause is not empty %}
									<a class="new-dropdown-content-item text-small text-dark text-decoration-none pause" data-link="{{ marketplace.pause }}">{{ text_unlist_product }}</a>
								{% endif %}
								{% if marketplace.unsync is not empty %}
									<a class="new-dropdown-content-item text-small text-dark text-decoration-none desvincular" data-link="{{ marketplace.desvinc }}">{{ text_desvinc_product }}</a>
									<a class="new-dropdown-content-item text-small text-dark text-decoration-none finalizar" data-link="{{ marketplace.unsync }}">{{ text_delete_product }}</a>
								{% endif %}
								{% if marketplace.url %}
									<a class="new-dropdown-content-item text-small text-dark text-decoration-none" href="{{ marketplace.url }}" target="_blank">{{ view_ad }}</a>
								{% endif %}
							{% endif %}

						{% else %}
							<a class="new-dropdown-content-item text-small text-dark text-decoration-none sincronizar" data-link="{{ marketplace.sincronizar }}" data-mercaid="{{ product_key_id }}">{{ lang_syn }}</a>
							<a class="new-dropdown-content-item text-small text-dark text-decoration-none js-bulkSettingUnique" data-prod-type="{{ type_product }}" data-product-id="{{ product_key_id }}">{{ edit_datasheet }}</a>
							<a class="new-dropdown-content-item text-small text-dark text-decoration-none js-mkt-vincular" data-modal-id="search-ads-mkt" data-product-id="{{ product_key_id }}" data-product-name="{{ name }}" data-type-product="{{ type_product }}" data-type-marketplace="{{ type_marketplace }}">{{ lang_vinc }}</a>
						{% endif %}
					</div>
				</div>
			{% else %}
				<div class="left-margin-medium text-error" data-tooltip="Ative o módulo para editar">
					<i class="fas fa-ban"></i>
				</div>
			{% endif %}

		{% endif %}

	</div>
</div>

<div class="col-xs-12">
	{% if (marketplace.mktvinculo) %}
		<div class="content-box padding-medium js-content-advertisement hidden">
			<div class="row no-space-xs top-xs background-white top-padding-medium horizontal-padding-medium shadow-small bottom-margin-small border-gray">
				<div class="col-xs">
					<div class="row no-space-xs middle-xs between-xs">
						<div class="col-xs-12 col-md-2">
							<div class="content-box bottom-padding-medium">
								<span class="text-small text-dark text-bold visible-block">#{{ marketplace.marketId }}</span>
							</div>
						</div>

						<div class="col-xs-12 col-md">
							<div class="content-box bottom-padding-medium">
								{% if marketplace.price <= 0 %}
									<i class="fas fa-exclamation-triangle text-error text-small"></i>
								{% endif %}
								<span class="text-small {{ marketplace.price <= 0 ? 'text-error' : 'text-gray' }}">Preço Marketplace:</span>
								<span class="text-small {{ marketplace.price <= 0 ? 'text-error' : 'text-dark' }}">{{ marketplace.formatedPrice }}</span>
							</div>
						</div>

						<div class="col-xs-12 col-md">
							<div class="content-box bottom-padding-medium">
								{% if marketplace.status is not empty %}
									{% if marketplace.status == constant('Type_ShopeeStatus::Tp_Normal') %}
										<span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-success text-success">Anúncio
											{{ status_anuncio_marketplace[marketplace.status] }}</span>
									{% else %}
										<span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-warning text-warning">Anúncio
											{{ status_anuncio_marketplace[marketplace.status] }}</span>
									{% endif %}
								{% endif %}
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	{% endif %}

	{% if marketplace.error %}
		<div class="js-span-error-synchronize hidden background-error vertical-padding-small horizontal-padding-medium border-error full-width rounded-x-small bottom-margin-small">
			<span class="text-small text-error visible-inline-block">{{ marketplace.error }}</span>
			{% if marketplace.error_original and marketplace.error_original != marketplace.error %}
				<span class="js-toggle-original-error visible-block text-small cursor-pointer text-primary">{{ text_see_original }}</span>
				<span class="text-small text-error hidden">{{ marketplace.error_original }}</span>
			{% endif %}
		</div>
	{% endif %}

	{% if marketplace.warning %}
		<div class="js-span-error-synchronize hidden background-warning vertical-padding-small horizontal-padding-medium border-warning full-width rounded-x-small bottom-margin-small">
			<span class="text-small text-warning">{{ marketplace.warning }}</span>
		</div>
	{% endif %}

	{% if marketplace.mkt_error_grade is iterable %}
		{% for error in marketplace.mkt_error_grade %}
			<div class="vertical-padding-small horizontal-padding-medium">
				{% if error.cod_error == constant('Type_ErrorGrade::Tp_ErGrid') %}
					<span class="text-small text-error">{{ error.mensagem_error }}</span>
				{% endif %}
			</div>
		{% endfor %}
	{% endif %}
</div>
