{{ header }}
<div class="ftr-container ftr-in-space--n" data-info='{"success": "{{ success }}", "error": "{{ error_warning }}"}'>
  <div class="ftr-in-space--l">
    {% if logo_lista %}
      <img src="{{logo_lista}}" width="120">
    {% endif %}
    <span class="ftr-text--m ftr-block ftr-text--dark">{{ subtitulo_lista }}</span>
    <span class="ftr-text--s ftr-block ftr-text--grey">{{ endereco_escola }}</span>
  </div>
  <hr>
  <div class="ftr-out-space--l">
    <span class="ftr-text--l ftr-text--secondary">{{ text_total_lista }} {{ total_lista }}</span>
  </div>
</div>

<div class="ftr-grid ftr-before-btn--fixed">
  {% for produto in produtos %}
    <div class="ftr-grid__card ftr-product-card">
      <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-{{ produto.model }}">

          <span data-product-session-key="{{produto.key}}" data-swipe-content="tipo-edicao" data-tipo-edicao="{{value_tipo_add}}" class="ftr-dropdown__content__item ftr-js-swipe-content-display ftr-js-ripple-effect btn-listaescolar-editar" data-swi style="white-space:nowrap;">{{ button_add_categoria }}</span>


          <span data-product-session-key="{{produto.key}}" data-swipe-content="tipo-edicao" data-tipo-edicao="{{value_tipo_troca}}" class="ftr-dropdown__content__item ftr-js-swipe-content-display ftr-js-ripple-effect btn-listaescolar-editar">{{ button_troca_produto }}</span>

          <a href="{{ produto.remove }}" class="ftr-dropdown__content__item ftr-js-ripple-effect">{{ button_remove }}</a>
          <span class="ftr-dropdown__content__item ftr-js-ripple-effect ftr-more-information-display">Expandir</span>
          <a class="ftr-dropdown__content__item ftr-js-ripple-effect" href="{{ produto.href }}">Ver produto</a>
        </div>
      </div>
      <div class="ftr-product-card__content">
        {% if produto.thumb %}
          <div class="ftr-product-card__image">
            <img src="{{ produto.thumb }}" alt="{{ produto.name }}" title="{{ produto.name }}">
          </div>
        {% endif %}
        <div class="ftr-product-card__info">
          <span>{{ produto.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>{{ produto.quantity }} unidades</b> {{ not produto.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">Alterar quantidade</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[{{ produto.key }}]" class="ftr-field__entry ftr-js-field__entry ftr-text--center ftr-js-quantity mask-quantity" value="{{ produto.quantity }}" maxlength="4" data-fator-multiplicador="{{ produto.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">
                    Aplicar
                  </button>
                </div>
              </form>
            </div>
          </div>
        {% if produto.total %}
          <div>
            <span class="ftr-text--secondary"><b>{{ column_total }}: {{ produto.total }}</b></span>
          </div>
        {% endif %}
        </div>
      </div>
      <div class="ftr-more-information-content">
        <hr class="ftr-out-space--v-l">
        <div>
          <span class="ftr-text--s ftr-block ftr-text--grey">{{ column_model ~ ' ' ~ produto.model }}</span>
          {% if futuragrade_status is defined and futuragrade_status %}
            {% if produto.color_description is defined %}
              <span class="ftr-text--s ftr-block ftr-text--grey">{{ (produto.color_description) ? produto.color_template_description ~ ': ' ~ produto.color_description : '' }}</span>
            {% endif %}
            {% if produto.size_description is defined %}
              <span class="ftr-text--s ftr-block ftr-text--grey">{{ (produto.size_description) ? produto.size_template_description ~ ': ' ~ produto.size_description : '' }}</span>
            {% endif %}
            {% if produto.specification_description is defined %}
              <span class="ftr-text--s ftr-block ftr-text--grey">{{ (produto.specification_description) ? produto.specification_template_description ~ ' ' ~ produto.specification_description : '' }}</span>
            {% endif %}
          {% endif %}
        </div>
        <hr class="ftr-out-space--v-l">
        <div class="ftr-modify-value ftr-in-space--b-l">
          {% if produto.price %}
            <p class="ftr-text--s ftr-block ftr-text--grey">{{ column_price }}: {{ produto.price }}</p>
          {% endif %}
        </div>
        <div class="ftr-grid ftr-grid--middle ftr-grid--between ftr-in-space--n">
          <a href="{{ produto.href }}">
            <span class="ftr-text--upper ftr-text--primary">Ver produto</span>
          </a>
          <a href="{{ produto.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>
      {% if not produto.stock %}
      <div class="ftr-notification--warning ftr-in-space--m ftr-out-space--t-m">
        {{text_produto_sem_estoque}}
			</div>
      {% endif %}
    </div>
	{% endfor %}
</div>

<div class="ftr-swipe-content ftr-js-swipe-content ftr-background--light" id="tipo-edicao">
  <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" id="tipo-edicao-title"><img src="assets/img/loading-black.svg" alt=""></span>
  <hr class="ftr-out-space--n">
  <div class="ftr-swipe-content__main ftr-in-space--l" id="tipo-edicao-content">
    <img src="assets/img/loading-black.svg" alt="">
  </div>
</div>

<div class="ftr-container-btn--fixed ftr-js-container-btn--fixed">
  <button type="button" class="ftr-btn ftr-h--full ftr-js-ripple-effect ftr-js-swipe-content-display ftr-background--primary">
    <span>{{ button_fechar_lista }}</span>
  </button>
  <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">Confirmação</span>
    <hr class="ftr-out-space--n">
    <div class="ftr-swipe-content__main ftr-swipe-content__main--with-btn ftr-in-space--v-l">
      Você deseja adicionar os itens da lista escolar no carrinho?
    </div>
    <div class="ftr-swipe-content__btn ftr-js-close">
      <button id="add-lista-to-cart" data-link-addtocart="{{ link_addToCart }}" data-confirm-cart="{{ text_confirm_cart }}" type="button" class="ftr-btn ftr-h--full ftr-js-ripple-effect ftr-background--primary">
        <span>Adicionar ao carrinho</span>
      </button>
    </div>
  </div>
</div>

{{ footer }}
