<div class="col-xs-12 col-md-2">
  <div class="content-box flex nowrap-xs middle-xs between-xs bottom-margin-medium left-border-gray left-padding-medium relative flex-end">

   {# icon to show error synchronize ml #}
    {% if marketplace.errors_synchronize %}
      <i class="fa-solid fa-circle-exclamation cursor-pointer js-ml-icon-error-synchronize ml-error-synchronize" style="color: #af3944" title="Erro de atualização do produto no mercado livre"></i>
    {% endif %}

    {% if marketplace.marketId is empty %}
      <div>
        <span class="text-small text-dark visible-block width-no-list-mkt">{{ not_list_mkt }}</span>
      </div>
    {% endif %}
    {% if (produc_status == 'Habilitado') %}

      {% if (marketplace.mktvinculo) and (marketplace.mkt_error_grade is not iterable) %}
        <button class="btn-default btn-small-square btn-white js-ml-button-advertisement">
          <span class="text-medium text-dark">Anúncios</span>
          <i class="fa fa-angle-down left-margin-medium"></i>
        </button>
      {% else %}
        {% if mercadolivre_status %}
          <div class="new-dropdown js-new-dropdown left-margin-medium">
            <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.mkt_error_grade is iterable %}
                {% for error in marketplace.mkt_error_grade %}
                  {% if error.cod_error == constant('Type_ErrorGrade::Tp_ErGrid') %}
                    <a class="new-dropdown-content-item text-small text-dark text-decoration-none js-mlerror-grade" data-product-grid-id='{{ product_key_id }}' >Ajustar anúncio</a>
                  {% endif %}
                {% endfor %}
                {% if marketplace.unsync is not empty %}
                  <a class="new-dropdown-content-item text-small text-dark text-decoration-none finalizar" data-link="{{ marketplace.unsync }}" >{{ lang_desyn }}</a>
                  <a class="new-dropdown-content-item text-small text-dark text-decoration-none desvincular" data-link="{{ marketplace.desvinc }}" >{{ lang_desvinc }}</a>
                {% endif %}
              {% else %}
                <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>
                <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 }}">{{ lang_vinc }}</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>
                {% if (codigo_barra) %}
                  <a class="new-dropdown-content-item text-small text-dark text-decoration-none js-ml-features" data-codigo-barra="{{ codigo_barra }}" data-product-id="{{ product_key_id }}" data-type-product="{{ type_product }}">Detectar Ficha Técnica</a>
                {% endif %}
              {% 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 %}

    {% endif %}
  </div>
</div>

