{% sw_extends '@Storefront/storefront/component/product/quickview/minimal.html.twig' %}

{% block component_product_quickview_minimal %}
{% set name = page.product.translated.name %}
{% set manufacturer = page.product.manufacturer %}

<div class="quickview-minimal-container container js-magnifier-zoom-image-container">
	{% block component_product_quickview_minimal_top %}
		<div class="row quickview-minimal-top">
			{% block component_product_quickview_minimal_img %}
				<div class="col-12 col-lg-7 quickview-minimal-image">
					{% if page.product.media %}
						{% set mediaItems = page.product.media.media %}
						{% sw_include '@Storefront/storefront/element/cms-element-image-gallery.html.twig' with {
                                'mediaItems': mediaItems,
                                'zoom': true,
                                'zoomModal': false,
                                'displayMode': 'contain',
                                'gutter': 5,
                                'minHeight': '320px',
                                'navigationArrows': 'inside',
                                'navigationDots': 'inside',
                                'galleryPosition': 'left',
                                'isProduct': true,
                                'fallbackImageTitle': page.product.translated.name,
                                'startIndexThumbnails': page.product.cover.position + 1,
                                'startIndexSlider': page.product.cover.position + 1
                            } %}
					{% endif %}
				</div>
			{% endblock %}

			{% block component_product_quickview_minimal_product %}
					<div class="col-12 col-lg-5 quickview-minimal-product">
						{% block component_product_quickview_minimal_product_name %}
							<a href="{{ seoUrl('frontend.detail.page', {productId: page.product.id}) }}" target="_blank" rel="noopener" title="{{ name }}" class="h4 quickview-minimal-product-name">
								{{ name }}
							</a>
						{% endblock %}

						{% block component_product_quickview_minimal_product_number %}
						    
							<p class="quickview-minimal-product-number">
    							{{ 'detail.productNumberLabel'|trans|sw_sanitize }}
    							{{ page.product.productNumber }}
							</p>
						{% endblock %}

						{% block component_product_quickview_minimal_product_manufacturer %}
							{% if manufacturer %}
								<a href="{{ manufacturer.link }}" target="_blank" rel="noopener" title="{{ manufacturer.translated.name }}" class="quickview-minimal-product-manufacturer">
									{% if manufacturer.media %}
										{% sw_thumbnails 'quickview-minimal-product-manufacturer-logo' with {
                                            media: manufacturer.media,
                                            sizes: {
                                                default: '360px'
                                            },
                                            attributes: {
                                                class: 'quickview-minimal-product-manufacturer-logo',
                                                alt: ( manufacturer.translated.name ?: '')
                                            }
                                        } %}
									{% else %}
										{{ manufacturer.translated.name }}
									{% endif %}
								</a>
							{% endif %}
						{% endblock %}

						{% block component_product_quickview_minimal_product_reviews %}
							<div class="col-12 product-detail-review-container">
									<span class="product-detail-reviews">
										{% if page.product.ratingAverage %}
											{% sw_include '@Storefront/storefront/component/review/rating.html.twig' with {
												points: page.product.ratingAverage,
												style: 'text-primary'
											} %}
										{% else %}
										
										{% endif %}
									</span>
								</div>
						{% endblock %}
						 
						 {% if page.product.translated.description %}
							<div class="quickview-minimal-product-short-description">
								{{ page.product.translated.description|raw|striptags|sw_sanitize|u.truncate(180, '…') }}
							</div>
						{% endif %}

						{% block bc_component_product_quickview_minimal_product_price_unit %}
						    {% sw_include '@Storefront/storefront/component/buy-widget/buy-widget-price.html.twig' with{
						        product: page.product
						    } %}
						{% endblock %}

						{% set id = page.product.id %}
						<div class="product-action">
							{% set isAvailable = not page.product.isCloseout or (page.product.stock >= page.product.minPurchase) %}
							{% set displayFrom = page.product.calculatedPrices.count > 1 %}
							{% set displayBuyButton = isAvailable and not displayFrom and page.product.childCount <= 0 %}

							{% if displayBuyButton and config('core.listing.allowBuyInListing') and page.product.parentId is null %}
								{% block bc_component_product_box_action_buy %}
									{# @var product \Shopware\Core\Content\Product\SalesChannel\SalesChannelProductEntity #}
									<form action="{{ path('frontend.checkout.line-item.add') }}" method="post" class="buy-widget" data-add-to-cart="true">
										{% block bc_component_product_box_action_form %}
											{% block bc_component_product_box_action_buy_redirect_input %}
												{# fallback redirect back to detail page is deactivated via js #}
												<input type="hidden" name="redirectTo" value="frontend.checkout.cart.page"/>
												<input type="hidden" name="redirectParameters" data-redirect-parameters="true" value='{"productId": "{{ page.product.id }}"}'/>
											{% endblock %}

											{% block bc_component_product_box_action_buy_info %}
												<input type="hidden" name="lineItems[{{ id }}][id]" value="{{ id }}">
												<input type="hidden" name="lineItems[{{ id }}][referencedId]" value="{{ id }}">
												<input type="hidden" name="lineItems[{{ id }}][type]" value="product">
												<input type="hidden" name="lineItems[{{ id }}][stackable]" value="1">
												<input type="hidden" name="lineItems[{{ id }}][removable]" value="1">
												<input type="hidden" name="lineItems[{{ id }}][quantity]" value="{{ product.minPurchase }}">
											{% endblock %}

											{% block bc_component_product_quickview_minimal_buy_quantity_container %}
												<div class="col-12 d-flex justify-content-end mb-2">
													{% set selectQuantityThreshold = 100 %}
													{% block page_product_detail_buy_quantity %}
														{% block page_product_detail_buy_quantity_input_group %}
															<div class="input-group product-detail-quantity-group quantity-selector-group" data-quantity-selector="true">
																{% block page_product_detail_buy_quantity_input %}
																	<button type="button" class="btn btn-outline-light btn-minus js-btn-minus">
																		{% sw_icon 'minus' style {'size': 'xs'} %}
																	</button>
																	<input type="number" name="lineItems[{{ id }}][quantity]" class="form-control js-quantity-selector quantity-selector-group-input product-detail-quantity-input" min="{{ page.product.minPurchase }}" max="{{ page.product.calculatedMaxPurchase }}" step="{{ page.product.purchaseSteps }}" value="{{ page.product.minPurchase }}"/>
																	<button type="button" class="btn btn-outline-light btn-plus js-btn-plus">
																		{% sw_icon 'plus' style {'size': 'xs'} %}
																	</button>
																{% endblock %}
																{% block page_product_detail_buy_quantity_input_unit %}
																	{% if page.product.translated.packUnit %}
																		<span class="input-group-text">
																			{% if page.product.minPurchase > 1 and page.product.translated.packUnitPlural %}
																				{{ page.product.translated.packUnitPlural }}
																			{% elseif page.product.translated.packUnit %}
																				{{ page.product.translated.packUnit }}
																			{% endif %}
																		</span>
																	{% endif %}
																{% endblock %}
															</div>
														{% endblock %}
													{% endblock %}
												</div>
											{% endblock %}
											{% block bc_component_product_box_action_buy_button %}
												<div class="d-grid">
													<button class="btn btn-buy">
														{% block bc_page_product_detail_product_buy_button_label %}
															{{ 'listing.boxAddProduct'|trans|sw_sanitize }}
														{% endblock %}
													</button>
												</div>
											{% endblock %}
										{% endblock %}
									</form>
								{% endblock %}
							{% endif %}
						</div>
					</div>
				{% endblock %}
			</div>
		{% endblock %}

		{% block component_product_quickview_minimal_footer %}
			<div class="quickview-minimal-footer">
				{% block bc_component_product_quickview_minimal_action_detail %}
					<a href="{{ seoUrl('frontend.detail.page', {productId: page.product.id}) }}" rel="noopener" class="btn btn-block btn-light btn-details" title="{{ "listing.boxProductDetails"|trans|striptags }}">
						{{ "listing.boxProductDetails"|trans|sw_sanitize }}
					</a>
				{% endblock %}
			</div>
		{% endblock %}
	</div>
{% endblock %}
