{% sw_extends '@Storefront/storefront/component/product/card/box-standard.html.twig' %}

{% set HideshowVariants = theme_config('theme-product-variants-hideshow') %}
{% set HideshowRating = theme_config('theme-product-rating-hideshow') %}

{% block component_product_box_image %}
	<div class="product-image-wrapper">
		<a
			href="{{ seoUrl('frontend.detail.page', {'productId': id}) }}"
			title="{{ name }}"
			class="product-image-link is-{{ displayMode }}"
		>
			{# fallback if display mode is not set #}
			{% set displayMode = displayMode ?: 'standard' %}

			{# set display mode 'cover' for box-image with standard display mode #}
			{% if layout == 'image' and displayMode == 'standard' %}
				{% set displayMode = 'cover' %}
			{% endif %}

			{% block component_product_box_image_inner %}
				{{ parent() }}

				{% sw_include '@BrandCrockElegantTrend/storefront/Aquapages/product/second-image.html.twig' %}
			{% endblock %}

			{% if config('core.cart.wishlistEnabled') %}
				{% block component_product_box_wishlist_action %}
					{{ parent() }}
				{% endblock %}
			{% endif %}
		</a>

		{% set HideQuickViewOption = theme_config('theme-product-box-quickview-hideshow') %}

		{% if HideQuickViewOption %}
			{% sw_include '@Storefront/storefront/Aquapages/layout/quick-view.html.twig' %}
		{% endif %}

        {% block component_product_box_action_aqua %}
			{% sw_include '@Storefront/storefront/component/product/card/action.html.twig' %}
        {% endblock %}
	</div>
{% endblock %}

{% block component_product_box_rating %}
    {% if HideshowRating %}
    	{{ parent() }}
    {% endif %}
{% endblock %}

{% block component_product_box_variant_characteristics %}                             
	{% if HideshowVariants %}
		{% set bcVariantGroups = product.extensions.bcVariantOptions.get('groups') %}

		{% if (displayParent or product.variation|length < 1) and bcVariantGroups !== null %}
			<div class="product-variant-characteristics">
				{% for options in bcVariantGroups %}
					{% if options %}
						<ul class="variants colors">
							{% for option in options %}
								{% if option.displayType == 'color' and option.colorCode %}
									<li class="variant-colors" data-id="{{ product.id }}" data-image="{{ option.image }}">
										<span class="{{ option.name }}" style="background:{{ option.colorCode  }}"></span>
									</li>
								{% endif %}
							{% endfor %}
						</ul>
					{% endif %}
				{% endfor %}
			</div>
		{% else %}
			{{ parent() }}
		{% endif %}
    {% endif %}
	
{% endblock %}

{% block component_product_box_action %} {% endblock %}

