{% if products_grid %}
    <div class="vertical-margin-large">
        <span class="text-medium text-dark text-bold bottom-margin-medium">Vincular produtos do catálogo</span>
        {% for product_grid in products_grid %}
            <a class="row no-space-xs middle-xs background-white shadow-small hover:shadow-large bottom-margin-small text-decoration-none padding-medium js-product-grid-select" 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>
                </div>
                <div class="col-xs-6 col-sm-2 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-6 col-sm-4 right-margin-large">
                    <div class="content-box">
                        <select name="catalog_product" data-product-id="{{ product_grid.product_id }}" class="text-small horizontal-padding-small vertical-padding-x-small visible-inline-block full-max-width">
                            <option value="0">Selecione um produto</option>
                            {% for variations_relation in variations_relations %}
                                <option value="{{ variations_relation.id }}">{{ variations_relation.attribute_combinations_string }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </a>
        {% endfor %}
    </div>
{% endif %}