{% comment %} 
Description:
Snippet for displaying cart item

Variables:
- index: Number, item index
- item: Object, line item object 
- group_id: String. The group_id
- group_parent: Boolean, is group_parent 
- is_cart_page: Boolean, is it from cart page.
- class:  additional class
{% endcomment %}
{% assign show_header_cart_function = '$360.showHeaderCart({update: true})' %}
{% if is_cart_page == true %}
	{% assign show_header_cart_function = '$360.showHeaderCart({update: true, from_cart: true})' %}
{% endif %}

{%- assign parent_group = false -%}
{%- assign group_id = 0 -%}
{%- for prop in item.properties -%}
	{%- if prop[0] == '_parent_group' -%}
		{%- assign parent_group = true -%}
	{%- endif -%}
	{%- if prop[0] == '_group_id' -%}
		{%- assign group_id = prop[1] -%}
	{%- endif -%}
{%- endfor -%}

{%- capture remove_function -%}
{%- if parent_group == true -%}
$360.updateItemQtyFromCart({el: this, index: {{ index }}, qty: 0, groupId: {{ group_id }}, removeSameGroup: true }, function() { {{ show_header_cart_function }}; $360.refreshCartPage(); })
{%- else -%}
$360.updateItemQtyFromCart({el: this, index: {{ index }}, qty: 0,}, function() { {{ show_header_cart_function }}; $360.refreshCartPage(); })
{%- endif -%}
{%- endcapture -%}

