<style>
  :root {
    --color-price-cash: {{section.settings.color_price_cash}};
    --color-price-parcel: {{section.settings.color_price_parcel}};
    --color-percent-product: {{section.settings.color_percent_product}};
    --color-highlight-product_price: {{section.settings.color_highlight_product_price}};
    --color-bttnpix-product: {{section.settings.color_bttn_pix_product}}
  }

</style>

{% comment %}
    Renders a list of product's price (regular, sale, unit)
    Accompanies product forms and meant to be updated dynamically
    Accepts:
    - variant: {Object} Variant Liquid object (optional)
    - product: {Object} Product Liquid object (optional)
    - show_vendor: {Boolean} Show the product's vendor depending on the section setting (optional)

    Usage:
    {% include 'product-price', variant: current_variant, product: product %}
{% endcomment %}
{%- liquid
  if variant.title
    assign compare_at_price = variant.compare_at_price
    assign price = variant.price
    assign available = variant.available
  else
    assign compare_at_price = 1999
    assign price = 1999
    assign available = true
  endif

  assign money_price = price | money
-%}

{% capture discount %}
  {{ product.compare_at_price_max | minus:product.price | times:100 | divided_by:product.compare_at_price_max }}%
{% endcapture %}

<!--Parcelamento em 12x-->
{% liquid
  assign taxa_decima_segunda_parcela = settings.taxa_decima_segunda_parcela | divided_by: 100 | plus: 1
%}
<!--Fim Parcelamento em 12x-->

<dl class="price
  {% if available == false %} price--sold-out {% endif %}
  {% if compare_at_price > price %} price--on-sale {% endif %}
  {% if variant.unit_price_measurement %} price--unit-available {% endif %}"
    data-price
