{{ header }}

<script type="application/ld+json">
  {{ arrayProductLd }}
</script>

<section class="container-fluid bottom-padding-large bottom-margin-x-large">
  {{ breadcrumbs }}
  {{ content_top }}
  <div class="row">
    {% if column_left %}
      <div class="col-xs-12 col-sm-4 col-md-3">
        <div class="content-box hidden-md-down">
          {{ column_left }}
        </div>
      </div>
    {% endif %}
    <div class="col-xs-12{% if column_left %} col-sm-8 col-md-9{% endif %}">
      <div
        class="row"
        id="delphi-product-view"
        data-info='{
          "productId": "{{ product_id }}",
          "value": "{{ vValue }}",
          "futuraGradeStatus": "{{ futuragrade_status }}",
          "stock_checkout": "{{ config_stock_checkout }}",
          "tipo_ex_cor": "{{ tipo_ex_cor is defined  ? tipo_ex_cor : 0 }}",
          "typeZoom": "{{ type_zoom }}",
          "facebook": "{{ ferramentas_facebook }}",
          "route2" : "{{ route2 }}"
        }'
      >
        <div class="col-xs-12 col-md">
          <div class="content-box flex center-xs">
            {% if thumb %}
              <div style="cursor:zoom-in;">
                <img src="{{ thumb }}"
                  id="main-image"
                  alt="{{ heading_title }}"
                  data-zoom-image="{{ popup }}"
                  data-index="0"
                  data-w="{{ image_popup_width }}"
                  data-h="{{ image_popup_height }}"
                >
              </div>
            {% endif %}
            <div class="flex full-width top-margin-small{% if images is empty and videos is empty %} hidden{% endif %}" id="thumbnails">
              {% if thumb %}
                <a
                  href="{{ popup }}"
                  class="js-thumbnail right-margin-small"
                  rel="group"
                  data-image="{{ thumb }}"
                  data-zoom-image="{{ popup }}"
                >
                  <img src="assets/img/loading-skeleton.svg"
                    class="load-image visible-block"
                    height="80"
                    data-src="{{ thumb }}"
                  >
                </a>
              {% endif %}
              {% if images is not empty %}
                {% for image in images %}
                  {% if image.thumb and image.popup %}
                    <a href="{{ image.popup }}" class="js-thumbnail right-margin-small" rel="group"
                      data-image="{{ image.thumb }}" data-zoom-image="{{ image.popup }}">
                      <img src="assets/img/loading-skeleton.svg"
                        class="load-image visible-block"
                        height="80"
                        data-src="{{ image.thumb }}"
                        alt="{{ image.thumb }}"
                      >
                    </a>
                  {% endif %}
                {% endfor %}
              {% endif %}
              {% if videos is not empty %}
                {% for video in videos %}
                  <a href="{{ type_zoom == types_zoom.Tp_Fancybox ? video.embed : video.iframe }}"
                    class="js-thumbnail right-margin-small" rel="group" data-type="video">
                    <img src="assets/img/loading-skeleton.svg"
                      class="load-image visible-block"
                      height="80"
                      data-src="{{ video.thumb }}"
                      alt="{{ video.thumb }}"
                    >
                  </a>
                {% endfor %}
              {% endif %}
            </div>
          </div>
        </div>
        <div class="col-xs-12 col-md">
          <div class="content-box">
            <h1 class="heading-1">{{ product_name }}</h1>
            <div class="text-medium text-gray vertical-margin-small">
              {% if model %}
                ({{ text_model }} {{ model }})
              {% endif %}
              {{ stock }}
              {% if manufacturer_product %}
                | {{ text_manufacturer }} <a href="{{ manufacturers }}">{{ manufacturer_product }}</a>
              {% endif %}
            </div>
            {% if review_status %}
              <div class="vertical-middle">
                <i class="far fa-star active_star{{ rating }}"></i>
                <i class="far fa-star active_star{{ rating }}"></i>
                <i class="far fa-star active_star{{ rating }}"></i>
                <i class="far fa-star active_star{{ rating }}"></i>
                <i class="far fa-star active_star{{ rating }}"></i>
              </div>
              <span class="text-medium text-gray vertical-middle">({{ reviews }})</span>
            {% endif %}

            <div class="border-gray horizontal-padding-large bottom-padding-large js-product-container-action top-margin-medium">
              {% if futuragrade_status %}
                {% if exibe_product_colors %}
                  <span class="text-small text-gray visible-block top-margin-large">
                    {{ text_color }} <b>{{ color_selected }}</b>
                  </span>
                  <div class="flex">
                    {% if combobox_colors %}
                      <div class="combobox top-margin-x-small" id="combobox-colors" data-info='{{ productColors|json_encode }}'>
                        <input class="combobox-input" placeholder="{{ text_color }}" value="{{ color_selected }}">
                        <button class="combobox-button-toggle" type="button">
                          <i class="fas fa-caret-down"></i>
                        </button>
                      </div>
                    {% elseif tipo_ex_cor == '0' %}
                      {% for color in productColors %}
                        <button
                          type="button"
                          class="btn-default btn-small-square right-margin-x-small top-margin-x-small {{ color_selected == color.description ? '' : 'btn-outline' }} js-btn-color"
                          data-id="{{ color.productcolor_id }}"
                          data-caracteristica="color_id"
                        >
                        <span {% if not config_stock_checkout and (color.tem_estoque == "N" or color.tem_estoque is not defined) %}class="text-dashed"{% endif %}>{{ color.description }}</span>
                          {% if color.primary_color %}
                            <i style="border: 2px solid #fff;box-shadow: 0 0 2px rgba(0,0,0,.5);
                              background: {% if color.primary_color and color.secundary_color %}
                                linear-gradient(135deg,
                                {{ color.primary_color }} 0%,
                                {{ color.primary_color }} 50%,
                                {{ color.secundary_color }} 50%,
                                {{ color.secundary_color }} 100%);
                              {% else %}
                                {{ color.primary_color }}
                              {% endif %};"
                            >
                            </i>
                          {% endif %}
                        </button>
                      {% endfor %}
                    {% else %}
                      {% for color in productColors %}
                        <div class="right-margin-x-small top-margin-x-small">
                          <img
                            type="image"
                            class="visible-block cursor-pointer load-image js-btn-color"
                            style="{% if color_selected == color.description %}border: 2px solid black;{% endif %} {% if color.tem_estoque == "N" %}opacity:.5;{% endif %}"
                            data-caracteristica="color_id"
                            data-id="{{ color.productcolor_id }}"
                            title="{{ color.description }}"
                            src="assets/img/loading-skeleton.svg"
                            data-src="{{ color.produto_img_princ }}"
                          >
                        </div>
                      {% endfor %}
                    {% endif %}
                  </div>
                {% endif %}

                {% if exibe_product_sizes %}
                  <span class="text-small text-gray visible-block top-margin-large">
                    {{ text_size }} <b>{{ size_selected }}</b>
                  </span>
                  <div class="flex">
                    {% if combobox_sizes %}
                      <div class="combobox top-margin-x-small" id="combobox-sizes" data-info='{{ productSizes|json_encode }}'>
                        <input class="combobox-input" placeholder="{{ text_size }}" value="{{ size_selected }}">
                        <button class="combobox-button-toggle" type="button">
                          <i class="fas fa-caret-down"></i>
                        </button>
                      </div>
                    {% else %}
                      {% for size in productSizes %}
                        <button
                          type="button"
                          class="btn-default btn-small-square right-margin-x-small top-margin-x-small {{ size_selected == size.description ? '' : 'btn-outline' }} js-btn-size"
                          data-id="{{ size.productsize_id }}"
                          data-caracteristica="size_id"
                        >
                          <span{% if not config_stock_checkout and (size.tem_estoque == "N" or size.tem_estoque is not defined) %} class="text-dashed"{% endif %}>
                            {{ size.description }}
                          </span>
                        </button>
                      {% endfor %}
                    {% endif %}
                  </div>
                {% endif %}

                {% if exibe_product_specifications %}
                  <span class="text-small text-gray visible-block top-margin-large">
                    {{ text_title_specification }} <b>{{ specification_selected }}</b>
                  </span>
                  <div class="flex">
                    {% if combobox_specifications %}
                      <div class="combobox top-margin-x-small" id="combobox-specifications" data-info='{{ productSpecifications|json_encode }}'>
                        <input class="combobox-input" placeholder="{{ text_title_specification }}" value="{{ specification_selected }}">
                        <button class="combobox-button-toggle" type="button">
                          <i class="fas fa-caret-down"></i>
                        </button>
                      </div>
                    {% else %}
                      {% for spec in productSpecifications %}
                        <button
                          type="button"
                          class="btn-default btn-small-square right-margin-x-small top-margin-x-small {{ specification_selected == spec.description ? '' : 'btn-outline' }} js-btn-specification"
                          data-id="{{ spec.productspecification_id }}"
                          data-caracteristica="specification_id"
                        >
                        <span{% if not config_stock_checkout and (spec.tem_estoque == "N" or spec.tem_estoque is not defined) %} class="text-dashed"{% endif %}>
                            {{ spec.description }}
                          </span>
                        </button>
                      {% endfor %}
                    {% endif %}
                  </div>
                {% endif %}

                {% if exibe_product_colors or exibe_product_sizes or exibe_product_specifications %}
                  <hr class="bottom-border-gray top-margin-large">
                {% endif %}
              {% endif %}

              {% if pontos %}
                <div class="top-margin-large">
                    <span class="visible-block bigger-text-small text-bold text-dark">{{ pontos }} pontos</span>
                </div>
              {% endif %}

              <div class="flex middle-xs nowrap-xs top-margin-large">
                  <button
                    type="button"
                    class="btn-default btn-large-square btn-full btn-cart js-btn-fidelitycart left-margin-x-small"
                    data-product-id="{{ product_id }}"
                    data-grid='{% if selected is defined %} {{ selected|json_encode }} {% endif %}'
                    data-grid-status="{{ futuragrade_status ? true : false }}"
                  >
                    <i class="fas fa-gift"></i>
                    <span>{{ button_points }}</span>
                  </button>
                <span class="btn-cart-notification js-btn-cart-notification{% if notification_value %} have-in-cart{% endif %}" style="height:56px"></span>
              </div>
            </div>

          </div>
        </div>
        <div class="col-xs-12">
          {% if description %}
            <div>
              <div class="flex between-xs middle-xs heading-2 bottom-border-gray top-padding-large bottom-padding-medium top-margin-x-large bottom-margin-medium
             {{ tipo_descricao_expansivel ? ' js-toggle-product-description cursor-pointer ' : ''}}">
                {{ tab_description }}
                {% if tipo_descricao_expansivel %}
                  <i class="fas fa-plus js-product-description-plus"></i>
                  <i class="fas fa-minus hidden js-product-description-minus"></i>
                {% endif %}
              </div>
              <div class="reset-product-description clearfix {{ tipo_descricao_expansivel ? ' hidden js-product-description-container ' : '' }} ">{{ description }}</div>
            </div>
          {% endif %}

          {% if wg24_l_custom_tab %}
            <div>
              <div class="flex between-xs middle-xs heading-2 bottom-border-gray top-padding-large bottom-padding-medium top-margin-x-large bottom-margin-medium
            {{ tipo_descricao_expansivel ? ' js-toggle-product-description cursor-pointer ' : ''}}">
                {{ tab_title }}
                {% if tipo_descricao_expansivel %}
                  <i class="fas fa-plus js-product-description-plus"></i>
                  <i class="fas fa-minus hidden js-product-description-minus"></i>
                {% endif %}
              </div>
              <div class="clearfix {{ tipo_descricao_expansivel ? ' js-product-description-container hidden ' : '' }}">
                {{ tab_content }}
              </div>
            </div>
          {% endif %}

          {% if review_status %}
            <div class="flex between-xs middle-xs bottom-border-gray vertical-padding-medium top-margin-x-large bottom-margin-medium">
              <div class="top-padding-small">
                <span class="heading-2 vertical-middle bottom-padding-small right-margin-small">{{ reviews }} {{ tab_review }}</span>
                <div class="vertical-middle text-x-large bottom-padding-small">
                  <i class="far fa-star active_star{{ rating }}"></i>
                  <i class="far fa-star active_star{{ rating }}"></i>
                  <i class="far fa-star active_star{{ rating }}"></i>
                  <i class="far fa-star active_star{{ rating }}"></i>
                  <i class="far fa-star active_star{{ rating }}"></i>
                </div>
              </div>
              <button class="btn-default btn-medium js-control-form-review">
                <span>Fazer uma avaliação</span>
              </button>
            </div>
            <div id="review"></div>
            <div class="overlay overlay-black-3 hidden" id="form-review">
              <div class="shadow-small center-middle-fixed background-white padding-large rel" id="form-rating" style="width:100%;max-width:400px;">
                <button class="btn-default btn-white btn-small-square js-control-form-review margin-small abs" style="top:0;right:0;">
                  <i class="fas fa-times"></i>
                </button>
                <span class="text-x-large text-dark visible-block bottom-margin-medium">Faça sua avaliação</span>
                <label class="field field-medium">
                  <span class="field-label">{{ entry_name }}</span>
                  <input class="field-entry" type="text" name="name" value="">
                </label>
                <label class="field field-medium vertical-margin-medium">
                  <span class="field-label">{{ entry_review }}</span>
                  <textarea class="field-entry" name="text" rows="4"></textarea>
                </label>
                <label class="field field-medium vertical-margin-medium" id="field-rating">
                  <label class="field-label">{{ entry_rating }}</label>
                  <div>
                    <label class="far fa-star text-x-large horizontal-padding-x-small">
                      <input class="star-new-rating" type="radio" name="rating" value="1">
                    </label>
                    <label class="far fa-star text-x-large horizontal-padding-x-small">
                      <input class="star-new-rating" type="radio" name="rating" value="2">
                    </label>
                    <label class="far fa-star text-x-large horizontal-padding-x-small">
                      <input class="star-new-rating" type="radio" name="rating" value="3">
                    </label>
                    <label class="far fa-star text-x-large horizontal-padding-x-small">
                      <input class="star-new-rating" type="radio" name="rating" value="4">
                    </label>
                    <label class="far fa-star text-x-large horizontal-padding-x-small">
                      <input class="star-new-rating" type="radio" name="rating" value="5">
                    </label>
                  </div>
                </label>
                <label class="field field-medium bottom-margin-medium">
                  <span class="field-label">{{ entry_captcha }}</span>
                  <div class="flex nowrap-xs middle-xs">
                    <input class="field-entry" type="text" class="captcha" name="captcha" value="">
                    <img src="index.php?route=product/product/captcha" id="captcha" class="left-margin-small">
                  </div>
                </label>
                <div class="flex end-xs">
                  <button type="button" class="btn-default btn-medium btn-outline js-control-form-review right-margin-small">
                    <span>Cancelar</span>
                  </button>
                  <button type="button" class="btn-default btn-medium" id="button-review">
                    <span>Enviar</span>
                  </button>
                </div>
              </div>
            </div>
          {% endif %}

          {% if tags %}
            <div class="text-small text-gray top-margin-x-large top-padding-large">{{ text_tags }}</div>
            {% for key, tag in tags %}
              <a href="{{ tag.href }}" class="btn-default btn-small-square btn-outline right-margin-x-small top-margin-x-small">
                <span>{{ tag.tag }}</span>
              </a>
            {% endfor %}
          {% endif %}
        </div>
      </div>
    </div>
  </div>


  {% if content_bottom %}
    <div class="top-padding-large top-margin-x-large">
      {{ content_bottom }}
    </div>
  {% endif %}

