{% form_theme form with app_form_themes() only %}
{% set selectedVariant = this.selectedVariant %}
{% set selectedOption = this.selectedOption %}
{% set hasSingleVariant = form.variant.vars.choices|length == 1 %}
{% set hasOptionField = form.option is defined %}
{% set hasQuantityField = form.quantity is defined %}
{% set galleryImages = this.galleryImages %}
{% set primaryImage = galleryImages[0] ?? null %}
{% set productImage = primaryImage and primaryImage.path ? primaryImage : (product.secondImage and product.secondImage.path ? product.secondImage : product.image) %}
{% set productImagePath = productImage and productImage.path ? productImage.path : null %}
{% set productImageWidth = productImage and productImage.width ? productImage.width : 640 %}
{% set productImageHeight = productImage and productImage.height ? productImage.height : 640 %}
{% set visibleAwards = this.visibleAwards %}
{% set isProductSoldOut = this.productOutOfStock %}
{% set showVariantAvailabilityIndicators = this.shouldShowSelectedVariantAvailabilityIndicators %}
{% set showVariantLimitedStockIndicator = this.shouldShowSelectedVariantLimitedStockIndicator %}
{% set isVariantUnavailable = this.selectedVariantOutOfStock %}
{% set canAddToCart = not isProductSoldOut and not isVariantUnavailable and hasQuantityField %}
{% set canLinkToProductPage = this.productPageFrontEnabled and product.category and product.category.slug and product.slug and app.request.attributes.get('_canonical_route') != 'shop_product' %}
{% set detailUrl = canLinkToProductPage ? path('shop_product', { categorySlug: product.category.slug, slug: product.slug }) : null %}
{% set reviewRatingFill = reviewRatingValue is not null ? (reviewRatingValue * 20)|round : 0 %}
{% set showPrices = this.shouldShowPrices %}
{% set orderingDisabledForVacation = this.orderingDisabledForVacation %}
{% set vacationAt = this.vacationAt %}
{% set reviewIndicator %}
    {% if reviewsEnabled %}
        <{{ detailUrl ? 'a' : 'button' }}
            class="theme-shop-product-card__reviews"
            {% if detailUrl %}
                data-turbo-frame="_top"
                href="{{ detailUrl }}#product-reviews"
            {% else %}
                type="button"
                data-action="live#action"
                data-live-action-param="showProductReviewsModal"
                aria-haspopup="dialog"
                aria-controls="product-reviews-modal"
            {% endif %}
            aria-label="{% if reviewRatingValue is not null %}{{ 'marketing.review.public.rating'|trans({'%rating%': reviewRatingValue|number_format(1, ',', ' ')}) }} — {% endif %}{{ 'marketing.review.public.count'|trans({'%count%': reviewCount}) }}"
        >
            <span class="theme-shop-product-card__review-star" aria-hidden="true">
                <svg viewBox="0 0 20 20">
                    <path d="M10 1.7l2.42 4.9 5.41.79-3.91 3.81.92 5.39L10 14.04l-4.84 2.55.92-5.39-3.91-3.81 5.41-.79L10 1.7z" fill="none" stroke="currentColor" stroke-width="1.35" stroke-linejoin="round" />
                </svg>
                <span style="width: {{ reviewRatingFill }}%">
                    <svg viewBox="0 0 20 20">
                        <path d="M10 1.7l2.42 4.9 5.41.79-3.91 3.81.92 5.39L10 14.04l-4.84 2.55.92-5.39-3.91-3.81 5.41-.79L10 1.7z" fill="currentColor" stroke="currentColor" stroke-width="1.35" stroke-linejoin="round" />
                    </svg>
                </span>
            </span>
            {% if reviewRatingValue is not null %}
                <strong>{{ reviewRatingValue|number_format(1, ',', '') }}/5</strong>
            {% endif %}
            <span>{{ 'marketing.review.public.count'|trans({'%count%': reviewCount}) }}</span>
        </{{ detailUrl ? 'a' : 'button' }}>
    {% endif %}
{% endset %}

