{% comment %}
  Renders free shipping progress bar

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

{%- liquid
  assign free_shipping_threshold = settings.free_shipping_threshold | times: 100
  assign cart_total = cart.total_price
  assign remaining_amount = free_shipping_threshold | minus: cart_total
  assign progress_percentage = cart_total | times: 100 | divided_by: free_shipping_threshold
  assign progress_percentage = progress_percentage | at_least: 0 | at_most: 100

  if remaining_amount <= 0
    assign has_free_shipping = true
  else
    assign has_free_shipping = false
  endif

  assign remaining_formatted = remaining_amount | money
  assign threshold_formatted = free_shipping_threshold | money
  assign progress_percent_formatted = progress_percentage | round | append: '%'
  assign progress_message_html = settings.free_shipping_bar_message_progress | replace: '{{ amount }}', remaining_formatted | replace: '{{ threshold }}', threshold_formatted | replace: '{{ progress }}', progress_percent_formatted
-%}
{%- if settings.show_free_shipping_bar and cart != empty -%}
  <style>
    .free-shipping-bar {
      --color-background: {{ settings.cart_free_shipping_bar_background_color }};
      --color-text: {{ settings.cart_free_shipping_bar_text_color }};
      --color-progress-background: {{ settings.cart_free_shipping_bar_progress_background_color }};
      --color-progress-success-background: {{ settings.cart_free_shipping_bar_success_background_color }};
      --text-align: {{ settings.cart_free_shipping_bar_text_align }};
    }
  </style>

  <free-shipping-bar class="free-shipping-bar" data-free-shipping-threshold="{{ free_shipping_threshold }}">
    <div class="free-shipping-bar__container">
        <div class="free-shipping-bar__message">
          <span class="free-shipping-bar__text rte">
            {%- if has_free_shipping -%}
              {{- settings.free_shipping_bar_message_success -}}
            {%- else -%}
              {{- progress_message_html -}}
            {% endif %}
          </span>
        </div>
      <div class="free-shipping-bar__progress-bar">
        <div class="free-shipping-bar__progress-fill" style="width: {{ progress_percentage }}%"
          data-progress="{{ progress_percentage }}"></div>
      </div>
    </div>
  </free-shipping-bar>
{%- endif -%}