{% macro card(cart, product) %}
{% set title = product.brand ~ format_dimensions(product.dimensions.x,
product.dimensions.y, product.dimensions.z, ' ') ~ ' ' ~ product.weight ~ 'г' %}
{% set amount = cart.products[product.getId()].amount ?? 0 %}
<article id="product_{{ product.identifier ?? 'FAIL' }}" class="product unselectable" data-product-identifier="{{ product.identifier }}"
	data-product-amount="{{ amount }}"{% if amount > 0 %} style="--hue-rotate-offset: {{ amount }}0deg;"{% endif %}>
	<a data-product="cover" href="?product={{ product.identifier }}" onclick="return !core.catalog.product(this);"
		onkeydown="event.keyCode === 13 && core.catalog.product(this)" tabindex="10">
		<img src="{{ product.images.0.storage.400 }}" alt="{{ product.name }}" ondragstart="return false;">
		<p class="title" title="{{ product.name }} {{ title }}">
			{{ product.name }}
			<span>{{ title | length > 45 ? title | slice(0, 45) ~ '...' : title }}</span>
		</p>
	</a>
	<div data-product="buttons">
		<button data-product-button="delete" onclick="core.cart.delete(this, document.getElementById('product_{{ product.identifier ?? 'FAIL' }}'), 1)" title="{{ language.name == 'ru' ? 'Уменьшить' : 'Decrease' }}"><i class="icon small minus"></i></button>
		<button data-product-button="toggle" onclick="core.cart.toggle(this, document.getElementById('product_{{ product.identifier ?? 'FAIL' }}'))" tabindex="15">
			<span data-product-parameter="amount">{{ amount }}</span>
			<span class="cost currency" data-product-parameter="cost">{{ product.cost }}</span>
		</button>
		<button data-product-button="write" onclick="core.cart.write(this, document.getElementById('product_{{ product.identifier ?? 'FAIL' }}'), 1)" title="{{ language.name == 'ru' ? 'Увеличить' : 'Increase' }}"><i class="icon small plus"></i></button>
	</div>
</article>
{% endmacro %}
{% if products is not empty %}
<section id="products" class="unselectable">
	<div class="column">
		{% for product in products %}
		{% if loop.index % 2 == 1 %}
		{{ _self.card(cart, product) }}
		{% endif %}
		{% endfor %}
	</div>
	<div class="column">
		{% for product in products %}
		{% if loop.index % 2 == 0 %}
		{{ _self.card(cart, product) }}
		{% endif %}
		{% endfor %}
	</div>
</section>
{% endif %}