<div {{ attributes.defaults({ class: 'theme-shop-product-card-live' }) }}>
    {{ form_start(form, {'attr' : { 'class': 'theme-shop-product-form', 'data-model': 'on(change)|*', 'data-action' : 'live#action:prevent', 'data-live-action-param' : 'debounce(300)|save', 'novalidate': 'true' }}) }}
    <article class="theme-shop-product-card">
        <div class="theme-shop-product-card__media{% if galleryImages|length > 1 %} theme-shop-product-card__media--gallery{% endif %}">
            {% if galleryImages|length > 1 %}
                <div class="product-gallery splide" data-controller="product-gallery">
                    <div class="splide__track">
                        <ul class="splide__list">
                            {% for galleryImage in galleryImages %}
                                <li class="splide__slide">
                                    <twig:Image
                                        alt="{{ product.name|striptags }}"
                                        class="theme-shop-product-card__image"
                                        row:class="theme-shop-product-card__image-row"
                                        row:style="width: 100%; height: 100%; max-width: 100%;"
                                        img:class="theme-shop-product-card__image-element"
                                        lazy="{{ false }}"
                                        quality="{{ 70 }}"
                                        responsive="{{ false }}"
                                        path="{{ galleryImage.path }}"
                                        imageWidth="{{ galleryImage.width ?: 640 }}"
                                        imageHeight="{{ galleryImage.height ?: 640 }}"
                                    />
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            {% elseif productImagePath %}
                <twig:Image
                    alt="{{ product.name|striptags }}"
                    class="theme-shop-product-card__image"
                    row:class="theme-shop-product-card__image-row"
                    row:style="width: 100%; height: 100%; max-width: 100%;"
                    img:class="theme-shop-product-card__image-element"
                    fit="contain"
                    lazy="{{ false }}"
                    quality="{{ 70 }}"
                    responsive="{{ false }}"
                    path="{{ productImagePath }}"
                    imageWidth="{{ productImageWidth }}"
                    imageHeight="{{ productImageHeight }}"
                />
            {% endif %}

            {% if visibleAwards|length > 0 %}
                <div class="theme-shop-product-card__awards">
                    {% for award in visibleAwards %}
                        {% if award.image and award.image.path %}
                            <button
                                type="button"
                                data-action="live#action"
                                data-live-action-param="showAwardModal"
                                data-live-award-id-param="{{ award.id.toString }}">
                                <twig:Image
                                    alt="{{ award.title ?? product.name|striptags }}"
                                    class="theme-shop-product-card__award"
                                    img:class="h-full w-full object-contain"
                                    lazy="{{ false }}"
                                    quality="{{ 50 }}"
                                    responsive="{{ false }}"
                                    path="{{ award.image.path }}"
                                    imageWidth="200"
                                    imageHeight="200"
                                />
                            </button>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        <div class="theme-shop-product-card__body">
            {% set variant = selectedVariant %}
            {% set price = variant.getVariantPriceByGroupAvailable %}
            {% set optionPrice = selectedOption ? selectedOption.price : 0 %}
            {% set displayPrice = (price.getPrice ?: 0) + optionPrice %}
            {% set displayDiscountPrice = price.getPriceDiscount ? price.getPriceDiscount + optionPrice : null %}
            {% set discountPrice = displayDiscountPrice|price_format %}

            <div class="theme-shop-product-card__commerce-line">
                {% if product.ribbonCustom %}
                    <div class="theme-shop-product-card__ribbon" style="background-color: {{ product.ribbonCustomColor ?: 'var(--color-accent)' }};">
                        {{ product.ribbonCustom|raw }}
                    </div>
                {% endif %}
                {% if showVariantLimitedStockIndicator and this.selectedVariantLimitedStock and not isProductSoldOut and not isVariantUnavailable %}
                    <div class="theme-shop-product-card__state">{{ 'shop.limited_quantity'|trans }}</div>
                {% endif %}
                {% if isProductSoldOut %}
                    <div class="theme-shop-product-card__state">{{ 'cart.outofstock'|trans }}</div>
                {% endif %}
                {% if showVariantAvailabilityIndicators and isVariantUnavailable and not isProductSoldOut %}
                    <div class="theme-shop-product-card__state">{{ 'shop.variant_outofstock'|trans }}</div>
                {% endif %}
                {% if showPrices %}
                    <div class="theme-shop-product-card__price">
                    {% if discountPrice %}
                        <span class="theme-shop-product-card__price-old">{{ displayPrice|price_format }} €</span>
                        <span>{{ discountPrice }} €</span>
                    {% else %}
                        <span>{{ displayPrice|price_format }} €</span>
                    {% endif %}
                    <sup>{{ 'shop.tax_included_short'|trans }}</sup>
                    </div>
                {% endif %}
            </div>

            <div class="theme-shop-product-card__header">
                {% if product.header|default(null) %}
                    <div class="theme-shop-product-card__cuvee-header">{{ product.header|raw }}</div>
                {% endif %}
                <h3 class="theme-shop-product-card__title">{{ product.name|raw }}</h3>
                {% if product.quality %}
                    <div class="theme-shop-product-card__quality">{{ product.quality|raw }}</div>
                {% endif %}
                {{ reviewIndicator }}
                {% if showPrices and this.selectedVariantHasDegressive %}
                    <button
                        type="button"
                        class="theme-shop-product-card__degressive"
                        data-action="live#action"
                        data-live-action-param="showDegressiveModal"
                        {% if selectedVariant %}data-live-variant-id-param="{{ selectedVariant.id }}"{% endif %}>
                        {{ 'shop.degressive_link'|trans() }}
                    </button>
                {% endif %}
            </div>

            <div class="theme-shop-product-card__controls">
                {% if showPrices %}
                    {% if not isProductSoldOut %}
                    <div class="theme-shop-product-card__fields">
                        <div class="theme-shop-product-card__field theme-shop-product-card__field--variant">
                            {% if hasSingleVariant %}
                                {{ form_widget(form.variant, {'attr' : {'class' : 'hidden'}}) }}
                                <div class="theme-shop-product-card__single-choice" aria-label="{{ 'shop.select_volume'|trans }}">
                                    {{ selectedVariant ? selectedVariant.label : '' }}
                                </div>
                            {% else %}
                                <label class="sr-only" for="{{ form.variant.vars.id }}">{{ 'shop.select_volume'|trans }}</label>
                                {{ form_widget(form.variant, {'attr' : {'class' : 'theme-shop-select'}}) }}
                            {% endif %}
                        </div>

                        {% if hasOptionField %}
                            <div class="theme-shop-product-card__field theme-shop-product-card__field--option">
                                <label class="sr-only" for="{{ form.option.vars.id }}">{{ 'shop.select_option'|trans }}</label>
                                {{ form_widget(form.option, {'attr' : {'class' : 'theme-shop-select'}}) }}
                            </div>
                        {% endif %}

                        {% if (showVariantAvailabilityIndicators and isVariantUnavailable) or not hasQuantityField %}
                            <div class="theme-shop-product-card__unavailable">{{ 'shop.variant_outofstock'|trans }}</div>
                        {% elseif hasQuantityField %}
                            <div data-controller="quantity-stepper" class="theme-shop-quantity">
                                <label class="theme-shop-quantity__label" for="{{ form.quantity.vars.id }}">{{ 'shop.quantity_item'|trans }}</label>
                                {{ form_widget(form.quantity, {
                                    attr : {
                                        'class' : 'theme-shop-quantity__input',
                                        'inputmode': 'numeric',
                                        'data-model': 'norender|' ~ form.quantity.vars.full_name,
                                        'data-quantity-stepper-target': 'input',
                                        'data-action': 'input->quantity-stepper#syncDisplay change->quantity-stepper#syncDisplay'
                                    }
                                }) }}
                                <div class="theme-shop-quantity__stepper">
                                    <button
                                        type="button"
                                        data-action="quantity-stepper#decrement"
                                        aria-label="{{ 'shop.quantity'|trans }} -">
                                        -
                                    </button>
                                    <span data-quantity-stepper-target="display">
                                        {{ form.quantity.vars.value ?: 1 }}
                                    </span>
                                    <button
                                        type="button"
                                        data-action="quantity-stepper#increment"
                                        aria-label="{{ 'shop.quantity'|trans }} +">
                                        +
                                    </button>
                                </div>
                            </div>
                        {% endif %}
                    </div>
                    {% else %}
                        <div class="theme-shop-product-card__unavailable">{{ 'cart.outofstock'|trans }}</div>
                    {% endif %}
                {% else %}
                    <div class="theme-shop-product-card__unavailable">
                        {% if orderingDisabledForVacation %}
                            {{ 'shop.reopening_at'|trans({ '%date%': vacationAt|format_date('long', locale: app.request.locale) }) }}
                        {% else %}
                            {{ 'shop.view_with_partner_code'|trans }}
                        {% endif %}
                    </div>
                {% endif %}

                <div class="theme-shop-product-card__actions">
                    {% if canLinkToProductPage %}
                        <a
                            href="{{ path('shop_product', { categorySlug: product.category.slug, slug: product.slug }) }}"
                            target="_top"
                            data-turbo-frame="_top"
                            class="theme-button-stroke theme-hover-link-effect theme-shop-product-card__detail">
                            {{ 'shop.details'|trans()|raw }}
                        </a>
                    {% elseif not this.productPageFrontEnabled %}
                        <button
                            type="button"
                            class="theme-button-stroke theme-hover-link-effect theme-shop-product-card__detail"
                            data-action="live#action"
                            data-live-action-param="showProductDetailModal">
                            {{ 'shop.details'|trans()|raw }}
                        </button>
                    {% endif %}

                    {% if showPrices %}
                        {% if orderingDisabledForVacation %}
                            <div class="theme-shop-product-card__unavailable">
                                {{ 'shop.reopening_at'|trans({ '%date%': vacationAt|format_date('long', locale: app.request.locale) }) }}
                            </div>
                        {% else %}
                            <button
                                type="submit"
                                class="theme-button-fill theme-hover-link-effect theme-shop-product-card__submit{% if not canAddToCart %} theme-is-disabled{% endif %}"
                                {% if not canAddToCart %}disabled aria-disabled="true"{% endif %}>
                                {{ 'shop.add_cart'|trans() }}
                            </button>
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </article>

    {% if not form.variant.isRendered() %}
        {{ form_widget(form.variant, { attr: { class: 'hidden' } }) }}
    {% endif %}
    {% if hasQuantityField and not form.quantity.isRendered() %}
        {{ form_widget(form.quantity, { attr: { class: 'hidden' } }) }}
    {% endif %}
    {% if form.option is defined and not form.option.isRendered() %}
        {{ form_widget(form.option, { attr: { class: 'hidden' } }) }}
    {% endif %}
    {% if form._token is defined and not form._token.isRendered() %}
        {{ form_widget(form._token) }}
    {% endif %}
    {{ form_end(form, { render_rest: false }) }}
</div>
