<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.marketId is empty %}
      <div>
        <span class="text-small text-dark visible-block">{{ not_list_mkt }}</span>
      </div>
    {% endif %}

    {% if (((produc_status == 'Habilitado') or ((marketplace.mktvinculo))) 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>
      {% else %}
        {% if skyhub_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 produc_status == 'Habilitado' %}
                <a class="new-dropdown-content-item text-small text-dark text-decoration-none js-sincronizar-skyhub"
                  data-link="{{ marketplace.sincronizar }}"
                  data-mercaid="{{ marketplace.marketId }}"
                  data-codigo-barra="{{ marketplace.codigo_barra }}">{{ 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 }}">{{ lang_bulk_product }}</a>
              {% endif %}
              {% 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>
              {% else %}
                <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 %}
              {% 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 %}
            </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-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('TypeSkyHub_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[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>

            {% if platforms %}
              <div class="col-xs-12 col-md-5">
                <div class="content-box bottom-padding-medium">
                  <span class="text-small text-gray">Plataformas:</span>
                  {% for key, platform in platforms %}
                    <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block {{ platform.tag_class }} text-medium">{{ platform.plataforma }}</span>
                  {% endfor %}
                </div>
              </div>
            {% endif %}

            {% if marketplace.url|length > 0 %}
              <div class="col-xs-12">
                <div class="content-box bottom-padding-medium">
                  <span class="text-small text-gray visible-block">Acesse seus produtos:</span>
                  {% for key, url in marketplace.url %}
                    <a href="{{ url }}" target="_blank" class="text-decoration-none text-primary text-medium">{{ key }}</a>
                  {% endfor %}
                </div>
              </div>
            {% endif %}
          </div>
        </div>
        <div class="col-xs-width-auto">
          {% if skyhub_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 js-sincronizar-skyhub" data-link="{{ marketplace.sincronizar }}" data-mercaid="{{ marketplace.marketId }}" data-codigo-barras="{{ marketplace.codigo_barras }}" >{{ 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 }}" data-codigo-barras="{{ marketplace.codigo_barras }}">{{ lang_bulk_product }}</a>
                <a class="new-dropdown-content-item text-small text-dark text-decoration-none js-finalizar-skyhub" data-link="{{ marketplace.unsync }}" >{{ lang_desyn }}</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="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>
