{% for product_grid in products_grid %}
  <a {% if product_grid.href %}href="{{ product_grid.href }}"{% endif %} class="row no-space-xs middle-xs background-white shadow-small
           bottom-margin-small text-decoration-none padding-medium {{  product_grid.mlcatalog_ad_id ? 'cursor-default' : 'js-product-grid-select hover:shadow-large' }}" id="{{ product_grid.product_id }}">
    <div class="col-xs-3 col-sm-1">
      <div class="content-box">
        <span class="text-small text-dark text-bold">#{{ product_grid.product_id }}</span>
      </div>
    </div>
    <div class="col-xs-width-auto hidden-sm-down">
      <div class="content-box right-margin-small">
        <img src="{{ product_grid.image }}" alt="">
      </div>
    </div>
    <div class="col-xs-9 col-sm row">
      <div class="content-box col-sm">
        {% if product_grid.codigo_barra %}
          <span class="text-small text-dark visible-block">{{ product_grid.codigo_barra }}</span>
        {% endif %}
        <span class="text-small text-dark visible-block">
          {% if product_grid.color_description %}
            {{ product_grid.color_template_description }}: {{ product_grid.color_description }}
          {% endif %}
          {% if product_grid.size_description %}
            {% if product_grid.color_description %} • {% endif %}
            {{ product_grid.size_template_description }}: {{ product_grid.size_description }}
          {% endif %}
          {% if product_grid.specification_description %}
            {% if product_grid.color_description or product_grid.color_description %} • {% endif %}
            {{ product_grid.specification_template_description }}: {{ product_grid.specification_description }}
          {% endif %}
        </span>
      </div>
      {% if showTagMlCatalog %}
      <div class="col-xs-6 col-sm-5 top-margin-small">
        <div class="content-box ">
          <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block
            {{ product_grid.mlcatalog_ad_id ? 'background-success text-success' : (not product_grid.mlcatalog_product_id ? 'background-error text-error' : 'background-warning text-warning') }}">{{ product_grid.mlcatalog_status }}</span>
        </div>
      </div>
      {% endif %}
    </div>
    <div class="col-xs-6 col-sm-2">
      <div class="content-box">
        <span class="text-small text-dark">{{ product_grid.preco }}</span>
      </div>
    </div>
    <div class="col-xs-6 col-sm-2">
      <div class="content-box">
        <span class="text-small text-dark">{{ product_grid.quantidade }} unid.</span>
      </div>
    </div>
    <div class="col-xs-6 col-sm-1 right-margin-large">
      <div class="content-box">
          <span class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block {{ product_grid.status == 'Habilitado' ? 'background-success text-success' : 'background-error text-error' }}">{{ product_grid.status }}</span>
      </div>
    </div>
    <div class="col-xs-width-auto hidden-sm-down">
      <div class="content-box">
        <i class="fas fa-angle-right text-gray"></i>
      </div>
    </div>
  </a>
{% endfor %}