{% macro card(product, amount) %}
<article id="product_{{ product.identifier ?? 'FAIL' }}" class="product" 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.200 }}" alt="{{ product.name }}" ondragstart="return false;">
	</a>
	<div>
		<div class="head" title="{{ product.name }}">
			{{ product.name | length > 65 ? product.name | slice(0, 65) ~ '...' : product.name }}
			<!-- <button data-product-button="list" onclick="core.cart.list(this, document.getElementById('product_{{ product.identifier ?? 'FAIL' }}'))" title="{{ language.name == 'ru' ? 'Добавить в список' : 'Add to a list' }}"><i class="icon small list add"></i></button> -->
			<button data-product-button="toggle"
				onclick="core.cart.toggle(this, document.getElementById('product_{{ product.identifier ?? 'FAIL' }}'), true)"
				title="{{ language.name == 'ru' ? 'Удалить' : 'Delete' }}"><i class="icon small trash"></i></button>
		</div>
		<div class="body">
			{% for characteristic in [product.brand, format_dimensions(product.dimensions.x,
			product.dimensions.y, product.dimensions.z, ' '), product.weight ~ (language.name == 'ru' ? 'г' : 'g')] %}
			{% if characteristic is not empty %}
			<span>
				{{ characteristic | length > 30 ? characteristic | slice(0, 30) ~ '...' : characteristic }}
			</span>
			{% endif %}
			{% endfor %}
		</div>
		<div class="footer">
			<span class="cost currency" data-product-parameter="cost">{{ product.cost }}</span>
			<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>
			<input type="text" value="{{ amount ?? 1 }}" title="{{ language.name == 'ru' ? 'Количество' : 'Amount' }}"
				data-product-parameter="amount"
				onchange="core.cart.set(this, document.getElementById('product_{{ product.identifier ?? 'FAIL' }}'), +this.value)"
				oninput="this.value = (this.value = +this.value.replaceAll(/[^\d]/g, '')) > 100 ? 100 : (this.value < 0 ? 0 : this.value)"></input>
			<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>
	</div>
</article>
{% endmacro %}
{% if cart.products is not empty %}
<section id="products" class="column unselectable">
	{% for product in cart.products %}
	{{ product.summary }}
	{{ _self.card(product.document, product.amount) }}
	{% endfor %}
</section>
{% endif %}
