{{ header }}
{{ content_app }}
<script>
  language.pages.product = {{languageApp}};
</script>
<div
  id="product"
  class="ftr-before-btn--fixed ftr-background--light ftr-relative"
  data-product-id="{{ product_id }}"
  data-grade="{{ (futuragrade_status) ? true : false }}"
  data-selected='{{ (selected is defined) ? selected|json_encode() : '' }}'>
  {% if in_wishlist is defined %}
    <i class="material-icons ftr-wishlist-icon ftr-text--grey ftr-absolute {{ (in_wishlist) ? 'in' : '' }}" data-product-id="{{ product_id }}">{{ (in_wishlist) ? '&#xE87D;' : '&#xE87E;' }}</i><!-- favorite border -->
  {% endif %}
  <div class="ftr-scroller">
    {% if app_images %}
      {% for key, image in app_images %}
        {% if image.embed %}
          <img src="{{ image.thumb }}" alt="{{ heading_title }}" style="width:136px; height:136px!important;" data-index="{{ key }}" data-type="video" data-video="{{ image.iframe }}">
        {% else %}
          <img src="{{ image.thumb }}" alt="{{ heading_title }}" data-zoom-image="{{ image.popup }}" data-w="{{ image_popup_width }}" data-h="{{ image_popup_height }}" data-index="{{ key }}">
        {% endif %}
      {% endfor %}
    {% endif %}
  </div>
  <div class="ftr-in-space--h-l">
    <h1 class="ftr-text--m ftr-out-space--v-l">{{ heading_title }}</h1>

    {% if pontos and not aviseme %}
      <div class="ftr-out-space--b-l">
        <span class="ftr-text--secondary ftr-text--xl ftr-text-bold">
          {{ pontos }} pontos
        </span>
      </div>
    {% endif %}
  </div>

  {% if exibe_product_colors or exibe_product_sizes or exibe_product_specifications %}
    <hr>
    <div class="ftr-in-space--l">
  {% endif %}

    {% if exibe_product_colors %}
      <div class="ftr-js-swipe-content-display">
        <span class="ftr-text--grey ftr-text--xs">{{ text_color }}</span>
        <p class="ftr-text--bold ftr-grid ftr-in-space--n ftr-out-space--b-s ftr-grid--middle">
          <span class="ftr-js-swipe-content-display__text">{{ color_selected }}</span>
          <i class="material-icons ftr-text--v-middle">&#xE5CC;</i>
        </p>
      </div>
      <div class="ftr-swipe-content ftr-js-swipe-content ftr-background--light">
        <div class="ftr-grid ftr-grid--middle ftr-grid--start ftr-in-space--n">
          <i class="material-icons ftr-in-space--m ftr-in-space--v-l ftr-js-close ftr-text--bold">&#xE5CD;</i>
          <span class="ftr-text--bold">{{ text_color }}</span>
        </div>
        <hr>
        <div class="ftr-swipe-content__main">
          {% for color in productColors %}
            <div class="ftr-flex">

              <input
                type="radio"
                id="cor_{{ color.productcolor_id }}"
                name="cor"
                class="ftr-radio ftr-js-option-color-grid"
                {{ (color.tem_estoque == 'N' and not config_stock_checkout) ?  'disabled' : '' }}
                data-id="{{ color.productcolor_id }}"
                data-caracteristica="color_id"
                {{ (color_selected == color.description) ? 'checked' : '' }}
              >
              <label class="ftr-radio-label {{ (tipo_ex_cor) ? 'ftr-option-color-grid--image' : '' }}" for="cor_{{ color.productcolor_id }}">
                <span class="ftr-radio-label__text">{{ color.description }}</span>
                {% if tipo_ex_cor %}
                  <img src="{{ color.produto_img_princ }}" alt="{{ color.description }}">
                {% endif %}
              </label>

              {% if color.primary_color and color.secundary_color %}
              <div style="width:20px; height: 20px; background: linear-gradient(135deg, {{ color.primary_color }} 0%, {{ color.primary_color }} 50%, {{ color.secundary_color }} 50%, {{ color.secundary_color }} 100%);box-shadow: 0 0 2px rgba(0,0,0,.5)"></div>
              {% elseif color.primary_color %}
                <div style="width:20px; height: 20px; background: {{ color.primary_color }};box-shadow: 0 0 2px rgba(0,0,0,.5)"></div>
              {% endif %}

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

    {% if exibe_product_sizes %}
      <div class="ftr-js-swipe-content-display">
        <span class="ftr-text--grey ftr-text--xs">{{ text_size }}</span>
        <p class="ftr-text--bold ftr-grid ftr-in-space--n ftr-out-space--b-s ftr-grid--middle">
          <span class="ftr-js-swipe-content-display__text">{{ (size_selected) ? size_selected : choose_size }}</span>
          <i class="material-icons ftr-text--v-middle">&#xE5CC;</i>
        </p>
      </div>
      <div class="ftr-swipe-content ftr-js-swipe-content ftr-background--light">
      <div class="ftr-grid ftr-grid--middle ftr-grid--start ftr-in-space--n">
        <i class="material-icons ftr-in-space--m ftr-in-space--v-l ftr-js-close ftr-text--bold">&#xE5CD;</i>
        <span class="ftr-text--bold">{{ text_size }}</span>
      </div>
        <hr>
        <div class="ftr-swipe-content__main">
          {% for size in productSizes %}
            <div class="ftr-grid ftr-in-space--n">

              <input
                type="radio"
                id="tamanho_{{ size.productsize_id }}"
                name="tamanho"
                class="ftr-radio ftr-js-option-color-grid"
                {{ (size.tem_estoque == 'N' and not config_stock_checkout) ?  'disabled' : '' }}
                data-id="{{ size.productsize_id }}"
                data-caracteristica="size_id"
                {{ (size_selected == size.description) ? 'checked' : '' }}
              >
              <label class="ftr-radio-label" for="tamanho_{{ size.productsize_id }}">
                <span class="ftr-radio-label__text">{{ size.description }}</span>
              </label>

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

    {% if exibe_product_specifications %}
      <div class="ftr-js-swipe-content-display">
        <span class="ftr-text--grey ftr-text--xs">{{ text_title_specification|replace({':': ''}) }}</span>
        <p class="ftr-text--bold ftr-grid ftr-in-space--n ftr-grid--middle">
          <span class="ftr-js-swipe-content-display__text">{{ (specification_selected) ? specification_selected : choose_specification }}</span>
          <i class="material-icons ftr-text--v-middle">&#xE5CC;</i>
        </p>
      </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--bold">&#xE5CD;</i>
        <span class="ftr-text--bold">{{ text_title_specification|replace({':': ''}) }}</span>
        <hr>
        <div class="ftr-swipe-content__main">
          {% for specification in productSpecifications %}
            <div class="ftr-grid ftr-in-space--n">

              <input
                type="radio"
                id="especificacao_{{ specification.productspecification_id }}"
                name="especificacao"
                class="ftr-radio ftr-js-option-color-grid"
                {{ (specification.tem_estoque == 'N' and not config_stock_checkout) ?  'disabled' : '' }}
                data-id="{{ specification.productspecification_id }}"
                data-caracteristica="specification_id"
                {{ (specification_selected == specification.description) ? 'checked' : '' }}
              >
              <label class="ftr-radio-label" for="especificacao_{{ specification.productspecification_id }}">
                <span class="ftr-radio-label__text">{{ specification.description }}</span>
              </label>

            </div>
          {% endfor %}
        </div>
      </div>
    {% endif %}
  {% if exibe_product_colors or exibe_product_sizes or exibe_product_specifications %}</div>{% endif %}
  {# begin #}
  {% if produto_brinde %}
    <hr>
    <div class="ftr-in-space--l">
      <a href="{{ produto_brinde.href }}">
        <div class="ftr-product-card__content">
          <div class="ftr-product-card__image">
            <img src="{{ produto_brinde.thumb }}" alt="{{ produto_brinde.product_name }}" title="{{ produto_brinde.product_name }}">
          </div>
          <div class="ftr-product-card__info">
            <span class=" ftr-text--primary text-x-small">{{ text_gift }}</span>
            <span class="ftr-text--dark  ftr-block">{{ produto_brinde.product_name }}</span>
          </div>
        </div>
      </a>
    </div>
  {% endif %}
  {# end #}
  {% if review_status %}
    <hr>

    <div class="ftr-grid ftr-grid--between ftr-grid--middle ftr-in-space--n ftr-out-space--v-l">
      <div class="ftr-rating ftr-in-space--h-l ftr-text--s ftr-line-height--none">
        <i class="material-icons ftr-text--l ftr-active-star{{ rating }}">&#xE838;</i>
        <i class="material-icons ftr-text--l ftr-active-star{{ rating }}">&#xE838;</i>
        <i class="material-icons ftr-text--l ftr-active-star{{ rating }}">&#xE838;</i>
        <i class="material-icons ftr-text--l ftr-active-star{{ rating }}">&#xE838;</i>
        <i class="material-icons ftr-text--l ftr-active-star{{ rating }}">&#xE838;</i>
      </div>
      <div class="ftr-in-space--h-l">
        <a href="#" class="ftr-text--primary ftr-js-swipe-content-display">
          <span>{{ view_comments }}</span>
          <i class="material-icons ftr-text--v-middle">&#xE5CC;</i>
        </a>
        <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-bold ftr-text--v-middle">&#xE5CD;</i>
          <span class="ftr-text-bold ftr-text--v-middle">{{ comments }}</span>
          <hr>
          <div class="ftr-swipe-content__main ftr-swipe-content__main--with-btn">
            <div id="review"></div>
            <form id="form-review" class="ftr-hidden js-form-no-submit" action="index.php?route=product/product/write&product_id={{ product_id }}" method="post" autocomplete="off">

              <label class="ftr-field">
                <input type="text" id="name" name="name" class="ftr-field__entry ftr-js-field__entry" value="{{ name }}" minlength="3" maxlength="25">
                <span class="ftr-field__text">{{ entry_name }}</span>
              </label>
              <label class="ftr-field">
                <textarea id="text" name="text" rows="4" class="ftr-field__entry ftr-js-field__entry" data-value="{{ text }}" minlength="25" maxlength="1000">{{ text }}</textarea>
                <span class="ftr-field__text">{{ entry_review }}</span>
              </label>

              <p class="ftr-block ftr-out-space--v-l">{{ text_note }}</p>
              <b class="ftr-block">{{ entry_rating }}</b>

              <div class="ftr-rating-change">
                <label class="material-icons ftr-rating-change__label ftr-active-star1">
                  &#xE838;
                  <input type="radio" name="rating" value="1" class="ftr-rating-change__input ftr-hidden" checked>
                </label>
                <label class="material-icons ftr-rating-change__label ftr-active-star1">
                  &#xE838;
                  <input type="radio" name="rating" value="2" class="ftr-rating-change__input ftr-hidden">
                </label>
                <label class="material-icons ftr-rating-change__label ftr-active-star1">
                  &#xE838;
                  <input type="radio" name="rating" value="3" class="ftr-rating-change__input ftr-hidden">
                </label>
                <label class="material-icons ftr-rating-change__label ftr-active-star1">
                  &#xE838;
                  <input type="radio" name="rating" value="4" class="ftr-rating-change__input ftr-hidden">
                </label>
                <label class="material-icons ftr-rating-change__label ftr-active-star1">
                  &#xE838;
                  <input type="radio" name="rating" value="5" class="ftr-rating-change__input ftr-hidden">
                </label>
              </div>

              {% if google_captcha %}
                <div class="g-recaptcha" data-sitekey="{{ site_key }}"></div>
              {% else %}
                <img id="captcha-image-review" src="index.php?route=product/product/captcha" alt="captcha" class="ftr-out-space--t-l">

                <label class="ftr-field">
                  <input type="text" id="captcha" name="captcha" class="ftr-field__entry ftr-js-field__entry" value="{{ captcha }}">
                  <span class="ftr-field__text">{{ entry_captcha }}</span>
                </label>
              {% endif %}

              <button type="submit" id="button-review" class="ftr-btn ftr-background--secondary ftr-js-ripple-effect ftr-out-space--t-l">
                <span>{{ button_continue }}</span>
              </button>

            </form>
          </div>
          <div class="ftr-swipe-content__btn">
            <button type="button" id="toogle-review" class="ftr-btn ftr-h--full ftr-background--primary ftr-js-ripple-effect">{{ text_write }}</button>
          </div>
        </div>
      </div>
    </div>
  {% endif %}

  <hr>
  <div class="ftr-in-space--l">
    <a class="ftr-text--primary ftr-js-swipe-content-display" href="#">
      <span>{{ read_more }}</span>
      <i class="material-icons ftr-text--v-middle">&#xE5CC;</i>
    </a>
    <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-bold ftr-text--v-middle">&#xE5CD;</i>
      <span class="ftr-text-bold ftr-text--v-middle">{{ details }}</span>
      <hr>
      <div class="ftr-swipe-content__main">
        <div class="ftr-product-details">
          {{ description }}
        </div>
      </div>
    </div>
  </div>

  {{ productgridlistcolor }}

  <hr>
  {% if config_exibe_frete and exibe_frete and (aviseme==false)  %}
    <div class="ftr-js-swipe-content-display ftr-in-space--l">
      <p class="ftr-grid--between ftr-text--primary ">
        <span class="ftr-js-swipe-content-display__text">{{ calculate_shipping_method }}</span>
        <i class="material-icons ftr-text--v-middle">&#xE5CC;</i>
      </p>
    </div>
    <div class="ftr-swipe-content ftr-js-swipe-content ftr-js-swipe-content-postcode">
      <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">{{ text_shipping_detail }}</span>
      <hr class="ftr-out-space--n">
      <div class="ftr-swipe-content__main ftr-in-space--l">
        <form id="ftr-postcode-form" class="ftr-postcode-form js-form-no-submit" action="index.php?route=checkout/cart/quote" method="post" autocomplete="off">
          <label class="ftr-field">
            <input type="text" id="postcode" name="postcode" class="ftr-field__entry ftr-js-field__entry mask-cep ftr-js-postcode-frete-search" value="{{ postcode }}" data-product-id="{{ product_id }}">
            <span class="ftr-field__text">{{ entry_postcode }}</span>
          </label>
          {{ dont_know_cep }}
          <button type="submit" id="btn-postcode" class="ftr-btn ftr-js-ripple-effect ftr-background--secondary ftr-out-space--t-m">
            {{ button_quote }}
          </button>
        </form>
        <div id="shipping-options" class="ftr-shipping-options">
            <img src="assets/img/loading-black.svg" alt="" class="ftr-out-space--t-xl ftr-js-frete-loading ftr-none">
        </div>
      </div>
    </div>

    <hr>
  {% endif %}

  <div class="ftr-in-space--l">
    <span class="ftr-text--grey ftr-text--xs">{{ text_tags }}</span>
    <div class="ftr-scroller">
      {% for tag in tags %}
        <a href="{{ tag.href }}" class="ftr-chip ftr-out-space--r-m">
          {{ tag.tag }}
        </a>
      {% endfor %}
    </div>
  </div>

</div>
<div class="ftr-container-btn--fixed ftr-js-container-btn--fixed">
  {% if aviseme %}
    {{ aviseme }}
  {% else %}
    {% if exibir_botao_mercado_livre and link_ml %}
      <a href="{{ link_ml }}" class="ftr-text--primary ftr-in-space--t-s ftr-in-space--b-l ftr-out-space--b-s ftr-text--center ftr-block">
        {{ button_mercado_livre }}
      </a>
    {% endif %}

    <button id="ftr-add-to-cart" type="button" class="ftr-btn ftr-h--full ftr-js-ripple-effect ftr-background--primary" data-fator-multiplicador="1" data-fidelity="1">{{ button_points }}</button>
  {% endif %}
</div>

<!-- Zoom PhotoSwipe -->
<link rel="stylesheet" href="catalog/view/theme/vista/plugins/photoswipe/photoswipe.css">
<link rel="stylesheet" href="catalog/view/theme/vista/plugins/photoswipe/default-skin/default-skin.css">

<!-- 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>
{{ footer }}
