{{ header }}
<script>
  language.pages.cart = {{languageApp}};

  var
  attention = '{{ attention }}',
  success = '{{ success }}',
  error = '{{ error_warning }}';
</script>
<div class="ftr-container ftr-in-space--n">
  <div class="ftr-shipping">
    <div class="ftr-js-swipe-content-display ftr-in-space--l">
      <p class="ftr-grid--between ftr-text--primary ">
        <span class="ftr-js-swipe-content-display__text">{{ calculate_shipping_method }}</span>
        <i class="material-icons ftr-text--v-middle">&#xE5CC;</i>
      </p>
    </div>
    <div class="ftr-swipe-content ftr-js-swipe-content ftr-js-swipe-content-postcode">
      <i class="material-icons ftr-in-space--m ftr-in-space--v-l ftr-js-close ftr-text--v-middle">&#xE5CD;</i>
      <span class="ftr-text--v-middle">{{ text_shipping_detail }}</span>
      <hr class="ftr-out-space--n">
      <div class="ftr-swipe-content__main ftr-in-space--l">
        <form id="ftr-postcode-form" class="ftr-postcode-form js-form-no-submit js-frete" action="index.php?route=checkout/cart/quote" method="post" autocomplete="off">
          <label class="ftr-field">
            <input type="text" id="postcode" name="postcode" class="ftr-field__entry ftr-js-field__entry mask-cep js-postcode-frete-search" value="{{ postcode }}" maxlength="10">
            <span class="ftr-field__text">{{ entry_postcode }}</span>
          </label>
          {{ dont_know_cep }}
          <button type="submit" class="ftr-btn ftr-js-ripple-effect ftr-background--secondary">
            {{ button_quote }}
          </button>
        </form>
        <div id="shipping-options" class="ftr-shipping-options">
          <img src="assets/img/loading-black.svg" alt="" class="ftr-out-space--t-xl ftr-js-frete-loading ftr-none">
        </div>
      </div>
    </div>

    {% if coupon_status %}
      <div class="ftr-js-swipe-content-display ftr-in-space--h-l ftr-in-space--b-l">
        <p class="ftr-text--primary ftr-grid--between">
          <span class="ftr-js-swipe-content-display__text">{{ apply_coupon_code }}</span>
          <i class="material-icons ftr-text--v-middle">&#xE5CC;</i>
        </p>
      </div>
      <div class="ftr-swipe-content ftr-js-swipe-content ftr-background--light">
        <i class="material-icons ftr-in-space--m ftr-in-space--v-l ftr-js-close ftr-text--v-middle">&#xE5CD;</i>
        <span class="ftr-text--v-middle">{{ text_use_coupon }}</span>
        <hr class="ftr-out-space--n">
        <div class="ftr-swipe-content__main ftr-in-space--l">
          <form id="discount-coupon-form" action="{{ action }}" method="post" enctype="multipart/form-data" autocomplete="off">
            <label class="ftr-field {{ (error_message) ? 'error' : '' }}">
              <input type="text" id="coupon" name="coupon" class="ftr-field__entry ftr-js-field__entry" maxlength="20" value="{{ coupon }}">
              <span class="ftr-field__text">{{ entry_coupon }}</span>
            </label>

            <input type="hidden" name="next" value="coupon">
            <button type="submit" class="ftr-btn ftr-js-ripple-effect ftr-background--secondary">
              {{ button_coupon }}
            </button>
          </form>
        </div>
      </div>
    {% endif %}

    {% block content_middle_prices %}{% endblock %}

    {% if totals %}
      <hr>
      <div class="ftr-grid ftr-grid--start ftr-in-space--t-l ftr-in-space--n">
        {% for total in totals|slice(0, totals|length - 1) %}
          <div class="ftr-out-space--h-l ftr-out-space--b-l">
            <span class="ftr-text--s ftr-block ftr-text--dark">{{ total.title }}</span>
            <span class="ftr-text--s ftr-block ftr-text--grey">{{ total.text }}</span>
          </div>
        {% endfor %}
        <hr>
      </div>
      <div class="ftr-grid ftr-grid--between ftr-in-space--l">
        {% for total in totals|slice(totals|length - 1, 1) %}
          <span class="ftr-text--l ftr-text--secondary">{{ total.title }} {{ total.text }}</span>
        {% endfor %}
        {% if weight %}
          <span class="ftr-text--s ftr-text--grey">{{ weight}}</span>
        {% endif %}
      </div>
    {% endif %}
    <hr>
    {% if valor_minimo %}
      <div class="ftr-in-space--l">
        {{ valor_minimo }}
      </div>
    {% endif %}
  </div>
