{% comment %}
  Renders a cart item

  Accepts:
  - item: {Object} cart item

  Usage:
  {% render 'cart-item',
    item: item
  %}
{% endcomment %}

{% liquid
  assign aspect_ratio = settings.product_card_aspect_ratio
%}

<div class='xo-cart-item'>
  {% if item.image != blank %}
    <a href='{{ item.url }}' class='xo-cart-item__image' style='--aspect-ratio:{{ aspect_ratio }}'>
      {% render 'image', image: item.image %}
    </a>
  {% endif %}
  <div class='xo-cart-item__content'>
    {%- if settings.show_vendor -%}
      <span class='xo-cart-item__vendor'>{{ item.product.vendor }}</span>
    {%- endif -%}
    <a href='{{ item.url }}' class='xo-cart-item__title'>
      {{ item.title | escape }}
    </a>
    <div class='xo-cart-item__price'>
      {% liquid
        assign original_price = item.original_price | money
        if settings.currency_code_enabled
          assign original_price = item.original_price | money_with_currency
        endif
        assign final_price = item.final_price | money
        if settings.currency_code_enabled
          assign final_price = item.final_price | money_with_currency
        endif
      %}
      {%- if item.original_price != item.final_price -%}
        <div class='xo-cart-item__discounted-prices'>
          <span class='xo-visually-hidden'>
            {{ 'products.product.price.sale_price' | t }}
          </span>
          <span class='xo-cart-item__final-price'>
            {{ final_price }}
          </span>
          <span class='xo-visually-hidden'>
            {{ 'products.product.price.regular_price' | t }}
          </span>
          <s class='xo-cart-item__original-price xo-cart-item__original-price--old'>
            {{- original_price -}}
          </s>
        </div>
      {%- else -%}
        <div class='xo-cart-item__original-price'>
          {{ original_price }}
        </div>
      {%- endif -%}
      {% if item.discounts.size > 0 %}
        <ul class='xo-cart-item__detail-discounts' role='list' aria-label='{{ 'customer.order.discount' | t }}'>
          {%- for discount in item.discounts -%}
            <li class='xo-cart-item__detail-discount'>
              {%- render 'icon', name: 'discount' -%}
              {{ discount.title }}
            </li>
          {%- endfor -%}
        </ul>
      {% endif %}
    </div>
    <xo-product xo-section-id='{{ section.id }}' xo-product-id='{{ item.id }}'>
      <div class='xo-cart-item__quantity'>
        {% render 'quantity-style2', value: item.quantity %}
      </div>
    </xo-product>
    {%- if item.product.has_only_default_variant == false or item.properties.size != 0 or item.selling_plan_allocation != null -%}
      <div class='xo-cart-item__options'>
        {%- for option in item.options_with_values -%}
          <div class='xo-cart-item__option'>
            <span>{{ option.name }}:</span>
            <span>{{ option.value -}}</span>
          </div>
        {%- endfor -%}
        {%- for property in item.properties -%}
          {%- assign property_first_char = property.first | slice: 0 -%}
          {%- if property.last != blank and property_first_char != '_' -%}
            <div class='xo-cart-item__option'>
              <span>{{ property.first }}:</span>
              <span>
                {%- if property.last contains '/uploads/' -%}
                  {% assign text = property.last | split: '/' | last %}
                  {% capture attrs %}target='_blank' aria-describedby='a11y-new-window-message'{% endcapture %}
                  {% render 'button', text: text, link: property.last, style: 'link', mode: 'dark', attrs: attrs %}
                {%- else -%}
                  {{ property.last }}
                {%- endif -%}
              </span>
            </div>
          {%- endif -%}
        {%- endfor -%}
        <p class='xo-cart-item__option'>{{ item.plan.selling_plan.name }}</p>
      </div>
    {%- endif -%}
    <xo-cart-remove>
      {% assign delete_label = 'sections.cart.delete' | t %}
      {% render 'button', text: delete_label, style: 'link', mode: 'dark', effect: 'fade' %}
    </xo-cart-remove>
    <xo-cart-change-fallback>{% render 'loader-2' %}</xo-cart-change-fallback>
  </div>
</div>
