{{ header }}
<section class="container-fluid" id="checkout-cart-data" data-checkout-cart='{
  "success" : "{{ success ? success : '' }}",
  "attention" : "{{ attention ? attention : '' }}",
  "error_warning" : "{{ error_warning ? error_warning : '' }}",
    "action" : "{{ action }}",
    "shipping_method" : "{{ shipping_method }}",
    "button_shipping" : "{{ button_shipping }}",
    "checkout" : "{{ checkout }}"
  }'>
  {{ breadcrumbs }}
  <div class="row">
    <div class="col-xs-12">
      <div class="content-box">
        <h2 class="heading-1">{{ heading_title }}
          {{ (weight) ? " (" ~ weight ~ ")" : '' }}</h2>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">
      <div class="content-box">

        <div class="flex bottom-xs">
          <label class="field field-medium" style="width:120px;">
            <label class="field-label">{{ organize }}</label>
            <select class="field-entry js-order-by-option" name="select_order_by">
              <option data-type="number" value='code'>{{ code }}</option>
              <option data-type="text" value='name' selected="selected">{{ name }}</option>
              <option data-type="number" value='quantity'>{{ quantity }}</option>
              {% block addictionalOptions %}
                <option data-type="number" value='unit-pontos'>{{ unit_price }}</option>
                <option data-type="number" value='total-pontos'>{{ total }}</option>
              {% endblock %}
            </select>
          </label>
          <label class="radio radio-medium left-margin-medium" style="width:108px;">
            <input type="radio" name="order_by" class="radio-entry js-order-by-sequence" value="asc" checked="checked">
            <span class="radio-text js-order-by-sequence-text-asc">{{ a_z }}</span>
          </label>
          <label class="radio radio-medium" style="width:108px;">
            <input type="radio" name="order_by" class="radio-entry js-order-by-sequence" value="desc">
            <span class="radio-text js-order-by-sequence-text-desc">{{ z_a }}</span>
          </label>
        </div>

        {% block facebookTrack %}{% endblock %}

        {% for keyTipo, cartTipo in cartlist %}
          {% for keyLista, lista in cartTipo %}
            <div class="js-order-by-list">
              {% block listaEscolar %}{% 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-pontos="{{ product.pontos }}"
                  data-total-pontos="{{ product.total }}"
                  {% 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">
                        <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 %}{% 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 %}{% endblock %}
                      </a>
                      {% block itensKit %}{% endblock %}

                      {% block price %}
                        <div class="flex top-margin-x-small">
                          <div class="right-padding-small">
                            <span class="visible-block text-small text-gray">{{ column_pontos }}</span>
                            <span class="visible-block text-small text-dark text-bold">{{ product.pontos }}</span>
                          </div>
                        </div>
                      {% 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="numeric input-text quantity js-quantity {{ not product.stock ? 'field-entry-error' : ''}}" style="padding: 0.75rem 0; font-size: 16px;">

                              <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>
                      <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>
                    </div>
                    <a href="{{ product.remove }}" class="visible-block text-small vertical-padding-small top-margin-small js-remove-product" title="{{ button_remove }}">
                      <span>{{ button_remove }}</span>
                    </a>
                  </div>
                </div>
              {% endfor %}

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

      </div>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      <div class="js-fixed-on-top">
        {% block coupon %}{% endblock %}

          <div class="totals paper bottom-margin-medium padding-large">
            <div class="js-totals bottom-padding-x-small">
            {% for total in totals %}
              <div class="flex nowrap-xs between-xs middle-xs vertical-padding-x-small totals-value">
                <span class="text-medium text-gray right-padding-x-small">{{ total.title }}</span>
                <span class="text-medium text-dark text-bold text-nowrap left-padding-x-small">{{ total.text }}</span>
              </div>
            {% endfor %}
          </div>

          {% block buttonCheckout %}
            <button id="button-checkout" type="button" title="{{ button_checkout }}" {{ (disabled_checkout) ? 'disabled' : '' }} class="btn-default btn-large btn-full top-margin-medium btn-proceed-checkout btn-checkout">
              <span>{{ button_checkout }}</span>
            </button>
          {% endblock %}

        </div>
        <a href="{{ clear_cart }}" class="link-default text-medium visible-block text-center padding-small vertical-padding-medium">
          <span>{{ remove_all_products }}</span>
        </a>
      </div>
    </div>
  </div>
</section>

{{ content_bottom }}
{{ footer }}
