{{ header }}
<section class="container-fluid bottom-margin-large">
	{{ breadcrumbs }}
  <div class="row small-space-xs">
		<div class="col-xs-12">
      {{ (content_top and content_top is defined) ? content_top : '' }}
      <div class="content-box">
        <h2 class="heading-1">{{ heading_title }}</h2>
        <span class="text-gray text-small">{{ text_msg }}</span>
      </div>
    </div>
    <div class="col-xs-12">
      {% if products %}
        <div class="row">
          <div class="col-xs-12 bottom-border-gray">
            <div class="row small-space-xs stretch-xs">
              <div class="col-md hidden-md-down"></div>
              {% for product in products %}
                <div class="col-xs-12 col-sm">
                  <div class="content-box padding-medium border-gray text-center flex vertical-between-xs">
                    <div class="full-width">
                      <div class="visible-inline-block border-gray">
                        <img src="{{ product.thumb }}" alt="{{ product.name }}" class="visible-block"/>
                      </div>
                      <span class="text-medium visible-block top-margin-small"><b>{{ product.name }}</b></span>
                    </div>
                    <div class="full-width top-padding-medium flex">
                      <button
                        type="button"
                        class="btn-default btn-medium js-btn-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="link-default text-medium vertical-padding-small left-margin-large">
                        <span>{{ button_remove }}</span>
                      </a>
                    </div>
                  </div>
                </div>
              {% endfor %}
            </div>
          </div>
          <div class="col-xs-12 bottom-border-gray">
            <div class="row small-space-xs">
              <div class="col-xs-12 col-md"><span class="text-medium"><b>Produtos do kit</b></span></div>
              {% for product in products %}
                <div class="col-xs-12 col-sm">
                  {% if product.itens_kit %}
                    <span class="text-small visible-block hidden-md-up"><b>{{ product.name }}</b></span>
                    {% for itemKitKey, itemKit in product.itens_kit %}
                      <span class="visible-block text-medium text-gray"><b>{{ itemKit.quantidade }}</b> - {{ itemKit.descricao }}</span>
                    {% endfor %}
                  {% else %}
                    <span class="text-small visible-block hidden-md-up"><b>{{ product.name }}</b></span>
                    <span class="text-medium">Não é um kit</span>
                  {% endif %}
                </div>
              {% endfor %}
            </div>
          </div>
          {% 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 class="col-xs-12 bottom-border-gray">
            <div class="row small-space-xs">
              <div class="col-xs-12 col-md"><span class="text-medium"><b>{{ text_availability }}</b></span></div>
              {% for product in products %}
                <div class="col-xs-12 col-sm">
                  <span class="text-small visible-block hidden-md-up"><b>{{ product.name }}</b></span>
                  <span class="text-medium">{{ product.availability }}</span>
                </div>
              {% endfor %}
            </div>
          </div>
          <div class="col-xs-12 bottom-border-gray">
            <div class="row small-space-xs">
              <div class="col-xs-12 col-md"><span class="text-medium"><b>{{ text_model }}</b></span></div>
              {% for product in products %}
                <div class="col-xs-12 col-sm">
                  <span class="text-small visible-block hidden-md-up"><b>{{ product.name }}</b></span>
                  <span class="text-medium visible-inline-block text-word-wrap">{{ product.model }}</span>
                </div>
              {% endfor %}
            </div>
          </div>
          <div class="col-xs-12 bottom-border-gray">
            <div class="row small-space-xs">
              <div class="col-xs-12 col-md"><span class="text-medium"><b>{{ text_price }}</b></span></div>
              {% for product in products %}
                <div class="col-xs-12 col-sm">
                  <span class="text-small visible-block hidden-md-up"><b>{{ product.name }}</b></span>
                  {% if product.price %}
                    {% if product.special == false %}
                      <span class="text-medium"><b>{{ product.price }}</b></span>
                    {% else %}
                      <span class="text-small"><s>{{ product.price }}</s></span>
                      <span class="text-medium"><b>{{ product.special }}</b></span>
                    {% endif %}
                  {% endif %}
                </div>
              {% endfor %}
            </div>
          </div>
          {% if products.manufacturer|length > 0 %}
            <div class="col-xs-12 bottom-border-gray">
              <div class="row small-space-xs">
                <div class="col-xs-12 col-md"><span class="text-medium"><b>{{ text_manufacturer }}</b></span></div>
                {% for product in products %}
                  <div class="col-xs-12 col-sm">
                    <span class="text-small visible-block hidden-md-up"><b>{{ product.name }}</b></span>
                    <span class="text-medium">{{ product.manufacturer }}</span>
                  </div>
                {% endfor %}
              </div>
            </div>
          {% endif %}
          {% if review_status %}
            <div class="col-xs-12 bottom-border-gray">
              <div class="row small-space-xs">
                <div class="col-xs-12 col-md"><span class="text-medium"><b>{{ text_rating }}</b></span></div>
                {% for product in products %}
                  <div class="col-xs-12 col-sm">
                    <span class="text-small visible-block hidden-md-up"><b>{{ product.name }}</b></span>
                    <div class="rating-box">
                      <i class="far fa-star active_star{{ product.rating }}" aria-hidden="true"></i>
                      <i class="far fa-star active_star{{ product.rating }}" aria-hidden="true"></i>
                      <i class="far fa-star active_star{{ product.rating }}" aria-hidden="true"></i>
                      <i class="far fa-star active_star{{ product.rating }}" aria-hidden="true"></i>
                      <i class="far fa-star active_star{{ product.rating }}" aria-hidden="true"></i>
                    </div>
                    <span class="text-medium visible-block top-margin-x-small">{{ product.reviews }}</span>
                  </div>
                {% endfor %}
              </div>
            </div>
          {% endif %}
          <div class="col-xs-12 bottom-border-gray">
            <div class="row small-space-xs">
              <div class="col-xs-12 col-md"><span class="text-medium"><b>{{ text_weight }}</b></span></div>
              {% for product in products %}
                <div class="col-xs-12 col-sm">
                  <span class="text-small visible-block hidden-md-up"><b>{{ product.name }}</b></span>
                  <span class="text-medium">{{ product.weight }}</span>
                </div>
              {% endfor %}
            </div>
          </div>
          <div class="col-xs-12 bottom-border-gray">
            <div class="row small-space-xs">
              <div class="col-xs-12 col-md"><span class="text-medium"><b>{{ text_dimension }}</b></span></div>
              {% for product in products %}
                <div class="col-xs-12 col-sm">
                  <span class="text-small visible-block hidden-md-up"><b>{{ product.name }}</b></span>
                  <span class="text-medium">{{ product.length }} x {{ product.width }} x {{ product.height }}</span>
                </div>
              {% endfor %}
            </div>
          </div>
          <div class="col-xs-12 bottom-border-gray">
            <div class="row small-space-xs">
              <div class="col-xs-12 col-md"><span class="text-medium"><b>{{ text_summary }}</b></span></div>
              {% for product in products %}
                <div class="col-xs-12 col-sm">
                  <span class="text-small visible-block hidden-md-up"><b>{{ product.name }}</b></span>
                  <span class="text-medium">{{ product.description }} <a href="{{ product.href }}">Leia mais</a></span>
                </div>
              {% endfor %}
            </div>
          </div>
        </div>
      {% else %}
        <a href="{{ continue }}" class="btn-default btn-medium top-margin-medium">
          <span>{{ button_continue }}</span>
        </a>
      {% endif %}
    </div>
  </div>
</section>
<script type="text/javascript">
  {% if success %}
    window.waitEvent('scripts_document', function() {
        notificationMsg('{{ success }}','success');
    });
  {% endif %}
</script>
{{ footer }}
