{% render 'free-shipping-bar' %}
{% if settings.show_free_shipping_bar
and settings.cart_shipping_value_1 != blank
and settings.cart_shipping_value_2 != blank %}
{% assign threshold1 = settings.cart_shipping_value_1 | times: 1.0 %}
{% assign threshold2 = settings.cart_shipping_value_2 | times: 1.0 %}
{% assign cart_total = cart.total_price | times: 1.0 %}
<div class="free_shipping_card_wrapper">
<!-- Message -->
<div class="free_shipping_card_title">
{% if cart_total < threshold1 %}
{% assign diff = threshold1 | minus: cart_total %}
{% assign diff_money = diff | money %}
{{ settings.cart_shipping_text_1 | replace: 'XX', diff_money }}
{% elsif cart_total < threshold2 %}
{% assign diff = threshold2 | minus: cart_total %}
{% assign diff_money = diff | money %}
{{ settings.cart_shipping_text_2 | replace: 'XX', diff_money }}
{% else %}
{{ settings.cart_shipping_text_3 }}
{% endif %}
</div>
{% assign percent = cart_total | divided_by: threshold2 | times: 100 %}
{% if percent > 100 %}
{% assign percent = 100 %}
{% endif %}
<!-- Progress Bar Wrapper -->
<div class="free_shipping_card_progress_wrapper">
<!-- Progress Bar -->
<div class="free_shipping_card_progress">
<div class="free_shipping_card_progress_bar" style="width:{{ percent }}%"></div>
</div>
<!-- Checkpoint Icons -->
<div class="free_shipping_card_icons">
<!-- First checkpoint -->
<div class="checkpoint {% if cart_total >= threshold1 %}active{% endif %}"
style="left: {{ threshold1 | divided_by: threshold2 | times: 100 }}%;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gift-icon">
<polyline points="20 12 20 22 4 22 4 12"></polyline>
<rect x="2" y="7" width="20" height="5"></rect>
<line x1="12" y1="22" x2="12" y2="7"></line>
<path d="M12 7a3 3 0 1 1-6 0c0-1.66 3-5 3-5s3 3.34 3 5z"></path>
<path d="M12 7a3 3 0 1 0 6 0c0-1.66-3-5-3-5s-3 3.34-3 5z"></path>
</svg>
</div>
<!-- Second checkpoint -->
<div class="checkpoint {% if cart_total >= threshold2 %}active{% endif %}" style="left: 100%;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="gift-icon">
<polyline points="20 12 20 22 4 22 4 12"></polyline>
<rect x="2" y="7" width="20" height="5"></rect>
<line x1="12" y1="22" x2="12" y2="7"></line>
<path d="M12 7a3 3 0 1 1-6 0c0-1.66 3-5 3-5s3 3.34 3 5z"></path>
<path d="M12 7a3 3 0 1 0 6 0c0-1.66-3-5-3-5s-3 3.34-3 5z"></path>
</svg>
</div>
</div>
</div>
</div>
{% endif %}