>

  {% if show_vendor and product %}
    <div class="price__vendor">
      <dt>
        <span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    </div>
  {% endif %}

  {%- comment -%}
    Explanation of description list:
      - div.price__regular: Displayed when there are no variants on sale
      - div.price__sale: Displayed when a variant is a sale
      - div.price__unit: Displayed when the first variant has a unit price
      - div.price__availability: Displayed when the product is sold out
  {%- endcomment -%}
  {{ 'pagina-produto.css' | asset_url | stylesheet_tag }}

  <div class="price__pricing-group">
    <!-- Preço SEM comparação -->
    <div class="price__regular">
      <section class="container-pagina-produto">
        <span class="price-pagina-produto">Preço:</span>
        <div class="content-pagina-produto">
          <div class="current-price-pagina-produto" style="display: block !important;">
            <span class="current-price-text-pagina-produto" data-regular-price>{{ money_price }}</span>
          </div>
          <span class="installment-pagina-produtos">Ou 12x{% if taxa_decima_segunda_parcela == 1 %} sem juros {%endif%} de <strong><span class="price-parcel" data-parcelamento-price-one>{{ variant.price | times: taxa_decima_segunda_parcela | divided_by: 12 | money }}</span></strong></span>
          {% liquid
            assign porcentagem = settings.desconto_pix | divided_by: 100
            assign desconto_pix = 1 | minus: porcentagem
          %}
          {% if desconto_pix != 1 %}
            <button class="bttn-pagina-produto">
              <svg class="svg-pagina-produto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M242.4 292.5C247.8 287.1 257.1 287.1 262.5 292.5L339.5 369.5C353.7 383.7 372.6 391.5 392.6 391.5H407.7L310.6 488.6C280.3 518.1 231.1 518.1 200.8 488.6L103.3 391.2H112.6C132.6 391.2 151.5 383.4 165.7 369.2L242.4 292.5zM262.5 218.9C256.1 224.4 247.9 224.5 242.4 218.9L165.7 142.2C151.5 127.1 132.6 120.2 112.6 120.2H103.3L200.7 22.76C231.1-7.586 280.3-7.586 310.6 22.76L407.8 119.9H392.6C372.6 119.9 353.7 127.7 339.5 141.9L262.5 218.9zM112.6 142.7C126.4 142.7 139.1 148.3 149.7 158.1L226.4 234.8C233.6 241.1 243 245.6 252.5 245.6C261.9 245.6 271.3 241.1 278.5 234.8L355.5 157.8C365.3 148.1 378.8 142.5 392.6 142.5H430.3L488.6 200.8C518.9 231.1 518.9 280.3 488.6 310.6L430.3 368.9H392.6C378.8 368.9 365.3 363.3 355.5 353.5L278.5 276.5C264.6 262.6 240.3 262.6 226.4 276.6L149.7 353.2C139.1 363 126.4 368.6 112.6 368.6H80.78L22.76 310.6C-7.586 280.3-7.586 231.1 22.76 200.8L80.78 142.7H112.6z" fill="var(--color-bttnpix-product)"></path></svg>
              Até <b>{{settings.desconto_pix | round }}% OFF</b> no PIX
            </button>
          {% endif %}
        </div>
      </section>
    </div>
    <!-- Preço COM comparação -->
    <div class="price__sale">
      <section class="container-pagina-produto">
        <span class="price-pagina-produto">Preço:</span>
        <div class="content-pagina-produto">
          <div class="oldprice-pagina-produto" data-regular-price>DE {{ compare_at_price | money }}</div>
          <div class="current-price-pagina-produto">
            <span class="current-price-text-pagina-produto" data-sale-price>{{ money_price }}</span>
            <span class="percent-pagina-produto">↓ <span data-discount-percentage-price>{{ compare_at_price
                | minus: price
                | times: 100.0
                | divided_by: compare_at_price
                | round
                | prepend: '-'
                | append: '%' }}</span></span>
          </div>
          <span class="installment-pagina-produtos">Ou 12x{% if taxa_decima_segunda_parcela == 1 %} sem juros {%endif%} de <strong><span class="price-parcel" data-parcelamento-price-two>{{ variant.price | times: taxa_decima_segunda_parcela | divided_by: 12 | money }}</span></strong></span>
          <span class="highlight-pagina-produto"><span data-discount-price>{{ compare_at_price | minus: price | money }}</span> de desconto</span>
          {% liquid
            assign porcentagem = settings.desconto_pix | divided_by: 100
            assign desconto_pix = 1 | minus: porcentagem
          %}
          {% if desconto_pix != 1 %}
            <button class="bttn-pagina-produto">
              <svg class="svg-pagina-produto" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M242.4 292.5C247.8 287.1 257.1 287.1 262.5 292.5L339.5 369.5C353.7 383.7 372.6 391.5 392.6 391.5H407.7L310.6 488.6C280.3 518.1 231.1 518.1 200.8 488.6L103.3 391.2H112.6C132.6 391.2 151.5 383.4 165.7 369.2L242.4 292.5zM262.5 218.9C256.1 224.4 247.9 224.5 242.4 218.9L165.7 142.2C151.5 127.1 132.6 120.2 112.6 120.2H103.3L200.7 22.76C231.1-7.586 280.3-7.586 310.6 22.76L407.8 119.9H392.6C372.6 119.9 353.7 127.7 339.5 141.9L262.5 218.9zM112.6 142.7C126.4 142.7 139.1 148.3 149.7 158.1L226.4 234.8C233.6 241.1 243 245.6 252.5 245.6C261.9 245.6 271.3 241.1 278.5 234.8L355.5 157.8C365.3 148.1 378.8 142.5 392.6 142.5H430.3L488.6 200.8C518.9 231.1 518.9 280.3 488.6 310.6L430.3 368.9H392.6C378.8 368.9 365.3 363.3 355.5 353.5L278.5 276.5C264.6 262.6 240.3 262.6 226.4 276.6L149.7 353.2C139.1 363 126.4 368.6 112.6 368.6H80.78L22.76 310.6C-7.586 280.3-7.586 231.1 22.76 200.8L80.78 142.7H112.6z" fill="var(--color-bttnpix-product)"></path></svg>
              Até <b>{{settings.desconto_pix | round}}% OFF</b> no PIX
            </button>
          {% endif %}
        </div>
      </section>
    </div>
  </div>
  <div class="price__unit">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
    </dt>
    <dd class="price-unit-price">
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span
              class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
        <span data-unit-price-base-unit>
          {%- if variant.unit_price_measurement -%}
            {%- if variant.unit_price_measurement.reference_value != 1 -%}
              {{- variant.unit_price_measurement.reference_value -}}
            {%- endif -%}
            {{ variant.unit_price_measurement.reference_unit }}
          {%- endif -%}
        </span>
      {%- endcapture -%}

      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </dd>
  </div>
</dl>
