{% comment %}
  Renders a list of product's price (regular, sale)

  Accepts:
  - product: {Object} Product Liquid object (optional)
  - variant: {Object} Variant Liquid object (optional)
  - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
  - price_class: {String} Adds a price class to the price element (optional)
  - reverse: {Boolean} Reverses the order of the price elements (optional)
  - style: {String} Add modified style (optional)
  - card: {Boolean} Price when in product-card (optional)

  Usage:
  {% render 'price', product: product %}
{% endcomment %}

{% comment %} TODO: thiếu mấy phần translation {% endcomment %}

{%- liquid
  if use_variant
    assign target = product.selected_or_first_available_variant
  elsif variant
    assign target = variant
  else
    assign target = product
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999
  assign money_price = price | money
  if settings.currency_code_enabled
    assign money_price = price | money_with_currency
  endif

  if target == product and product.price_varies
    assign money_price = 'products.product.price.from_price_html' | t: price: money_price
  endif
-%}

<div class='xo-price{%- if price_class %} {{ price_class }}{% endif -%}{%- if style != blank %} xo-price--{{style}} {% endif -%}'>
  <div class='xo-price__container'>
    {%- comment -%}
      Explanation of description list:
        - div.xo-price__regular: Displayed when there are no variants on sale
        - div.xo-price__sale: Displayed when a variant is a sale
    {%- endcomment -%}
    {% if compare_at_price > price %}
      <div class='xo-price__sale{%- if reverse %} xo-price__sale--reverse{% endif -%}{%- if card %} xo-price__sale--column{% endif -%}'>
        <div class='xo-visually-hidden xo-visually-hidden--inline'>{{ 'products.product.price.sale_price' | t }}</div>
        <span
          class='
            xo-price__item {% unless product.price_varies == false and product.compare_at_price_varies %}
              xo-price__item--accent
            {% endunless %}
          '
        >
          {{ money_price }}
        </span>
        {%- unless product.price_varies == false and product.compare_at_price_varies %}
          <div class='xo-visually-hidden xo-visually-hidden--inline'>{{ 'products.product.price.regular_price' | t }}</div>
          <span class='xo-price__item xo-price__item--del'>
            {% if settings.currency_code_enabled %}
              {{ compare_at_price | money_with_currency }}
            {% else %}
              {{ compare_at_price | money }}
            {% endif %}
          </span>
        {%- endunless -%}
      </div>
    {% else %}
      <div class='xo-price__regular'>
        <div class='xo-visually-hidden xo-visually-hidden--inline'>{{ 'products.product.price.regular_price' | t }}</div>
        <span class='xo-price__item'>
          {{ money_price }}
        </span>
      </div>
    {% endif %}
    {% render 'unit-price', product: product %}
  </div>
</div>
