<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  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 id='produto' class="text-large text-dark">{{ text_descricao_edicao_lista }}</span>
        
 	      <div class="col-xs-12 col-sm hidden-sm-down js-header__search-container">
					<div class="content-box rel">
						<label class="header__search-field js-form-search">
							<input id = 'searchText' type="text" name="search" class="header__search-entry js-header__search-entry" placeholder="Escreva para pesquisar!" value="{{ search }}" autocomplete="off"/>
							<button id = 'btnSearch' type="button" class="btn-default btn-small-square header__search-btn js-header__search-btn light" title="Pesquisar">
								<i class="fas fa-search" aria-hidden="true"></i>
							</button>
						</label>
					</div>
				</div>
      {% else %}
        <span class="text-large text-dark">{{ text_options_not_available }}</span>
      {% endif %}
      
    </div>
  
  </div>


        
  <div class="horizontal-padding-large js-product-list" style="overflow-y:auto;">
      {% for key, produto in produtos %}
        <div class="row no-space-xs middle-md vertical-padding-medium bottom-border-gray js-product-item">
          <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>

<script type="text/javascript">
const produtoHabilita = document.getElementById('produto');

if(produtoHabilita){

const searchBtn = document.getElementById('btnSearch');
const searchInput = document.getElementById('searchText');
const productItems = document.querySelectorAll('.js-product-item');

searchBtn.addEventListener('click', function() {
    const searchText = searchInput.value.trim().toLowerCase();
    
    productItems.forEach(function(item) {
      
        const productName = item.querySelector('.text-medium.text-bold').textContent.trim().toLowerCase();
      
        if (productName.includes(searchText)) {

            item.style.display = 'block';
            
        } else {

            item.style.display = 'none';
           
        }
    });
});
};


</script>