<div class="product-quick-view js-product-quick-view center-middle-fixed border-gray padding-large shadow-large" data-go-cart="{{ go_cart }}">
  <div class="flex"><!-- Nunca troque a classe "flex" por "row" - Problema de renderização no Chrome -->
    <div class="col-xs-12 col-sm-5">
      <div class="product-img-box">
        <div class="product-image image">
          {% if thumb %}
            {% if img_padrao %}
              <img src="{{ thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" id="image"/>
            {% else %}
              <img src="{{ popup }}" title="{{ heading_title }}" alt="{{ heading_title }}" id="image"/>
            {% endif %}
          {% endif %}
        </div>
        {% if images or videos %}
          <div class="more-images top-margin-medium">
            <div class="more-views">
              <div class="more-views carousel-container slide-product" id="product-quick-view-slide">
                <div class="carousel-wrapper">
                  <ul class="carousel-list">
                    <li class="item-column">
                      <img class="thumb" src="{{ popup }}">
                    </li>
                    {% if images %}
                      {% for image in images %}
                        <li class="item-column cursor-pointer">
                          <img class="thumb" src="{{ image.popup }}" alt="{{ heading_title }}">
                        </li>
                      {% endfor %}
                    {% endif %}

                    {% if videos %}
                      {% for video in videos %}
                        <li class="item-column cursor-pointer" data-type="video" data-iframe="{{ video.iframe }}">
                          <img class="thumb" src="{{ video.thumb }}" alt="{{ heading_title }}">
                        </li>
                      {% endfor %}
                    {% endif %}
                  </ul>
                </div>
              </div>
            </div>
          </div>
        {% endif %}
      </div>
    </div>
    <div class="col-xs-12 col-sm-7">
      <div class="row small-space-xs">
        <div class="col-xs-6">
          <a href="index.php?route=product/product&product_id={{product_idfutura}}" class="link-default text-small text-uppercase">
            <span>{{ text_go_product_page }}</span>
          </a>
        </div>
        <div class="col-xs-6 text-right">
          <a href="#" class="link-default text-small text-uppercase js-product-quick-view-close product-quick-view-close">
            <span>{{ text_close }}</span>
          </a>
        </div>
        <div class="col-xs-12">
          <h1 class="heading-1">{{ product_name }}</h1>
        </div>
        <div class="col-xs-12">
          <p class="text-medium">{{ description }}</p>
        </div>
        {% if exibe_product_colors %}
          <div class="col-xs color">
            <label class="field field-medium">
              <span class="field-label">{{ text_color }}</span>
              <select name="color_id" id="color" class="field-entry">
                {% for color in productColors  %}
                  <option value="{{ color.productcolor_id }}" {{ (color.class == 'false_estoque') ? 'class="text-light" disabled' : '' }} {{ (selected.color_id == color.productcolor_id) ? 'selected' : '' }} >
                    {{ color.description }}
                  </option>
                {% endfor %}
              </select>
              <div class="text-small text-error vertical-padding-x-small js-error-colors"></div>
            </label>
          </div>
        {% endif %}
        {% if exibe_product_sizes %}
          <div class="col-xs size">
            <label class="field field-medium">
              <span class="field-label">{{ text_size }}</span>
              <select name="size_id" id="size" class="field-entry" data-error="{{ text_size_error }}">
                <option value="">{{ text_choose_size }}</option>
                {% for size in productSizes %}
                  <option value="{{ size.productsize_id }}" {{ (size.class == 'false_estoque') ? 'class="text-light" disabled' : '' }} {{ (selected.size_id == size.productsize_id) ? 'selected' : '' }} >
                    {{ size.description }}
                  </option>
                {% endfor %}
              </select>
              <div class="text-small text-error vertical-padding-x-small js-error-sizes"></div>
            </label>
          </div>
        {% endif %}
        {% if exibe_product_specifications %}
          <div class="col-xs specification">
            <label class="field field-medium">
              <span class="field-label">{{ text_title_specification }}</span>
              <select name="specification_id"  id="specification" class="field-entry" data-error="{{ text_specification_error }}">
                <option value="">{{ text_choose_specification }}</option>
                {% for specification in productSpecifications %}
                  <option value="{{ specification.productspecification_id }}" {{ (specification.class == 'false_estoque') ? 'class="text-light" disabled' : '' }} {{ (selected.specification_id == specification.productspecification_id) ? 'selected' : '' }} >
                    {{ specification.description }}
                  </option>
                {% endfor %}
              </select>
              <div class="text-small text-error vertical-padding-x-small js-error-specifications"></div>
            </label>
          </div>
        {% endif %}
        <div class="col-xs-12 vertical-margin-small">
          {% if price %}
            {% if avise_me_status is defined and avise_me_status and quantity <= 0  %}
              <span class="text-aviseme">{{ aviseme_info.price_esgotado }}</span>
            {% else %}
              {% if special == false %}
                {% if exibe_futura_preco_dinamico %}
                  {{ futura_preco_dinamico_produto }}
                {% else %}
                  <span class="bigger-text-medium"><b>{{ price }}</b></span>
                {% endif %}
              {% else %}
                {% if exibe_futura_preco_dinamico %}
                  {{ futura_preco_dinamico_produto }}
                {% else %}
                  <span class="text-medium visible-block">de <strike>{{ price }}</strike> por</span>
                  <span class="bigger-text-medium visible-block"><b>{{ special }}</b></span>
                {% endif %}
              {% endif %}
            {% endif %}
            {% if discounts %}
              <div class="discount">
                {% for discount in discounts %}
                  {{ discount.text_discounts }}
                {% endfor %}
              </div>
            {% endif %}
          {% endif %}
        </div>
        <div class="col-xs-12 bottom-margin-small">
          <div class="content-box flex js-product-container-action">
            {% if avise_me_status is defined and avise_me_status and config_stock_checkout == false %}
              {% if quantity > 0 %}
                <div class="change-qtd js-fator margin-x-small" data-fator="{{ fator_multiplicador }}">
                  <input name="quantity" id="qty" maxlength="4" value="{{ text_minimum_qtd }}" title="{{ text_qty }}" class="input-text qty js-quantity numeric" type="text">
                  <input type="hidden" name="product_id" size="2" value="{{ product_idfutura }}">
                  <button type="button" class="button-qtd-up js-btn-qtd js-up"><i class="fas fa-angle-up"></i></button>
                  <button type="button" class="button-qtd-down js-btn-qtd js-down"><i class="fas fa-angle-down"></i></button>
                </div>
              {% endif %}
            {% else %}
              <div class="change-qtd js-fator margin-x-small" data-fator="{{ fator_multiplicador }}">
                <input name="quantity" id="qty" maxlength="4" value="{{ text_minimum_qtd }}" title="{{ text_qty }}" class="input-text qty js-quantity numeric" type="text">
                <input type="hidden" name="product_id" size="2" value="{{ product_idfutura }}">
                <button type="button" class="button-qtd-up js-btn-qtd js-up"><i class="fas fa-angle-up"></i></button>
                <button type="button" class="button-qtd-down js-btn-qtd js-down"><i class="fas fa-angle-down"></i></button>
              </div>
            {% endif %}
            {% if avise_me_status is defined and avise_me_status and config_stock_checkout == false and quantity <= 0 %}
              <!-- Avisa-me -->
            {% else %}

              <button
                id="btn-cart"
                type="button"
                title="{{ button_cart }}"
                class="btn-default btn-large margin-x-small btn-cart js-btn-cart"
                data-product-id="{{ product_idfutura }}"
                data-grid='{{ selected is defined ? encodeSelected : "" }}'
                data-grid-status="{{ futuragrade_status ? true : false }}"
                {% if product_grid_id %}data-grid-id="{{ product_grid_id }}"{% endif %}
              >
                <span>{{ button_cart }}</span>
              </button>

              <span class="btn-cart-notification js-btn-cart-notification
                {% if notification_value %} have-in-cart{% endif %}">
              </span>

              {% if futura_habilita_lista_desejos %}
                <button type="button" class="js-btn-wishlist btn-default btn-large-square margin-x-small btn-product-wishlist" data-product-id="{{ product_idfutura }}" title="{{ button_wishlist }}">
                  <i class="fas fa-heart"></i>
                </button>
              {% endif %}
              {% if futura_habilita_lista_comparacao %}
                <button type="button" class="js-btn-compare btn-default btn-large-square margin-x-small btn-product-compare" data-product-id="{{ product_idfutura }}" title="{{ button_compare }}">
                  <i class="fas fa-align-right"></i>
                </button>
              {% endif %}
              {% if listapresente_status %}
                {% if customerIsLogged %}
                  <button id="btn-gift-list" type="button" title="Lista de presente" class="btn-default btn-large-square margin-x-small btn-product-listapresente js-btn-gifts-list">
                    <i class="fas fa-gift" aria-hidden="true"></i>
                  </button>
                {% endif %}
              {% endif %}

                {% if exibir_botao_mercado_livre and link_ml %}
                  <div class="full-width">
                    <a href="{{ link_ml }}" class="link-default top-margin-medium" target="_blank">
                      <span class="text-large">{{ button_mercado_livre }}</span>
                      <i class="fas fa-external-link-alt"></i>
                    </a>
                  </div>
                {% endif %}

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

<script>
window.waitEvent('scripts_document', function() {

    $(".numeric").numeric();

    $('.js-product-quick-view-close').on('click', function(event) {
      event.preventDefault();
      removeProductQuickView();
    });

    if ($('.more-images').length > 0) {
      // Slider de imagens adicionais do produto
      $("#product-quick-view-slide").carousel({
        itemsToShow: 3,
        typeScroll: 'single',
        sliderImage: 'full'
      });
      // Trocar imagem da vitrine
      $('#product-quick-view-slide li').on('click', function(event) {
        event.preventDefault();
        if($(this).data('type')=='video'){
          $('.product-image').empty().html($(this).data('iframe'));
        }else{
          var thumbImage = $(this).find('img').attr('src');
          if (thumbImage != $('#image').attr('src')) {
            if($('#image').length){
              $('#image').attr('src',thumbImage);
            }else{
              $('.product-image').empty().html($('<img>').attr({'src': thumbImage, 'id': 'image', 'class': 'thumb full-width'}));
            }
          }
        }
      });
    } // Fim if more-images

    //Hide button to add wishlist in wishlist page
    if(window.location.href.includes('account/wishlist')){
      document.querySelector('.js-btn-wishlist').style.display = 'none';
    };

});
</script>
