{% 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 hasSingleOption = hasOptionField and form.option.vars.choices|length == 1 %}
{% set hasQuantityField = form.quantity is defined %}
{% set galleryImages = this.galleryImages %}
{% set primaryImage = galleryImages[0] ?? null %}
{% set productImagePath = primaryImage and primaryImage.path ? primaryImage.path : (product.secondImage and product.secondImage.path ? product.secondImage.path : product.image.path) %}
{% 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 app.request.attributes.get('_route') != 'shop_product' %}
{% set detailUrl = canLinkToProductPage ? path('shop_product', { categorySlug: product.category.slug, slug: product.slug }) : null %}
{% set showReviewRating = reviewsEnabled %}
{% set reviewRatingFill = reviewRatingValue is not null ? (reviewRatingValue * 20)|round : 0 %}
{% set showPrices = this.shouldShowPrices %}
{% set orderingDisabledForVacation = this.orderingDisabledForVacation %}
{% set vacationAt = this.vacationAt %}
{% set rawCuveeColor = product.color|default('')|trim %}
{% set hasCuveeColor = product.enableColor and rawCuveeColor matches '/^#[0-9a-fA-F]{6}$/' %}
{% set reviewIndicator %}
    {% if showReviewRating %}
        <{{ detailUrl ? 'a' : 'button' }}
            class="inline-flex w-fit cursor-pointer items-center gap-2 border-0 bg-transparent p-0 font-label text-[11px] font-semibold uppercase tracking-[0.12em] text-primary/60 underline decoration-transparent underline-offset-4 transition hover:text-primary hover:decoration-current"
            {% 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="relative inline-block h-5 w-5 shrink-0 text-secondary" aria-hidden="true">
                <svg class="absolute inset-0 h-5 w-5 text-primary/20" 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 class="absolute inset-y-0 left-0 overflow-hidden" style="width: {{ reviewRatingFill }}%">
                    <svg class="h-5 w-5 max-w-none" viewBox="0 0 20 20" aria-hidden="true">
                        <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 %}
                <span>{{ reviewRatingValue|number_format(1, ',', '') }}/5</span>
            {% endif %}
            <span>{{ 'marketing.review.public.count'|trans({'%count%': reviewCount}) }}</span>
        </{{ detailUrl ? 'a' : 'button' }}>
    {% endif %}
{% endset %}

