<div id="js-order-by-list" data='{{ error_list_observation }}'>

  {% for keyTipo, cartTipo in cartlist %}
    {% for keyLista, lista in cartTipo %}
      <div class="js-order-by-list">
        {% block listaEscolar %}
          {% if lista.isListaEscolar %}

              {% if cartlist|length > 1 %}
                <hr class="bottom-border-gray cartListHr">
              {% endif %}

              <span class="text-large text-dark visible-block top-padding-x-large">{{lista.serie}}</span>
              <span class="text-small text-gray visible-block top-margin-x-small bottom-padding-medium">{{lista.escola}}</span>
              {% if listaescolar_cart_obs %}
                <span class="text-medium text-dark visible-block top-margin-medium bottom-padding-x-small js-school-list-order">{{ listaescolar_cart_obs_title }}</span>
                <input type="text" name="list_cart_obs" class="field-entry field-entry-medium list_cart_obs" value="{{ lista.observation }}" 
                      data-obs-lista-id="{{keyLista}}">
                <label class="error hidden" error-obs-lista-id="{{keyLista}}"></label>
              {% endif %}
          {% endif %}
        {% endblock %}


        {% for keyProduto, product in lista.products %}
          <div id="{{product.product_id}}" class="row no-space-xs vertical-padding-medium js-order-by-item"
               data-code="{{ product.model }}"
               data-name="{{ product.name }}"
               data-quantity="{{ product.quantity }}"
            {% block additionalData %}
              data-unit-price="{{ product.price_value }}"
              data-total-price="{{ product.total_value }}"
              {{ (product.st_valor_value != 'N') ? 'data-value-st="' ~ product.st_valor_value ~ '"' : '' }}
              {{ (product.ipi_valor_value != 'N') ? 'data-value-ipi="' ~ product.ipi_valor_value ~ '"' : '' }}
              {{ (product.fcpst_valor_value != 'N') ? 'data-value-fcpst="' ~ product.fcpst_valor_value ~ '"' : '' }}
            {% endblock %}
          >
            <div class="right-margin-medium" style="width:80px; height:80px;">
              {% if product.thumb %}
                <a href="{{ product.href }}">
                  <img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}" width="80" height="80" class="visible-block">
                </a>
              {% endif %}
            </div>
            <div class="col-xs col-md">
              <div class="content-box bottom-padding-medium right-padding-medium">
                <a href="{{ product.href }}" class="visible-block text-break-word">
                  <span class="visible-block text-small text-gray text-word-wrap bottom-margin-x-small">({{ column_model }} {{ product.model }})</span>
                  <span class="visible-block text-medium text-bold">{{ product.name }}</span>
                  {% block productName %}
                    {% for option in product.option %}
                      <span class="text-small visible-block">{{ option.name }}:
                                  {{ option.value }}
                                </span>
                    {% endfor %}
                  {% endblock %}
                  {% if futuragrade_status is defined and futuragrade_status %}
                    <div class="top-margin-x-small">
                      {% if product.color_description is defined and product.color_description %}
                        <span class="text-small text-gray">{{ product.color_template_description }}</span>
                        <span class="text-small text-bold text-dark right-margin-x-small">{{ product.color_description }}</span>
                      {% endif %}
                      {% if product.size_description is defined and product.size_description %}
                        <span class="text-small text-gray">{{ product.size_template_description }}</span>
                        <span class="text-small text-bold text-dark right-margin-x-small">{{ product.size_description }}</span>
                      {% endif %}
                      {% if product.specification_description is defined and product.specification_description %}
                        <span class="text-small text-gray">{{ product.specification_template_description }}</span>
                        <span class="text-small text-bold text-dark right-margin-x-small">{{ product.specification_description }}</span>
                      {% endif %}
                    </div>
                  {% endif %}

                  {% block reward %}
                    {% if product.reward %}
                      <span>{{ product.reward }}</span>
                    {% endif %}
                  {% endblock %}
                </a>
                {% block itensKit %}
                  {% 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 %}
                {% endblock %}

                {% block price %}
                  <div class="flex top-margin-x-small">
                    {% if product.price %}
                      <div class="right-padding-small">
                        <span class="visible-block text-small text-gray">{{ column_price }}</span>
                        <span class="visible-block text-small {{ product.price_not_discount != product.price ? 'text-dashed text-gray' : 'text-dark text-bold' }}">
                                    {{ product.price_not_discount }}
                                  </span>
                        {% if product.price_not_discount != product.price %}
                          <span class="visible-block text-small text-dark text-bold">{{ product.price }}</span>
                        {% endif %}
                      </div>
                    {% endif %}
                    {% if modulostconf and displaySt %}
                      <div class="left-border-gray horizontal-padding-small">
                        <span class="visible-block text-small text-gray">{{ value_st }}</span>
                        <span class="visible-block text-small text-dark text-bold st_valor">{{ product.st_valor != 'N' ? product.st_valor : '' }}</span>
                      </div>
                      <div class="left-border-gray horizontal-padding-small">
                        <span class="visible-block text-small text-gray">{{ value_ipi }}</span>
                        <span class="visible-block text-small text-dark text-bold ipi_valor">{{ product.ipi_valor != 'N' ? product.ipi_valor : '' }}</span>
                      </div>
                      <div class="left-border-gray left-padding-small">
                        <span class="visible-block text-small text-gray">{{ value_fcpst }}</span>
                        <span class="visible-block text-small text-dark text-bold fcpst_valor">{{ product.fcpst_valor != 'N' ? product.fcpst_valor : '' }}</span>
                      </div>
                    {% endif %}
                  </div>
                  {% if product.brinde %}
                    <a class="text-small top-padding-x-small visible-block" href="{{ product.brinde.href }}">
                      <span class="text-gray">{{ text_gift }}</span>
                      <span class="text-dark text-bold">{{product.brinde.product_name}}</span>
                    </a>
                  {% endif %}
                {% endblock %}
              </div>
            </div>
            <div class="col-xs-12 col-md-width-auto">
              <div class="flex">
                <div class="right-margin-x-large">
                  <form class="js-quantity-form" action="{{ action }}" method="post" enctype="multipart/form-data" data-product-id="{{ product.product_id }}" data-key-tipo="{{ keyTipo }}" data-key-lista="{{ keyLista }}">

                    <div class="flex nowrap-xs full-width rel">
                      <span class="cart-list-stock text-medium text-error {{ product.stock ? 'hidden' : '' }}">***</span>
                      <div class="itembox-quantity-control js-fator" data-fator="{{ product.fator_multiplicador }}" style="max-width: 100px; min-width: 100px; width: 100px;">
                        <button class="itembox-btn btn-down js-btn-qtd js-down" type="button">
                          <i aria-hidden="true" class="fas fa-minus"></i>
                        </button>

                        <input 
                          type="text" 
                          name="quantity[{{ product.key }}]"
                          autocomplete="off" 
                          size="1" 
                          maxlength="4" 
                          value="{{ product.quantity }}" 
                          class="mask-number input-text quantity js-quantity {{ not product.stock ? 'field-entry-error' : ''}}" 
                          style="padding: 0.75rem 0; font-size: 16px;" 
                          onkeydown="if ((event.code === 'Enter') || (event.code === 'NumpadEnter')) event.preventDefault();"
                        >

                        <button class="itembox-btn btn-up js-btn-qtd js-up" type="button">
                          <i aria-hidden="true" class="fas fa-plus"></i>
                        </button>
                      </div>
                    </div>

                  </form>
                </div>

                {% if product.total %}
                  <div class="cart-list-total-price">
                    <span class="visible-block text-small text-gray">{{ column_total }}</span>
                    <span class="js-total visible-block text-medium text-dark text-bold">{{ product.total }}</span>
                  </div>
                {% endif %}

                {% block content_end_product %}{% endblock %}

              </div>
              {% if buy_later_status %}
                <div class="{{  buy_later_status ? 'row  horizontal-padding-medium top-margin-small' : '' }}">
                  <a href="{{ product.remove }}" data-TypeList="{{ product.schoolProduct }}" class="visible-block text-small js-remove-product" title="{{ button_remove }}">
                    <span>{{ button_remove }}</span>
                  </a>

                  <a href="{{ product.buy_later }}" data-remove="{{ product.remove }}" data-TypeList="{{ product.schoolProduct }}" class="visible-block text-small js-buy-later left-margin-small" title="{{ button_buy_later }}">
                    <span>{{ button_buy_later }}</span>
                  </a>

                </div>
              {% else %}
                <a href="{{ product.remove }}" class="visible-block text-small js-remove-product top-margin-small" data-TypeList="{{ product.schoolProduct }}" title="{{ button_remove }}">
                  <span>{{ button_remove }}</span>
                </a>
              {% endif %}

            </div>
          </div>
        {% endfor %}

        {% block vouchers %}

        {% endblock %}
      </div>
    {% endfor %}
  {% endfor %}
</div>