<li class="cart-item flex jc-start relative {{ class }}">
	<div class="image-con mr-15 d-mr-20 w-full">
		{%- capture item_img -%}
			{%- assign image_alt = item.product.title | append: ' image' -%}
			{%- if item.image == blank -%}
				<img src="{{ item.image | img_url: '200x' }}" alt="{{ item.image.alt }}" class="image">
			{%- else -%}
				{%- render 'global-image-wrapper', image: item.image, size: 200, preload: true, additional_class: '', image_alt: image_alt -%}
			{%- endif -%}
		{%- endcapture -%}
		{%- if item.product.tags contains "hidden" -%}
			{{ item_img }}
		{%- else -%}
			<a href="{{ item.url }}" title="{{ item.title }}">{{ item_img }}</a>
		{%- endif -%}
	</div>
	<div class="details-con w-full">
		<div class="left-side">
			<div class="item-title flex jc-between ai-start colgap-10 d-colgap-15">
				{%- if item.product.tags contains "hidden" -%}
					<h4 class="h7">{{ item.product.title }}</h4>
				{%- else -%}
					<h4 class="h7"><a href="{{ item.url }}" class="">{{ item.product.title }}</a></h4>
				{%- endif -%}

				{% # price %}
				{% liquid
					assign compare_at_price = item.variant.compare_at_price
					assign price = item.line_price

					assign on_sale = false
					if item.product.tags contains 'Sale'
						assign on_sale = true
					endif

					if compare_at_price > item.variant.price
						assign on_sale = true
					endif
				%}
				<div class="price-wrp">
					<span class="p2 c-brown">{{ price | money_with_currency }}</span>
					{% comment %}
					<span class="p2 {% if on_sale == true %}c-red{% else %}c-brown{% endif %}">{{ price | money_with_currency }}</span>
					{%- if on_sale -%}
						{%- if item.line_price < item.original_line_price -%}
							<span class="ml-5 striked-price striked p2 c-brown">{{ item.original_line_price | money_with_currency }}</span>
						{%- else -%}
							<span class="ml-5 striked-price striked p2 c-brown">{{ compare_at_price | times: item.quantity | money_with_currency }}</span>
						{%- endif -%}
					{%- endif -%}
					{% endcomment %}
				{% # price %}
				</div>
			</div>

			{% # variant and metafields %}
			{%- assign variant_html = '' -%}
			{%- if item.product.metafields.custom.color_name != blank -%}
				{%- capture var_item -%}
					<div class="p3 tl">{{ 'cart.general.colour' | t }}: {{ item.product.metafields.custom.color_name }}</div>
				{%- endcapture -%}
					{%- assign variant_html = variant_html | append: var_item -%}
			{%- endif -%}
			{%- unless item.product.has_only_default_variant %}
				{% for option in item.options_with_values -%}
					{%- capture var_item -%}
					<div class="p3 tl">{{ option.name }}: {{ option.value }}</div>
					{%- endcapture -%}
					{%- assign variant_html = variant_html | append: var_item -%}
				{% endfor %}
			{% endunless %}
			{%- for prop in item.properties -%}
				{%- capture var_item -%}
					{%- unless prop[0] contains '_' -%}
						{%- if prop[0] == 'Send on' -%}
							{%- assign sendDate = prop[1] |  replace: '-', '' -%}
							<div class="p3 tl">
								{{ prop[0] }}: {{ sendDate | slice: -2, 2 }} / {{ sendDate | slice: -4, 2 }} / {{ sendDate | slice: 0, 4 }}
							</div>
						{%- else -%}
							<div class="p3 tl">{{ prop[0] }}: {{ prop[1] }}</div>
						{%- endif -%}
					{%- endunless -%}
				{%- endcapture -%}
				{%- assign variant_html = variant_html | append: var_item -%}
			{%- endfor -%}

			{%- unless variant_html == '' -%}
			<div class="item-variants relative flex flex-column jc-start ai-start w-full rowgap-5 mt-10">
				{{ variant_html }}
			</div>
			{%- endunless -%}
			{% # END variant and metafields %}

			{% # auto discount listing %}
			{%- assign discount_html = '' -%}
			{%- for disc in item.discounts -%}
				{%- if disc.title != blank -%}
					{%- capture disc_item -%}
						<div class="p4 bold-700 p-5 b-1 b-light-grey">{{ disc.title }}</div>
					{%- endcapture -%}
				{%- endif -%}
				{%- assign discount_html = discount_html | append: disc_item -%}
			{%- endfor -%}
			{%- unless discount_html == '' -%}
			<div class="discount-listing relative flex jc-start ai-start w-full colgap-5 rowgap-5 mt-10">
				{{ discount_html }}
			</div>
			{%- endunless -%}
			{% # END auto discount listing %}
		</div>
		<div class="item-plus-minus flex jc-between ai-center {% if item.product.has_only_default_variant %}default-variant{% endif %} ">
			<div class="btn-plus-minus global-form-qty bg-dark-beige pl-15 pr-15 pt-10 pb-10 d-pt-11 d-pb-11 flex jc-between ai-center colgap-10 rounded-3">
				<button type="button" class="toggle global-minus normal-flex">{{ settings.icon_minus }}</button> 
				<input 
					type="number" 
					class="global-qty-text p3" 
					name="quantity" 
					value="{{ item.quantity }}" 
					min="1" 
					{% if item.variant.inventory_policy == "continue" %}
					{% else %}
					max="{{ item.variant.inventory_quantity }}"
					{% endif %} 
					oninput="$360.updateItemQtyFromCart({el: this, index: {{ index }}, qty: this.value, groupId: {{ group_id }}, removeSameGroup: {{ group_parent }}}, function() { {{ show_header_cart_function }}; $360.refreshCartPage(); })" readonly
				>
				<button 
					type="button" 
					class="toggle global-plus normal-flex"
					data-max="{{ item.variant.inventory_quantity }}"
					{% if item.quantity == item.variant.inventory_quantity %}disabled{% endif %}
				>{{ settings.icon_plus }}</button> 
			</div>
			<div class="item-price tr no-wrap-whitespace">
				{% comment %} <button type="button" class="flex btn-love-cart-item ai-center jc-center" onclick="{{ love_function }}">
					{{ settings.icon_wishlist }}
				</button> {% endcomment %}
				
				<button 
					type="button"  
					aria-label="Add to Wishlist" 
					data-with-epi="true" class="swym-button swym-add-to-wishlist-view-product product_{{ item.product.id }}" 
					data-swaction="addToWishlist" 
					data-product-id="{{ item.product.id | json}}" 
					data-variant-id="{{ item.product.variants[0].id}}" 
					data-product-url="{{ shop.url }}{{ item.product.url }}">
				</button>

				<button type="button" class="flex btn-remove-cart-item ai-center jc-center" onclick="{{ remove_function }}">
					{{ settings.icon_trash }}
				</button>
			</div>
		</div>
	</div>
</li>