<div {{ attributes.defaults({ class: 'group h-full overflow-hidden bg-surface-container-low' }) }}>
    {{ form_start(form, {'attr' : { 'class': 'flex h-full w-full flex-col', 'data-model': 'on(change)|*', 'data-action' : 'live#action:prevent', 'data-live-action-param' : 'debounce(300)|save', 'data-cart-add-form': 'true', 'novalidate': 'true' }}) }}
    <div class="flex h-full flex-col px-8 pt-8 pb-6">
        <div class="relative mb-8 w-full pb-14">
            {% if hasCuveeColor %}
                <div
                    class="cuvee-color-halo cuvee-color-halo--card"
                    style="--cuvee-color: {{ rawCuveeColor }};"
                    aria-hidden="true"
                ></div>
            {% endif %}

            {% if galleryImages|length > 1 %}
                <div class="relative z-10 flex h-96 items-center justify-center overflow-visible">
                    <div class="product-gallery splide w-full max-w-sm" data-controller="product-gallery">
                        <div class="splide__track">
                            <ul class="splide__list">
                                {% for galleryImage in galleryImages %}
                                    <li class="splide__slide">
                                        <div class="flex h-96 items-center justify-center overflow-hidden px-4">
                                            <twig:Image
                                                alt="{{ product.name|striptags }}"
                                                class="h-full w-full"
                                                row:class="flex h-full w-full items-center justify-center"
                                                row:style="width: 100%; height: 100%; max-width: 100%;"
                                                img:class="mx-auto h-full max-h-full w-auto max-w-full object-contain"
                                                lazy="{{ false }}"
                                                quality="{{ 70 }}"
                                                responsive="{{ false }}"
                                                path="{{ galleryImage.path }}"
                                                imageWidth="{{ galleryImage.width ?: 640 }}"
                                                imageHeight="{{ galleryImage.height ?: 640 }}"
                                            />
                                        </div>
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            {% elseif productImagePath %}
                <div class="relative z-10 flex h-96 items-center justify-center overflow-hidden px-4">
                    <twig:Image
                        mapping="image"
                        responsive="{{ false }}"
                        path="{{ productImagePath }}"
                        alt="{{ product.name|striptags }}"
                        imageWidth="720"
                        imageHeight="960"
                        fit="contain"
                        quality="{{ 70 }}"
                        lazy="{{ false }}"
                        class="h-full w-full"
                        row:class="flex h-full w-full items-center justify-center"
                        row:style="width: 100%; height: 100%; max-width: 100%;"
                        img:class="mx-auto block h-full max-h-full w-auto max-w-full object-contain"
                    />
                </div>
            {% endif %}

            {% if product.ribbonCustom %}
                <div class="pointer-events-none absolute -top-8 left-4 z-20 text-center shadow-lg"
                     style="background-color: {{ product.ribbonCustomColor ?: '#AD9C76' }};">
                    <div class="px-4 py-2 font-label text-[10px] uppercase tracking-[0.18em] text-white">
                        {{ product.ribbonCustom|raw }}
                    </div>
                </div>
            {% endif %}
            {% if product.new %}
                <div class="pointer-events-none absolute top-4 right-4 z-20 bg-secondary px-3 py-2 font-label text-[10px] uppercase tracking-[0.18em] text-white shadow-lg">
                    {{ 'shop.new'|trans }}
                </div>
            {% endif %}
            {% if showVariantLimitedStockIndicator and this.selectedVariantLimitedStock and not isProductSoldOut and not isVariantUnavailable %}
                <div class="pointer-events-none absolute top-4 left-4 z-20 text-center shadow-lg">
                    <div class="bg-primary px-4 py-2 font-label text-[10px] uppercase tracking-[0.18em] text-white">
                        {{ 'shop.limited_quantity'|trans }}
                    </div>
                </div>
            {% endif %}
            {% if isProductSoldOut %}
                <div class="pointer-events-none absolute top-4 left-4 z-20 text-center shadow-lg">
                    <div class="bg-primary px-4 py-2 font-label text-[10px] uppercase tracking-[0.18em] text-white">
                        {{ 'cart.outofstock'|trans }}
                    </div>
                </div>
            {% endif %}
            {% if showVariantAvailabilityIndicators and isVariantUnavailable and not isProductSoldOut %}
                <div class="pointer-events-none absolute top-4 left-4 z-20 text-center shadow-lg">
                    <div class="bg-primary px-4 py-2 font-label text-[10px] uppercase tracking-[0.18em] text-white">
                        {{ 'shop.variant_outofstock'|trans }}
                    </div>
                </div>
            {% endif %}

            {% if visibleAwards|length > 0 %}
                <div class="absolute bottom-4 left-0 z-10 flex w-16 flex-col items-center gap-3">
                    {% for award in visibleAwards %}
                        {% if award.image and award.image.path %}
                            <button
                                type="button"
                                class="block w-full cursor-pointer transition hover:scale-105"
                                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="w-16"
                                    row:class="w-full"
                                    img:class="h-full w-full object-contain"
                                    lazy="{{ false }}"
                                    quality="{{ 50 }}"
                                    responsive="{{ false }}"
                                    path="{{ award.image.path }}"
                                    imageWidth="160"
                                    imageHeight="160"
                                />
                            </button>
                        {% endif %}
                    {% endfor %}
                </div>
            {% endif %}

            {% if canLinkToProductPage %}
                <a
                    href="{{ detailUrl }}"
                    target="_top"
                    data-turbo-frame="_top"
                    class="absolute right-0 bottom-0 cursor-pointer font-label text-[11px] uppercase tracking-[0.18em] text-primary/55 underline underline-offset-4 transition hover:text-primary"
                >
                    {{ 'shop.detail'|trans|raw }}
                </a>
            {% elseif not this.productPageFrontEnabled %}
                <button
                    type="button"
                    class="absolute right-0 bottom-0 cursor-pointer font-label text-[11px] uppercase tracking-[0.18em] text-primary/55 underline underline-offset-4 transition hover:text-primary"
                    data-action="live#action"
                    data-live-action-param="showProductDetailModal"
                >
                    {{ 'shop.detail'|trans|raw }}
                </button>
            {% endif %}
        </div>

        <div class="mt-auto flex h-full flex-col border-t border-primary/10 pt-6">
            {% if product.header %}
                <div class="mb-3 font-label text-[12px] uppercase tracking-[0.18em] text-secondary">{{ product.header|raw }}</div>
            {% endif %}

            <div class="min-h-[4.25rem]">
                <div class="font-display text-[28px] leading-[1.02] font-normal [font-optical-sizing:auto] text-primary">
                    {{ product.name|raw }}
                </div>
            </div>

            {% if showReviewRating %}
                <div class="mt-3">
                    {{ reviewIndicator }}
                </div>
            {% endif %}

            {% if showPrices %}
                {% 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 ? displayDiscountPrice|price_format : null %}

                <div class="mt-3">
                <div class="flex items-end gap-4">
                    <div class="text-left">
                        {% if product.quality %}
                            <div class="font-label text-[12px] uppercase tracking-[0.18em] text-on-surface-variant">{{ product.quality|raw }}</div>
                        {% endif %}
                    </div>
                    <div class="ml-auto shrink-0 text-right">
                        <div class="flex items-baseline justify-end gap-2">
                            {% if discountPrice %}
                                <span class="text-sm text-on-surface-variant line-through">
                                    {{ displayPrice|price_format }} €
                                </span>
                                <span class="font-display text-[22px] font-medium [font-optical-sizing:auto] text-primary">
                                    {{ discountPrice }} €
                                </span>
                            {% else %}
                                <span class="font-display text-[22px] font-medium [font-optical-sizing:auto] text-primary">
                                    {{ displayPrice|price_format }} €
                                </span>
                            {% endif %}
                        </div>
                    </div>
                </div>

                {% if this.selectedVariantHasDegressive %}
                    <div class="mt-3 min-h-5 text-left">
                        <button
                            type="button"
                            class="w-fit cursor-pointer font-label text-[11px] uppercase tracking-[0.18em] text-primary/55 underline underline-offset-4 transition hover:text-primary"
                            data-action="live#action"
                            data-live-action-param="showDegressiveModal"
                            {% if selectedVariant %}data-live-variant-id-param="{{ selectedVariant.id }}"{% endif %}
                        >
                            {{ 'shop.degressive_link'|trans }}
                        </button>
                    </div>
                {% endif %}
                </div>
            {% endif %}

            <div class="mt-6 flex w-full flex-1 flex-col">
                {% if showPrices %}
                    {% if not isProductSoldOut %}
                    <div class="flex w-full flex-col gap-4">
                        <div class="grid w-full grid-cols-[minmax(0,1fr)_5rem] items-center gap-4 text-left">
                            <div class="min-w-0">
                                {% if hasSingleVariant %}
                                    {{ form_widget(form.variant, {'attr' : {'class' : 'hidden'}}) }}
                                    <div class="min-w-[110px] px-1 py-3 text-sm text-primary">
                                        {{ selectedVariant ? selectedVariant.label : '' }}
                                    </div>
                                {% else %}
                                    <div class="relative">
                                        {{ form_widget(form.variant, {'attr' : {'class' : 'h-[46px] w-full appearance-none border border-primary/15 bg-white px-4 pr-10 text-sm text-primary outline-none rounded-none'}}) }}
                                        <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-primary/60">
                                            <span aria-hidden="true" class="material-symbols-outlined text-[18px] leading-none">expand_more</span>
                                        </span>
                                    </div>
                                {% endif %}
                            </div>

                            {% if hasOptionField %}
                                {% if hasSingleOption %}
                                    {{ form_widget(form.option, {'attr' : {'class' : 'hidden'}}) }}
                                {% else %}
                                    <div class="col-span-2 w-full min-w-0">
                                        <div class="relative">
                                            {{ form_widget(form.option, {'attr' : {'class' : 'h-[46px] w-full cursor-pointer appearance-none border border-primary/15 bg-white px-4 pr-10 text-sm text-primary outline-none rounded-none'}}) }}
                                            <span class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-primary/60">
                                                <span aria-hidden="true" class="material-symbols-outlined text-[18px] leading-none">expand_more</span>
                                            </span>
                                        </div>
                                    </div>
                                {% endif %}
                            {% endif %}

                            {% if (showVariantAvailabilityIndicators and isVariantUnavailable) or not hasQuantityField %}
                                <div class="col-span-2 w-full bg-primary/8 px-4 py-3 text-center font-label text-[12px] uppercase tracking-[0.16em] text-primary">
                                    {{ 'shop.variant_outofstock'|trans }}
                                </div>
                            {% elseif hasQuantityField %}
                                <div data-controller="quantity-stepper" class="col-start-2 row-start-1 w-20">
                                    {{ form_widget(form.quantity, {
                                        attr : {
                                            'class' : 'hidden',
                                            '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="quantity-stepper-mobile">
                                        <div class="flex h-[46px] items-center border border-primary/10 bg-white">
                                            <button
                                                type="button"
                                                class="flex h-[46px] w-10 cursor-pointer items-center justify-center text-lg leading-none text-primary"
                                                data-action="quantity-stepper#decrement"
                                                aria-label="{{ 'shop.quantity'|trans }} -"
                                            >
                                                -
                                            </button>
                                            <span
                                                class="flex min-w-10 items-center justify-center px-2 text-sm text-primary"
                                                data-quantity-stepper-target="display"
                                            >
                                                {{ form.quantity.vars.value ?: 1 }}
                                            </span>
                                            <button
                                                type="button"
                                                class="flex h-[46px] w-10 cursor-pointer items-center justify-center text-lg leading-none text-primary"
                                                data-action="quantity-stepper#increment"
                                                aria-label="{{ 'shop.quantity'|trans }} +"
                                            >
                                                +
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    {% else %}
                        <div class="bg-primary/8 px-4 py-4 text-center font-label text-[12px] uppercase tracking-[0.16em] text-primary">
                            {{ 'cart.outofstock'|trans }}
                        </div>
                    {% endif %}

                    <div class="mt-auto pt-4">
                    {% if orderingDisabledForVacation %}
                        <div class="inline-flex min-h-[50px] w-full items-center justify-center bg-primary/8 px-8 py-4 text-center text-[14px] text-primary">
                            {% include 'components/shop/_purchase_unavailable.html.twig' with {
                                orderingDisabledForVacation: orderingDisabledForVacation,
                                vacationAt: vacationAt
                            } only %}
                        </div>
                    {% else %}
                        <button
                            type="submit"
                            data-cart-add-trigger
                            class="{% if canAddToCart %}cursor-pointer bg-primary text-white hover:bg-primary-container{% else %}cursor-not-allowed bg-primary/15 text-primary/50{% endif %} inline-flex min-h-[50px] w-full items-center justify-center px-8 py-4 font-label text-[12px] uppercase tracking-[0.18em] transition-all"
                            {% if not canAddToCart %}disabled aria-disabled="true"{% endif %}
                        >
                            {{ 'cart.add_button'|trans }}
                        </button>
                    {% endif %}
                    </div>
                {% else %}
                    <div class="mt-auto inline-flex min-h-[50px] w-full items-center justify-center bg-primary/8 px-8 py-4 text-center text-[14px] text-primary">
                        {% include 'components/shop/_purchase_unavailable.html.twig' with {
                            orderingDisabledForVacation: orderingDisabledForVacation,
                            vacationAt: vacationAt
                        } only %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

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