{{ header }}
{{ (facebook_pixel and facebook_pixel is defined) ? facebook_pixel : '' }}
<section class="container-fluid">
  {% if content_top %}
    {{ content_top }}
  {% endif %}
  {{breadcrumbs}}
  <div class="row">
    <div class="col-md-3 hidden-md-down">
      <div class="content-box js-fixed-on-top">
        {{ account }}
      </div>
    </div>
    <div class="col-xs">
      <div class="content-box">
        <div class="flex middle-xs">
          <a href="{{ continue }}" class="padding-small text-x-large text-dark hidden-md-up">
            <i class="fas fa-angle-left" aria-hidden="true"></i>
          </a>
          <span class="heading-1">{{ heading_title }}</span>
        </div>
        {% if products %}
          {% for product in products %}
            <div class="row x-small-space-xs no-space-md middle-xs between-xs vertical-padding-medium">
              <div class="col-xs-12 col-md">
                <div class="content-box flex flex-row nowrap-xs middle-xs">
                  {% if product.thumb %}
                    <a href="{{ product.href }}">
                      <div>
                          <img src="{{ product.thumb }}" alt="{{ product.name }}" class="visible-block" width="80" height="80" />
                      </div>
                    </a>
                  {% endif %}
                  <div class="full-width left-margin-medium">
                    <a href="{{ product.href }}">
                      <span class="visible-block text-small text-gray text-word-wrap bottom-margin-x-small">(Cód item. {{ product.model }})</span>
                      <span class="visible-block text-medium text-bold">{{ product.name }}</span>
                    </a>
                    {% if product.itens_kit %}
                      <div class="rel">
                        <a href="#" class="visible-block text-small vertical-padding-small js-see-kit-products">Ver produtos do kit</a>
                        <div class="abs background-white padding-medium border-gray auto-overflow hidden cart-kit-products-container">
                          {% for itemKitKey, itemKit in product.itens_kit %}
                            <div class="text-ellipsis">
                              <span class="text-dark text-bold">{{ itemKit.quantidade }}</span>
                              <span class="text-small text-gray text-ellipsis"> - {{ itemKit.descricao }}</span>
                            </div>
                          {% endfor %}
                        </div>
                      </div>
                    {% endif %}
                  </div>
                </div>
              </div>
              <div class="col-xs-12 col-md-width-auto">
                <div class="content-box flex middle-xs">
                  {% if product.price %}
                    <div class="right-margin-large">
                      <span class="visible-block text-small text-gray">Preço</span>
                      {% if product.special == false %}
                        <span class="visible-block text-small text-dark text-bold">{{ product.price }}</span>
                      {% else %}
                        <span class="visible-block text-small text-dark"><s>{{ product.price }}</s></span>
                        <span class="visible-block text-small text-dark text-bold">{{ product.special }}</span>
                      {% endif %}
                    </div>
                  {% endif %}
                  <button
                    type="button"
                    class="btn-default btn-medium js-btn-cart"
                    class="whish-cart"
                    data-product-id="{{ product.product_id }}"
                    data-layout-id="{{ layout_id }}"
                  >
                    <span>{{ button_cart }}</span>
                  </button>
                  {% if futuraquantidadeatacado_status %}
                    <span class="btn-cart-notification js-btn-cart-notification
                    {% if product.notification_value %} have-in-cart{% endif %}"></span>
                  {% endif %}
                  <a href="{{ product.remove }}" class="visible-block text-small text-center padding-medium left-margin-small">
                    <span>{{ button_remove }}</span>
                  </a>
                </div>
              </div>
            </div>
          {% endfor %}
        {% else %}
          <div class="padding-large paper top-margin-medium flex flex-row center-xs">
            <span class="full-width text-center text-x-large text-dark top-margin-x-large">{{ text_empty }}</span>
            <a href="{{ continue }}" class="btn-default btn-medium top-margin-medium bottom-margin-x-large">
              <span>{{ button_continue }}</span>
            </a>
          </div>
        {% endif %}


      </div>
    </div>
    {% if column_right %}
      <div class="col-md-3 hidden-md-down">
        {{ column_right }}
      </div>
    {% endif %}
  </div>
  {% if content_bottom %}
    {{ content_bottom }}
  {% endif %}
</section>



<script>
  window.waitEvent('scripts_document', function () {
    {% if success %}
      notificationMsg('{{ success }}', 'success');{% endif %}
  });
</script>

{{ footer }}
