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

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

{% liquid
  assign minimum_amount = settings.cart_free_shipping_min_amount
  assign total_amount = cart.total_price | divided_by: 100
  assign progress = total_amount | times: 100 | divided_by: minimum_amount | at_most: 100
  assign level = '1'
  if progress > 30 and progress <= 60
    assign level = '2'
  elsif progress > 60 and progress < 100
    assign level = '3'
  elsif progress == 100
    assign level = '4'
  endif
%}

{% if settings.show_cart_free_shipping %}
  <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 {%if progress == 100 %} shakey {%endif %}'>
        {% if total_amount >= minimum_amount %}
          <span class='xo-cart-free-shipping__free-ship'>
            {{ 'general.cart.free_shipping_notice' | t }}
          </span>
        {% else %}
          <span class='xo-cart-free-shipping__content'>
            {% liquid
              assign money = minimum_amount | minus: total_amount | times: 100 | money
              if settings.currency_code_enabled
                assign money = minimum_amount | minus: total_amount | times: 100 | money_with_currency
              endif
            %}
            {{ 'general.cart.free_shipping_progress' | t: money: money }}
          </span>
        {% endif %}
      </xo-cart-will-change>
      <xo-cart-will-change
        xo-unique-id='xo-cart-free-shipping-progress'
        class='xo-cart-free-shipping__progress xo-cart-free-shipping__progress--level-{{ level }} {%if progress == 100 %} shakey{%endif %}'
        style='--progress: {{ progress }}%;'
      >
        {{ total_amount }}
      </xo-cart-will-change>
    </div>
  </div>
{% endif %}
