<div class="lista-escolar-edicao-produto js-lista-escolar-edicao-produto background-white center-middle-fixed border-gray shadow-large"
style="max-height:600px; height:100vh; z-index:120; width:100vw; max-width:600px; display:flex; flex-direction:column;">
  <div class="bottom-border-gray">
    <div class="flex end-xs padding-small">
      <button
        type="button"
        class="btn-default btn-white btn-small-square js-lista-escolar-edicao-produto-close"
      >
        <i class="fas fa-times"></i>
      </button>
    </div>
    <div class="flex nowrap-xs horizontal-padding-large bottom-padding-large">
      {% if produtos %}
        {% if tipo_edicao == 1 and product_info.thumb %}
          <div class="right-padding-medium">
            <img src="{{product_info.thumb}}" alt="{{product_info.name}}" title="{{product_info.name}}" width="40" height="40" class="visible-block"/>
          </div>
        {% endif %}
        <span class="text-large text-dark">{{ text_descricao_edicao_lista }}</span>
      {% else %}
        <span class="text-large text-dark">{{ text_options_not_available }}</span>
      {% endif %}
    </div>
  </div>

  <div class="horizontal-padding-large" style="overflow-y:auto;">
      {% for key, produto in produtos %}
        <div class="row no-space-xs middle-md vertical-padding-medium bottom-border-gray">
          <div class="col-xs-12 col-md">
            <a href="{{produto.href}}" class="content-box" target="_blank">
              <div class="row small-space-xs middle-xs">
                {% if produto.thumb %}
                  <div class="col-xs-width-auto">
                    <div class="content-box">
                      <img src="{{produto.thumb}}" alt="{{produto.name}}" title="{{produto.name}}" width="60"/>
                    </div>
                  </div>
                {% endif %}
                <div class="col-xs">
                  <div class="content-box">
                    <span class="text-small visible-block">{{produto.model}}</span>
                    <span class="text-medium visible-block text-bold text-break-word">{{produto.name}}</span>
                    {% if futuragrade_status %}
                      {% if produto.color_description %}
                        <span class="text-small visible-block">{{produto.color_template_description}}: {{produto.color_description}}</span>
                      {% endif %}
                      {% if produto.size_description %}
                        <span class="text-small visible-block">{{produto.size_template_description}}: {{produto.size_description}}</span>
                      {% endif %}
                      {% if produto.specification_description %}
                        <span class="text-small visible-block">{{produto.specification_template_description}}: {{produto.specification_description}}</span>
                      {% endif %}
                    {% endif %}
                  </div>
                </div>
              </div>
            </a>
          </div>

          <div class="col-xs-3 col-md-2">
            <div class="content-box">
              <span class="text-small text-bold visible-block">{{ produto.price }}</span>
            </div>
          </div>

          <div class="col-xs-6 col-md-width-auto">
            <div class="field-group">
              <input type="hidden" id="quantidade{{produto.product_id}}" autocomplete="off" value="{{ produto.quantity == 0 ? 1 : produto.quantity }}">
              <button type="submit" data-product-id="{{produto.product_id}}" onclick="edicaoListaEscolar('{{tipo_edicao}}','{{produto.product_id}}','{{key}}','{{product_info.key}}');" class="btn-default btn-medium-square left-margin-small btn-cart-list-quantity" title="{{button_update_quantidade}}">
                <span>{{ tipo_edicao == 1 ? 'Substituir' : tipo_edicao == 2 ? 'Restaurar' : 'Adicionar' }}</span>
              </button>
            </div>
          </div>
        </div>
      {% endfor %}
  </div>
</div>
