<div class="col-xs-12">
   <span class="text-large">Variações</span>
</div>

{% if ((grid_variations.cor and grid_variations.cor_qtd > 0) or  (grid_variations.color is empty == false)) %}
    <div class="col-xs-4 field-variation">
      <div class="field-group">
        <label class="flex between-xs">
          <div class="padding-x-small">
            {{ grid_variations.cor | capitalize }}
            {{ grid_variations.cor_description | capitalize }}
          </div>
        </label>
        <div class="row no-space-xs">
          <div class="col-xs right-padding-x-small">
            <select id="mercaVariationColor" name="mercaVariationColor" class="field-entry field-entry-medium" {% if hasCatalog %}disabled{% endif %}>
              {% for attribute in attributes %}
                <option value="{{ attribute.id }}" {{ attribute.id == grid_variations.var_color_selected ? 'selected' : '' }}>{{ attribute.name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      </div>
    </div>
{% endif %}

{% if ((grid_variations.tamanho and grid_variations.tamanho_qtd > 0) or  (grid_variations.size is empty == false)) %}
    <div class="col-xs-4 field-variation">
      <div class="field-group">
        <label class="flex between-xs">
          <div class="padding-x-small">
            {{ grid_variations.tamanho | capitalize }}
            {{ grid_variations.tamanho_description | capitalize }}
          </div>
        </label>
        <div class="row no-space-xs">
          <div class="col-xs right-padding-x-small">
            <select id="mercaVariationSize" name="mercaVariationSize" class="field-entry field-entry-medium" {% if hasCatalog %}disabled{% endif %}>
              {% for attribute in attributes %}
                <option value="{{ attribute.id }}" {{ attribute.id == grid_variations.var_size_selected ? 'selected' : '' }}>{{ attribute.name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      </div>
    </div>
{% endif %}

{% if ((grid_variations.especificacao and grid_variations.especificacao_qtd > 0) or  (grid_variations.specification is empty == false)) %}
    <div class="col-xs-4 field-variation">
      <div class="field-group">
        <label class="flex between-xs">
          <div class="padding-x-small">
            {{ grid_variations.especificacao | capitalize }}
            {{ grid_variations.especificacao_description | capitalize }}
          </div>
        </label>
        <div class="row no-space-xs">
          <div class="col-xs right-padding-x-small">
            <select id="mercaVariationSpecification" name="mercaVariationSpecification" class="field-entry field-entry-medium" {% if hasCatalog %}disabled{% endif %}>
              {% for attribute in attributes %}
                <option value="{{ attribute.id }}" {{ attribute.id == grid_variations.var_specification_selected ? 'selected' : '' }}>{{ attribute.name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      </div>
    </div>
{% endif %}