{% comment %}
  Renders a message about free shipping in the cart.

  Usage:
  {% render 'cart-free-shipping' %}
{% endcomment %}

{% liquid
  assign total_amount = cart.total_price | divided_by: 100
  assign progress = 0
%}

{% if settings.show_cart_free_shipping %}
  <xo-cart-free-shipping-custom>
    <div class='xo-cart-free-shipping '>
      <xo-cart-will-change xo-unique-id='xo-cart-free-shipping-checking' class='xo-cart-free-shipping__checking'>
        {%- if cart != empty -%}{{- total_amount -}}{%- endif -%}
      </xo-cart-will-change>
      <div class='xo-cart-free-shipping__position'>
        <xo-cart-will-change xo-unique-id='xo-cart-free-shipping-text' class='xo-cart-free-shipping__text'> </xo-cart-will-change>
        <xo-cart-will-change
          xo-unique-id='xo-cart-free-shipping-progress'
          class='xo-cart-free-shipping__progress'
          style='--progress: {{ progress }}%;'
        >
          {{ total_amount }}
        </xo-cart-will-change>
      </div>
    </div>
  </xo-cart-free-shipping-custom>
{% endif %}

<script>
  window.shopSettings = {
    freeShippingThreshold: {{ settings.cart_free_shipping_min_amount }},
    currencyActive: Shopify.currency.active || "USD",
    currencyRate: Shopify.currency.rate || 1,
    showCurrencyCode: {{ settings.currency_code_enabled | json }},
  };

  window.translations = {
    freeShippingNotice: '{{ 'general.cart.free_shipping_notice' | t }}',
    freeShippingProgress: '{{ 'general.cart.free_shipping_progress' | t }}',
  }
</script>
