{%- comment -%}
  Renders a free shipping bar

  Accepts:
  - shipping_amount: {Number} Free shipping amount (required)

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

{%- liquid
  assign calculated_total_price = cart.items | where: "requires_shipping", true | sum: 'final_line_price' | minus: cart.total_discount
  if settings.currency_code_enabled
    assign money_need_add = shipping_amount | minus: calculated_total_price | money_with_currency
  else
    assign money_need_add = shipping_amount | minus: calculated_total_price | money
  endif
-%}

{%- assign progress_shipping = calculated_total_price | times: 1.0 | divided_by: shipping_amount | at_most: 1 -%}

<hdt-free-shipping-bar class="hdt-free-shipping-bar is-{% if progress_shipping <= 0.6 %}intial{% elsif progress_shipping == 1 %}success{% else %}unreached{% endif %}">
  <hdt-progress-bar data-hdt-percent="{{ progress_shipping }}" class="hdt-progress-bar hdt-relative" role="progressbar" aria-valuemin="0" aria-valuemax="{{ shipping_amount }}" aria-valuenow="{{ calculated_total_price }}" data-colors='{"0":"is-intial", "0.7":"is-unreached", "1":"is-success"}' style="--progress-rate: 0" reveal-in-view>
    <div class="hdt-absolute hdt-top-0 hdt-block hdt-rounded-full" style="width:calc(var(--progress-rate) * 100%);">
      <div class="hdt-free-shipping-bar-icon hdt-s-gradient hdt-absolute hdt-right-0 hdt-flex hdt-align-center hdt-justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="21" height="14" viewBox="0 0 21 14" fill="currentColor">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0.875C0 0.391751 0.391751 0 0.875 0H13.5625C14.0457 0 14.4375 0.391751 14.4375 0.875V3.0625H17.3125C17.5867 3.0625 17.845 3.19101 18.0104 3.40969L20.8229 7.12844C20.9378 7.2804 21 7.46572 21 7.65625V11.375C21 11.8582 20.6082 12.25 20.125 12.25H17.7881C17.4278 13.2695 16.4554 14 15.3125 14C14.1696 14 13.1972 13.2695 12.8369 12.25H7.72563C7.36527 13.2695 6.39293 14 5.25 14C4.10706 14 3.13473 13.2695 2.77437 12.25H0.875C0.391751 12.25 0 11.8582 0 11.375V0.875ZM2.77437 10.5C3.13473 9.48047 4.10706 8.75 5.25 8.75C6.39293 8.75 7.36527 9.48046 7.72563 10.5H12.6875V1.75H1.75V10.5H2.77437ZM14.4375 8.89937V4.8125H16.8772L19.25 7.94987V10.5H17.7881C17.4278 9.48046 16.4554 8.75 15.3125 8.75C15.0057 8.75 14.7112 8.80264 14.4375 8.89937ZM5.25 10.5C4.76676 10.5 4.375 10.8918 4.375 11.375C4.375 11.8582 4.76676 12.25 5.25 12.25C5.73323 12.25 6.125 11.8582 6.125 11.375C6.125 10.8918 5.73323 10.5 5.25 10.5ZM15.3125 10.5C14.8293 10.5 14.4375 10.8918 14.4375 11.375C14.4375 11.8582 14.8293 12.25 15.3125 12.25C15.7957 12.25 16.1875 11.8582 16.1875 11.375C16.1875 10.8918 15.7957 10.5 15.3125 10.5Z"/>
        </svg>
      </div>
    </div>
  </hdt-progress-bar>
  <span class="hdt-progress-msg hdt-block hdt-s-text hdt-font-semibold">
    {%- if progress_shipping == 0 -%}
      {{ 'sections.cart.free_shipping_bar.intial_html' | t: money: money_need_add }}
    {%- elsif progress_shipping == 1 -%}
      {{ 'sections.cart.free_shipping_bar.success' | t }}
    {%- else -%}
      {{ 'sections.cart.free_shipping_bar.unreached_html' | t: money: money_need_add }}
    {%- endif -%}
  </span>
</hdt-free-shipping-bar>