</section>

{% if type_zoom != types_zoom.Tp_Fancybox %}
  <!-- Root element of PhotoSwipe. Must have class pswp. -->
  <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe.
    Its a separate element, as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

      <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
      <div class="pswp__container">
        <!-- dont modify these 3 pswp__item elements, data is added later on -->
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
        <div class="pswp__item"></div>
      </div>

      <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
      <div class="pswp__ui pswp__ui--hidden">

        <div class="pswp__top-bar">

          <!--  Controls are self-explanatory. Order can be changed. -->

          <div class="pswp__counter"></div>

          <button class="pswp__button pswp__button--close" title="Fechar (Esc)"></button>

          <button class="pswp__button pswp__button--share" title="Compartilhar"></button>

          <button class="pswp__button pswp__button--fs" title="Alternar para o modo tela cheia"></button>

          <button class="pswp__button pswp__button--zoom" title="Zoom aumentar/diminuir"></button>

          <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
          <!-- element will get class pswp__preloader--active when preloader is running -->
          <div class="pswp__preloader">
            <div class="pswp__preloader__icn">
              <div class="pswp__preloader__cut">
                <div class="pswp__preloader__donut"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
          <div class="pswp__share-tooltip"></div>
        </div>

        <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
        </button>

        <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
        </button>

        <div class="pswp__caption">
          <div class="pswp__caption__center"></div>
        </div>

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

{{ footer }}