<div class="col-xs-12">
  {% if (marketplace.mktvinculo) %}
    <div class="content-box padding-small js-ml-content-advertisement hidden">
      <div class="row no-space-xs middle-xs between-xs background-white top-padding-medium horizontal-padding-medium shadow-small bottom-margin-small border-gray">

        <div class="col-xs-12 col-md">
          <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' }} visible-block">{{ marketplace.formatedPrice }}</span>
          </div>
        </div>

        <div class="col-xs-12 col-md">
          <div class="content-box bottom-padding-small flex flex-row">
            {% if marketplace.status is not empty %}
              {% if marketplace.status == constant('Type_MercadoLivreItemStatus::Tp_Active') %}
                <span
                  class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large right-margin-x-small bottom-margin-x-small background-success text-success">Anúncio {{ status_anuncio_marketplace[marketplace.status] }}</span>
              {% elseif marketplace.status == constant('Type_MercadoLivreItemStatus::Tp_Paused') %}
                <span
                  class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large right-margin-x-small bottom-margin-x-small background-info text-info">Anúncio {{ status_anuncio_marketplace[marketplace.status] }}</span>
              {% elseif marketplace.status == constant('Type_MercadoLivreItemStatus::Tp_Closed') %}
                <span
                  class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large right-margin-x-small bottom-margin-x-small background-error text-error">Anúncio {{ status_anuncio_marketplace[marketplace.status] }}</span>
              {% elseif marketplace.status == constant('Type_MercadoLivreItemStatus::Tp_Revision') %}
                <span
                  class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large right-margin-x-small bottom-margin-x-small background-warning text-warning">Anúncio {{ status_anuncio_marketplace[marketplace.status] }}</span>
              {% endif %}
            {% endif %}
            {% if marketplace.catalogo %}
              <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large right-margin-x-small bottom-margin-x-small background-info text-info">Catálogo</span>
            {% endif %}
          </div>
        </div>

        <div class="col-xs-6 col-md">
          <div class="content-box bottom-padding-medium">
            <i class="far fa-star active_star{{ marketplace.rating }}"></i>
            <i class="far fa-star active_star{{ marketplace.rating }}"></i>
            <i class="far fa-star active_star{{ marketplace.rating }}"></i>
            <i class="far fa-star active_star{{ marketplace.rating }}"></i>
            <i class="far fa-star active_star{{ marketplace.rating }}"></i>
            <span class="text-medium text-dark">({{ marketplace.rating }})</span>
          </div>
        </div>

        <div class="col-xs-6 col-md">
          <div class="content-box bottom-padding-medium">
            <span class="text-small text-dark">Visitantes: {{ marketplace.total_visits }}</span>
          </div>
        </div>

        <div class="col-xs-width-auto">
          <div class="content-box bottom-padding-medium right-padding-medium">
            <a href="{{ marketplace.url }}" target="_blank" class="btn-default btn-small-square btn-white">
              <span class="text-medium text-dark">Ver anúncio</span>
            </a>
          </div>
        </div>

        <div class="col-xs-width-auto">
          {% if mercadolivre_status %}
            <div class="new-dropdown bottom-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">
                <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>
                {% if marketplace.sincronizarCatalogo %}
                  <a class="new-dropdown-content-item text-small text-dark text-decoration-none js-sincronizarCatalog" data-link="{{ marketplace.sincronizarCatalogo }}"
                     data-prod-type="{{ type_product }}" data-product-id="{{ product_key_id }}" data-mercaid="{{ marketplace.marketId }}" data-mainadid="{{ marketplace.marketAdId }}"
                     data-url-redirect="{{ url_redirect }}" data-codigobarra="{{ codigo_barra }}">{{ lang_syn_catalog }}</a>
                {% endif %}
                <a class="new-dropdown-content-item text-small text-dark text-decoration-none finalizar" data-link="{{ marketplace.unsync }}" >{{ lang_desyn }}</a>
                <a class="new-dropdown-content-item text-small text-dark text-decoration-none desvincular" data-link="{{ marketplace.desvinc }}" >{{ lang_desvinc }}</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>
              </div>
            </div>
          {% else %}
            <div class="left-margin-medium text-error bottom-margin-medium" data-tooltip="Ative o módulo para editar">
              <i class="fas fa-ban"></i>
            </div>
          {% endif %}
        </div>

      </div>
    </div>
  {% endif %}

  {% if marketplace.error %}
    <div class="background-error vertical-padding-small horizontal-padding-medium border-error full-width"
         style="margin-bottom:-1px;">
      <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="background-warning vertical-padding-small horizontal-padding-medium border-warning full-width"
         style="margin-bottom:-1px;">
      <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="background-warning vertical-padding-small horizontal-padding-medium border-warning full-width"
           style="margin-bottom:-1px;">
        {% if error.cod_error == constant('Type_ErrorGrade::Tp_ErGrid') %}
          <span class="text-small text-error">{{ error.mensagem_error }}</span>
        {% endif %}
      </div>
    {% endfor %}
  {% endif %}

</div>

{# text error synchronize ml #}
<div class="col-xs-12">
  {% if marketplace.errors_synchronize %}
  <div class="hidden background-error vertical-padding-small horizontal-padding-medium border-error full-width js-ml-span-error-synchronize">
    <span class="text-small text-error visible-inline-block">Erro de atualização do produto no mercado livre: {{marketplace.errors_synchronize}}</span>
  </div>
  {% endif %}
</div>