</div>

  <div class="ftr-before-btn--fixed">
    {% for keyTipo, cartTipo in cartlist %}
      <div class="ftr-grid">
        {% for keyLista, lista in cartTipo %}

          {% if lista.isListaEscolar %}
            <div class="ftr-in-space--l ftr-h--full">
              <span class="ftr-text--dark ftr-block">{{lista.serie}}</span>
              <span class="ftr-text--grey ftr-block">{{lista.escola}}</span>
            </div>
          {% endif %}
          {% for keyProduto, product in lista.products %}
            <div class="ftr-grid__card ftr-product-card {{ not product.stock ? 'error' : '' }}"
            data-code="{{ product.model }}"
            data-name="{{ product.name }}"
            data-quantity="{{ product.quantity }}"
            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 ~ '"' : '' }}>
              <div class="ftr-dropdown ftr-js-dropdown">
                <div class="ftr-js-dropdown__display">
                  <span class="ftr-dropdown__display"></span>
                </div>
                <div class="ftr-dropdown__content ftr-js-dropdown__content" for="more-information-{{ product.model }}">
                  <a class="ftr-dropdown__content__item ftr-js-ripple-effect" href="{{ product.remove }}">{{ button_remove }}</a>
                  <span class="ftr-dropdown__content__item ftr-js-ripple-effect ftr-more-information-display">{{ expand }}</span>
                  <a class="ftr-dropdown__content__item ftr-js-ripple-effect" href="{{ product.href }}">{{ view_product }}</a>
                  {% if buy_later_status %}
                      <a href="{{ product.buy_later }}" data-remove="{{ product.remove }}" class="ftr-dropdown__content__item ftr-word-break ftr-js-ripple-effect ftr-buy-later" title="{{ button_buy_later }}">
                        {{ buy_later }}
                      </a>
                  {% endif %}
                  {% if product.brinde %}
                    <a class="ftr-dropdown__content__item ftr-js-ripple-effect" href="{{ product.brinde.href }}">Ver brinde</a>
                  {% endif %}
                </div>
              </div>

              <div class="ftr-product-card__content">
                {% if product.thumb %}
                  <div class="ftr-product-card__image">
                    <img src="{{ product.thumb }}" alt="{{ product.name }}" title="{{ product.name }}">
                  </div>
                {% endif %}
                <div class="ftr-product-card__info">
                  <span>{{ product.name }}</span>
                  <div class="ftr-js-swipe-content-display">
                    <span class="ftr-js-swipe-content-display__text"><i class="material-icons ftr-text--s">&#xE3C9;</i> <b>{{ product.quantity }} unidades</b> {{ not product.stock ? '<span class="ftr-text--l ftr-text--red">***</span>' : '' }}</span>
                  </div>
                  <div class="ftr-swipe-content ftr-js-swipe-content ftr-background--light">
                    <i class="material-icons ftr-in-space--m ftr-in-space--v-l ftr-js-close ftr-text--v-middle">&#xE5CD;</i>
                    <span class="ftr-text--v-middle">{{ change_quantity }}</span>
                    <hr class="ftr-out-space--n">
                    <div class="ftr-in-space--l">

                      <form action="{{ action }}" method="post" enctype="multipart/form-data" autocomplete="off" class="js-form-no-submit">
                        <span class="ftr-chip ftr-spin ftr-js-ripple-effect ftr-js-btn-qtd ftr-js-down">
                          <i class="material-icons">&#xE15B;</i>
                        </span>
                        <label class="ftr-field ftr-text--center {{ (error_quantity) ? 'error' : '' }}">
                          <input type="text" inputmode="numeric" pattern="[0-9]{1,4}" id="quantity" name="quantity[{{ product.key }}]" class="ftr-field__entry ftr-js-field__entry ftr-text--center ftr-js-quantity mask-quantity" value="{{ product.quantity }}" maxlength="4" data-fator-multiplicador="{{ product.fator_multiplicador }}">
                          <span class="ftr-field__text">{{ column_quantity }}</span>
                          {% if error_quantity %}
                            <span class="ftr-field__error">{{ error_quantity }}</span>
                          {% endif %}
                        </label>
                        <span class="ftr-chip ftr-spin ftr-js-ripple-effect ftr-js-btn-qtd ftr-js-up">
                          <i class="material-icons">&#xE145;</i>
                        </span>
                        <div>
                          <button class="ftr-btn ftr-background--secondary ftr-js-ripple-effect" type="submit" title="{{ button_update }}">
                          {{ apply }}
                          </button>
                        </div>
                      </form>
                    </div>
                  </div>
                {% if product.total %}
                  <div>
                    <span class="ftr-text--secondary"><b>{{ column_total }}: {{ product.total }}</b></span>
                  </div>
                {% endif %}

                {% block content_end_product %}{% endblock %}

                {% if product.brinde %}
                  <div class="ftr-out-space--v-s">
                    <span class="ftr-text--dark">{{ text_gift }}</span>
                    <span class="ftr-text--grey text-bold">{{product.brinde.product_name}}</span>
                  </div>
                {% endif %}
                </div>
              </div>
              <div class="ftr-more-information-content">
                {% if product.itens_kit %}
                  <hr class="ftr-out-space--v-l">
                  <div>
                    {% for itemKitKey, itemKit in product.itens_kit %}
                      <span class="ftr-text--s ftr-block ftr-text--grey">
                        {{ itemKit.quantidade }} - {{ itemKit.descricao }}
                      </span>
                    {% endfor %}
                  </div>
                {% endif %}
                <hr class="ftr-out-space--v-l">
                {% for option in product.option %}
                  <span>{{ option.name }}: {{ option.value }}</span>
                {% endfor %}
                <div>
                  <span class="ftr-text--s ftr-block ftr-text--grey">{{ column_model ~ ' ' ~ product.model }}</span>
                  {% if futuragrade_status is defined and futuragrade_status %}
                    {% if product.color_description is defined %}
                    <span class="ftr-text--s ftr-block ftr-text--grey">{{ (product.color_description) ? product.color_template_description  ~ ': ' ~  product.color_description : '' }}</span>
                  {% endif %}
                  {% if product.size_description is defined %}
                    <span class="ftr-text--s ftr-block ftr-text--grey">{{ (product.size_description) ? product.size_template_description  ~ ': ' ~  product.size_description : '' }}</span>
                  {% endif %}
                  {% if product.specification_description is defined %}
                    <span class="ftr-text--s ftr-block ftr-text--grey">{{ (product.specification_description) ? product.specification_template_description ~ ': ' ~ product.specification_description : '' }}</span>
                    {% endif %}
                  {% endif %}
                </div>
                <hr class="ftr-out-space--v-l">
                <div class="ftr-modify-value ftr-in-space--b-l">
                  {% if exibe_impostos %}
                      <p class="ftr-text--s ftr-block ftr-text--grey">{{ value_st }}: {{ (not product.st_valor == 'N') ? product.st_valor : '' }}</p>
                      <p class="ftr-text--s ftr-block ftr-text--grey">{{ value_ipi }}: {{ (not product.ipi_valor == 'N') ? product.ipi_valor : '' }}</p>
                      <p class="ftr-text--s ftr-block ftr-text--grey">{{ value_fcpst }}: {{ (not product.fcpst_valor == 'N') ? product.fcpst_valor : '' }}</p>
                  {% endif %}
                  {% if product.price %}
                    <p class="ftr-text--s ftr-block ftr-text--grey">{{ column_price }}: {{ product.price }}</p>
                  {% endif %}
                </div>
                <div class="ftr-grid ftr-grid--middle ftr-grid--between ftr-in-space--n">
                  <a href="{{ product.href }}">
                    <span class="ftr-text--upper ftr-text--primary">{{ view_product }}</span>
                  </a>
                  <a href="{{ product.remove }}">
                    <span class="ftr-text--upper ftr-text--primary">{{ button_remove }}</span>
                  </a>
                  <a href="#" class="ftr-more-information-hide ftr-text--v-middle">
                    <i class="material-icons ftr-text--primary">&#xE5CE;</i>
                  </a>
                </div>
              </div>
            </div>
          {% endfor %}
        {% endfor %}
      </div>
    {% endfor %}
    <div class="ftr-h--full ftr-in-space--v-xl ftr-text--center">
      <a href="{{ clear_cart }}" class="ftr-text--red ftr-inline">{{ remove_all_products }}</a>
    </div>
    {% if content_app %}
      <div>
        {{ content_app }}
      </div>
    {% endif %}
  </div>


<div class="ftr-container-btn--fixed ftr-js-container-btn--fixed">
  <a href="{{ checkout }}" class="ftr-btn ftr-h--full ftr-js-ripple-effect ftr-background--primary">{{ button_checkout }}</a>
</div>
{{ footer }}
