{%- comment -%}
  Renders a card price

  Accepts:
  - product: {Object} Product Liquid object (required)
  - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
  - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
  - price_class: {String} Adds a price class to the price element (optional)
  - show_compare_at_price: {Boolean} Renders the compare at price if the product matches the condition (optional)
  - show_volume_note: {Boolean} (optional)

  Usage:
  {%- render 'card-price', product: card_product, show_volume_note: true -%} (used on card, product on sidebar)
  {%- render 'price', product: product, use_variant: true, form_id: form_id -%} (used on product page, quick view, featured product...)
  {%- render 'line-item-price', line_item: item -%} (used on cart, order page...)
{%- endcomment -%}

{%- liquid
  if show_compare_at_price == nil
    assign show_compare_at_price = true
  endif
  assign selected_or_first_available_variant = product.selected_or_first_available_variant
  if use_variant
    assign target = selected_or_first_available_variant
  else
    assign target = product
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999
  assign price_min = product.price_min
  assign price_max = product.price_max
  assign available = target.available | default: false
  if settings.currency_code_enabled
    assign money_price = price | money_with_currency
    assign money_compare_at_price = compare_at_price | money_with_currency
    assign money_price_min = price_min | money_with_currency
    assign money_price_max = price_max | money_with_currency
  else
    assign money_price = price | money
    assign money_compare_at_price = compare_at_price | money
    assign money_price_min = price_min | money
    assign money_price_max = price_max | money
  endif
  if compare_at_price > price
    assign on_sale = true
  else
    assign on_sale = false
  endif
  assign price_varies_item = ''
  if target == product and product.price_varies
    assign price_varies_item = ' hdt-price-item--range'
    if settings.price_varies_style == "1"
      assign money_price = 'products.product.volume_pricing.price_range_html' | t: minimum: money_price_min, maximum: money_price_max
    else
      assign money_price = 'products.product.price.from_price_html' | t: price: money_price_min
    endif
  endif
-%}

<div class="hdt-price-wrapp {{ price_class }}{% if show_badges %} hdt-price--show-badge{% endif %}">
  <div class="hdt-price__list">
    {%- if product.quantity_price_breaks_configured? -%}
      {%- if show_compare_at_price and compare_at_price -%}
        {%- unless product.price_varies == false and product.compare_at_price_varies -%}
          <hdt-compare-at-price class="hdt-compare-at-price">
            <span class="sr-only sr-only--inline">{{ 'products.product.price.regular_price' | t }}</span>
            <span class="hdt-money">{{ money_compare_at_price }}</span>
          </hdt-compare-at-price>
        {%- endunless -%}
      {%- endif -%}
      <span class="hdt-price hdt-price-item--range">
        <span class="sr-only sr-only--inline">{{ 'products.product.price.regular_price' | t }}</span>
        {{- 'products.product.volume_pricing.price_range_html' | t: minimum: money_price_min, maximum: money_price_max -}}
      </span>
    {%- else -%}
          {%- if compare_at_price and on_sale and show_compare_at_price -%}
          <hdt-compare-at-price class="hdt-compare-at-price">
            <span class="sr-only sr-only--inline">{{ 'products.product.price.regular_price' | t }}</span>
            <span class="hdt-money">{{ money_compare_at_price }}</span>
          </hdt-compare-at-price>
        {%- endif -%}
        <hdt-price class="hdt-price{{ price_varies_item }}">
          <span class="sr-only sr-only--inline">{{ 'products.product.price.sale_price' | t }}</span>
          {%- if price_varies_item != '' %}{{ money_price }}{% else %}<span class="hdt-money">{{ money_price }}</span>{% endif -%}
        </hdt-price>
    {%- endif -%}
    {%- if selected_or_first_available_variant.unit_price_measurement -%}
    <hdt-unit-price class="hdt-unit-price">
      <span class="sr-only">{{ 'products.product.price.unit_price' | t }}</span>
      <span class="hdt-hdt-price-item hdt-price-item--last">
        <span class="hdt-money">{{- selected_or_first_available_variant.unit_price | money -}}</span>
        <span aria-hidden="true">/</span>
        <span class="sr-only">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
        <span>
          {%- if selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
            {{- selected_or_first_available_variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ selected_or_first_available_variant.unit_price_measurement.reference_unit }}
        </span>
      </span>
    </hdt-unit-price>
    {%- endif -%}
  </div>
  {%- if show_badges %}{% render 'badges', product: product, use_variant: use_variant %}{% endif -%}
</div>
{%- if show_volume_note and product.quantity_price_breaks_configured? -%}
  <div class="hdt-volume-pricing-note">{{ 'products.product.volume_pricing.note' | t }}</div>
{%- endif -%}
