{% for product in products %}
	{% set image = product.imageUrl ? product.imageUrl : getImage(products_images ~ product.image.name) %}
	{% set data = [product.id,categoryId] %}
	<div class="card borcard-borderedder bg-light card-px-2 shadow-sm card-flush card-stretch-50 overlay pb-5 mw-100 draggable-handle" data-id="{{ data|join(',') }}">
		<div class="card-body text-center ribbon ribbon-end ribbon-clip">
			{% if product.new %}
				<div class="ribbon-label text-light-bold ribbon-product">
					{{ 'app.shop_owner.pages.products.form.general.newest'|trans }}
					<span class="ribbon-inner bg-primary"></span>
				</div>
			{% endif %}

			<div class="overlay-wrapper">
				<img src="{{ asset(image) }}" class="rounded-3 mb-4 w-100px h-100px w-xxl-150px h-xxl-150px" alt=""/>
				<div class="mb-2">
					<div class="text-center">
						<span class="fw-bold text-gray-800 cursor-pointer text-hover-primary fs-3 fs-xl-1" data-bs-toggle="tooltip" data-bs-custom-class="tooltip-dark" data-bs-placement="top" title="{{ product }}">{{ product|truncate(12) }}</span>
					</div>
				</div>
				{% if true == productShopModes is defined %}
					<span class="text-success text-end fw-bold fs-5">{{ productShopModes.first.price | price }}</span>
				{% endif %}
			</div>
			<div class="overlay-layer card-rounded bg-dark bg-opacity-75 justify-content-center">
				<div class="d-flex flex-grow-1 flex-center bg-white-o-5 py-5">
					<a class="edit-product" data-id="{{product.id}}" data-bs-toggle="modal" data-bs-target="#foxorders_modal_form_edit">
						{% include 'Extentions/Icons/edit_icon.html.twig' with {'size': 10, 'color': 'white'} %}
					</a>
				</div>
			</div>
		</div>
	</div>
{% else %}
	{{ 'app.global.detail.no_record_found'|trans }}
{% endfor %}