{% if showCatalogDescription %}
    <div class="bottom-margin-small horizontal-padding-small">
        <span class="visible-block text-medium bottom-padding-small bottom-border-gray">Confira os atributos do produto, campos destacados irão mostrar os valores diferentes</span>
    </div>
{% endif %}

<div class="row no-space-xs">
    {% for field in fieldslist %}
        <div class="col-xs-6 col-sm-4 padding-x-small rel">
            <div class="content-box hidden-overflow horizontal-padding-small top-padding-small hover:background-light
            {% if field.different_value %} border-error {% endif %}" title="{{ field.name }}">

                {% if field.different_value %}
                <div class="full-max-width text-transform-inherit text-medium visible-inline" data-tooltip="
                Esse atributo do produto do catálogo está diferente do atributo cadastrado na ficha técnica do seu anúncio,
                garanta que você está selecionando o produto correto, senão seu anúncio poderá ser penalizado.">
                    <i class="fas fa-question-circle text-medium text-error"></i>
                </div>
                {% endif %}
                <span class="text-small text-dark text-bold visible-inline text-ellipsis">{{ field.name }}</span>

                <span class="text-small text-gray bottom-border-gray visible-block bottom-padding-small">{% if field.different_value %}Catalogo: {% endif %}{{ field.value_name }}</span>
                {% if field.has_value %}
                    {% if not field.same_value %}
                        <span class="text-small text-gray bottom-border-gray visible-block vertical-padding-x-small">Ficha técnica: {{ field.diff_value }}</span>
                    {% endif %}
                {% endif %}
            </div>
        </div>
    {% endfor %}
</div>