{{ 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 }}"
  }'
  data-google-analytics='{{ google_analytics }}'
  data-wishlist='{{ wishlist_data }}'
  >

  {{ 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">
      {% if content_top %}
        {{ content_top }}
        <hr class="bottom-border-gray">
      {% endif %}
    </div>

    {% if column_left %}
      <div class="col-xs-12 col-sm-6 col-md-4">
        {{ column_left }}
      </div>
    {% endif %}

    {% if column_left %}
      <div {{ column_left ? 'class="col-xs-12 col-sm-6 col-md-8"' : '' }}>
    {% endif %}

      <div  {{ column_left ? 'class="col-xs-12"' : 'class="col-xs-12 col-sm-6 col-md-8"'}}>
        <div class="content-box">
      {% if button_filter_status == 'enable' %}
          <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 %}
                  {% if modulostconf and displaySt %}
                    <option data-type="number" value='value-st' class="select-order-cart-list-value-st">{{ value_st }}</option>
                    <option data-type="number" value='value-ipi' class="select-order-cart-list-value-ipi">{{ value_ipi }}</option>
                    <option data-type="number" value='value-ipi' class="select-order-cart-list-value-ipi">{{ value_fcpst }}</option>
                  {% endif %}
                  <option data-type="number" value='unit-price'>{{ unit_price }}</option>
                  <option data-type="number" value='total-price'>{{ 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>
         {% endif %} 
          {# 
            {% block facebookTrack %}
              {% if displayFacebookTrack %}
                <script>
                  window.waitEvent('scripts', function () {
                    fbq('track', 'AddToCart', {
                      content_type: 'product_group',
                      content_ids: {{ facebook_keys }},
                      value: {{ facebook_total }},
                      currency: 'BRL'
                    });
                  });
                </script>
              {% endif %}
            {% endblock %}  
          #}

          {{ cartListRender }}

          {% block vouchers %}
            {% for vouchers in vouchers %}
              <div class="row no-space-xs middle-md vertical-padding-medium">
                <div class="horizontal-padding-large bottom-padding-large col-xs-12 col-md-width-auto text-left">
                  <a href="{{ vouchers.remove }}" class="link-default text-small" title="{{ button_remove }}">
                    <i class="fas fa-trash text-medium" aria-hidden="true"></i>
                    <span class="text-uppercase">{{ button_remove }}</span>
                  </a>
                </div>
                <div class="col-xs">
                  <div class="content-box">
                            <span class="text-medium visible-block">
                              <b>{{ vouchers.description }}</b>
                            </span>
                  </div>
                </div>

                <div class="col-xs-6 col-md-width-auto">
                  <div class="content-box vertical-margin-small">
                            <span class="text-medium visible-block">
                              <b>{{ vouchers.amount }}</b>
                            </span>
                  </div>
                </div>
                <div class="col-xs-6 col-md-width-auto">
                  <div class="cart-list-total-price vertical-margin-small">
                            <span class="text-medium visible-block">
                              <b>{{ vouchers.amount }}</b>
                            </span>
                  </div>
                </div>
              </div>
            {% endfor %}
          {% endblock %}
          {% block content_end_list_products %}{% endblock %}
        </div>
      </div>
      <div {{ column_left ? 'class="col-xs-12"' : 'class="col-xs-12 col-sm-6 col-md-4"'}}>
        <div class="js-fixed-on-top">
          {% block coupon %}
            {% if coupon_status %}
              <div class="discount paper bottom-margin-medium padding-large">
                <form id="discount-coupon-form" action="{{ action }}" method="post" enctype="multipart/form-data">
                  <label class="field field-medium">
                    {# título configurável do cupom vindo do admin #}
                    <span class="field-label">{{ coupon_title }}</span>
                    <div class="field-entry-group">
                      <div class="flex-grow-1">
                        <input type="text" name="coupon" class="field-entry field-entry-medium" maxlength="20" placeholder="{{ entry_coupon }}" value="{{ coupon }}">
                      </div>
                      <div>
                        <button type="submit" class="btn-default btn-medium-square" value="{{ button_coupon }}">
                          <span>{{ button_coupon }}</span>
                        </button>
                      </div>
                    </div>
                  </label>
                </form>
              </div>
            {% endif %}

            {% if not freeShippingMethodOnly %}
              <div class="shipping paper bottom-margin-medium padding-large">
                <div id="postcode-form" class="js-frete">
                  <label class="field field-medium">
                    <span class="field-label">{{ text_shipping_detail }}</span>
                    <div class="field-entry-group">
                      <div class="flex-grow-1">
                        <input 
                          type="text" 
                          name="postcode" 
                          id="postcode" 
                          class="field-entry field-entry-medium numeric mask-cep js-postcode-frete-search" 
                          maxlength="9" 
                          placeholder="{{ entry_postcode }}" 
                          value="{{ postcode }}"
                        >
                      </div>
                      <div>
                        <button id="btn-postcode" type="button" class="btn-default btn-medium-square">
                          <span>{{ button_quote }}</span>
                        </button>
                      </div>
                    </div>
                  </label>
                  <input type="hidden" name="zone_id" value="">
                  <a href="#" class="text-small visible-inline-block vertical-padding-small js-postcode-address">{{ text_nao_sei_meu_cep }}</a>
                </div>
                <div id="postcode-result" class="top-border-gray top-margin-medium top-padding-medium hidden" style="position:relative"></div>
              </div>
            {% endif %}
          {% endblock %}

          <div class="totals paper bottom-margin-medium padding-large">
            {% if totals %}
              <div class="js-totals bottom-padding-x-small bottom-margin-medium">
                {% 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>
            {% endif %}
        
            {% block buttonCheckout %}
              <div class="min-value-container">
                {{ valor_minimo }}
              </div>
              {% if continue_button_status  %}
                <a id="continue_buying" class="btn-default btn-large bottom-margin-medium btn-full">
                  <span>{{ button_continue }}</span>
                </a>
              {% endif %}
              <button id="button-checkout" type="button" title="{{ button_checkout }}" class="btn-default btn-large btn-full btn-proceed-checkout btn-checkout" {{ valor_minimo ? 'disabled' : '' }}>
                <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>

    {% if column_left %}
      </div>
    {% endif %}

    <div class="col-xs-12">
      {% if content_bottom %}
        <hr class="bottom-border-gray">
        {{ content_bottom }}
      {% endif %}
    </div>
  </div>

</section>

{{ footer }}