 <div class="col-xs-12 col-md-2">
    <div class="flex nowrap-xs middle-xs between-xs bottom-margin-medium left-border-gray left-padding-medium">
        {% if marketplace.mktvinculo is empty %}
            <div>
                <span class="text-small text-dark visible-block">{{ not_list_mkt }}</span>
            </div>
        {% endif %}

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

          {% if (marketplace.mktvinculo) %}
            <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"></i>
            </button>
          {% endif %}

          {% if galeriapage_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 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.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>
                    {% 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 %}

                  {% 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>
                  {% 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-ml-content-advertisement hidden">
            {% if (marketplace.IsGrid) %} <hr/> {% endif %}
            {% for product in marketplace.products %}
                {% if (marketplace.IsGrid) %}
                    <div class="js-filter-accordion">
                    <div class="top-margin-large bottom-padding-x-small cursor-pointer js-accordion-control adm-filter-accordion-control">
                        <span class="text-small text-dark text-bold">
                            {% if product.grid_data.color_description %}
                                {{ product.grid_data.color_template_description }}: {{ product.grid_data.color_description }}
                            {% endif %}
                            {% if product.grid_data.size_description %}
                                {% if product.grid_data.color_description %} • {% endif %}
                                {{ product.grid_data.size_template_description }}: {{ product.grid_data.size_description }}
                            {% endif %}
                            {% if product.grid_data.specification_description %}
                                {% if product.grid_data.color_description or product.grid_data.color_description %} • {% endif %}
                                {{ product.grid_data.specification_template_description }}: {{ product.grid_data.specification_description }}
                            {% endif %}
                        </span>
                        <i class="fas fa-angle-down text-gray vertical-middle pull-right"></i>
                    </div>
                    <div class="js-accordion-content" style="display: none">
                {% endif %}
                <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">#{{ product.product_key_id }}</span>
                                </div>
                            </div>

                            <div class="col-xs-12 col-md">
                                <div class="content-box bottom-padding-medium">
                                    {% if (marketplace.IsGrid) %}

                                      {% if product.price <= 0 %}
                                        <i class="fas fa-exclamation-triangle text-error text-small"></i>
                                      {% endif %}

                                      <span class="text-small {{ product.price <= 0 ? 'text-error' : 'text-gray' }}">Preço Marketplace:</span>
                                      <span class="text-small {{ product.price <= 0 ? 'text-error' : 'text-dark' }}">{{ product.formatedPrice }}</span>
                                    {% else %}

                                      {% 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>
                                    {% endif %}
                                </div>
                            </div>

                            <div class="col-xs-12 col-md">
                                <div class="content-box bottom-padding-medium">
                                    {% if product.status is not empty %}
                                        {% if product.status == constant('TypeGaleriaPage_Status::Tp_Habilitado') %}
                                            <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[product.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[product.status] }}</span>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                {% if (marketplace.IsGrid) %} </div></div> {% endif %}
                </div>
                {% if product.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">{{ product.warning }}</span>
                  </div>
                {% endif %}
            {% endfor %}
        </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="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>