{% form_theme form with app_form_themes() only %}
{% set selectedVariant = this.selectedVariant %}
{% set hasSingleVariant = form.variant.vars.choices|length == 1 %}
{% 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 productImageWidth = primaryImage and primaryImage.width ? primaryImage.width : (product.secondImage and product.secondImage.width ? product.secondImage.width : product.image.width) %}
{% set productImageHeight = primaryImage and primaryImage.height ? primaryImage.height : (product.secondImage and product.secondImage.height ? product.secondImage.height : product.image.height) %}
{% set productImageSrc = asset_glide(productImagePath, 'image', {
    fm: 'avif',
    q: 70,
    fit: 'contain',
    bg: '00000000',
    w: 640,
    h: 640
}) %}
{% set isProductSoldOut = product.soldOut is same as(true) %}
{% set isVariantUnavailable = form.variant.vars.data and form.variant.vars.data.isAvailable == false %}
{% set canAddToCart = not isProductSoldOut and not isVariantUnavailable %}
<div {{ attributes }} class="h-full">
    {{ form_start(form, {'attr' : { 'class': 'w-full h-full', 'data-model': 'on(change)|*', 'data-action' : 'live#action:prevent', 'data-live-action-param' : 'debounce(300)|save', 'novalidate': 'true' }}) }}
    <div class="flex h-full flex-col items-center">
        <div class="relative w-full max-w-sm pb-16">
            {% if galleryImages|length > 1 %}
                <div class="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">
                                            <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="flex h-96 items-center justify-center overflow-hidden">
                    <img
                        src="{{ productImageSrc }}"
                        alt="{{ product.name|striptags }}"
                        width="{{ productImageWidth }}"
                        height="{{ productImageHeight }}"
                        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-10 left-4 z-20 text-center shadow-lg"
                     style="background-color: {{ product.ribbonCustomColor ?: '#AD9C76' }};">
                    <div class="px-4 py-2 font-serif text-xs tracking-[0.2em] text-white uppercase sm:text-sm">
                        {{ product.ribbonCustom|raw }}
                    </div>
                </div>
            {% endif %}
            {% if product.awards|length > 0 %}
                <div class="absolute bottom-6 left-0 z-10 flex w-20 flex-col items-center gap-3">
                    {% for award in product.awards %}
                        {% 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-20"
                                    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 %}
            <button
                type="button"
                class="absolute right-0 bottom-8 cursor-pointer text-base text-[#707070] underline underline-offset-4 transition hover:text-black"
                data-action="live#action"
                data-live-action-param="showProductDetailModal"
            >
                {{ 'shop.detail'|trans()|raw }}
            </button>
        </div>
        <div class="border-gold flex h-full w-full max-w-sm flex-col gap-4 border-t-2 pt-4">
            <div class="font-serif text-lg tracking-wider uppercase lg:text-xl">{{ product.name|raw }}</div>
            <div class="font-serif">
                <div class="flex items-end">
                    <div class="text-sm tracking-wider lg:text-base">{{ product.quality|raw }}</div>
                    <div class="ml-auto flex-shrink-0">
                        {% set variant = selectedVariant %}
                        {% set price = variant.getVariantPriceByGroupAvailable %}
                        {% set discountPrice = price.getPriceDiscount|price_format %}

                        <div class="flex items-baseline gap-2">
                            {% if discountPrice %}
                                <span class="text-base text-neutral-500 line-through">
                                    {{ price.getPrice|price_format }} €
                                </span>
                                <span class="font-semibold">
                                    {{ discountPrice }} €
                                </span>
                            {% else %}
                                <span class="font-semibold">
                                    {{ price.getPrice|price_format }} €
                                </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% if this.selectedVariantHasDegressive %}
                    <div class="mt-2 min-h-5">

                        <button
                            type="button"
                            class="w-fit cursor-pointer text-sm text-[#707070] uppercase underline underline-offset-4 transition hover:text-black"
                            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>
            <div class="mt-auto w-full">
                {% if not isProductSoldOut %}
                    <div class="flex w-full flex-col gap-4">
                        <div
                            class="{% if isVariantUnavailable %}justify-between{% endif %} flex w-full flex-wrap items-center gap-4">
                            <div class="min-w-0 flex-1">
                                {% if hasSingleVariant %}
                                    {{ form_widget(form.variant, {'attr' : {'class' : 'hidden'}}) }}
                                    <div class="text-base">
                                        {{ selectedVariant ? selectedVariant.label : '' }}
                                    </div>
                                {% else %}
                                    {{ form_widget(form.variant, {'attr' : {'class' : ''}}) }}
                                {% endif %}
                            </div>
                            {% if isVariantUnavailable %}
                                <div
                                    class="text-primary bg-gray-300 p-1 text-center text-base">{{ 'cart.outofstock'|trans }}</div>
                            {% else %}
                                <div data-controller="quantity-stepper" class="flex-shrink-0 sm:w-16">
                                    {{ form_widget(form.quantity, {
                                        attr : {
                                            'class' : 'hidden w-full border border-1 p-2 sm:block',
                                            '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 sm:hidden">
                                        <div class="flex items-center rounded-full border border-black/15 bg-white">
                                            <button
                                                type="button"
                                                class="flex h-8 w-8 items-center justify-center text-lg leading-none text-black"
                                                data-action="quantity-stepper#decrement"
                                                aria-label="{{ 'shop.quantity'|trans }} -"
                                            >
                                                -
                                            </button>
                                            <span
                                                class="flex min-w-8 items-center justify-center px-1 text-sm"
                                                data-quantity-stepper-target="display"
                                            >
                                                {{ form.quantity.vars.value ?: 1 }}
                                            </span>
                                            <button
                                                type="button"
                                                class="flex h-8 w-8 items-center justify-center text-lg leading-none text-black"
                                                data-action="quantity-stepper#increment"
                                                aria-label="{{ 'shop.quantity'|trans }} +"
                                            >
                                                +
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% else %}
                    <div
                        class="text-primary rounded-md bg-gray-300 p-2 text-center text-xl">{{ 'cart.outofstock'|trans }}</div>
                {% endif %}
                <button
                    type="submit"
                    class="{% if canAddToCart %}border-gold bg-gold text-dark cursor-pointer{% else %}border-dark/10 bg-dark/10 text-dark/45 cursor-not-allowed{% endif %} mt-4 inline-flex w-full items-center justify-center border px-4 py-3 text-sm font-semibold tracking-[0.16em] uppercase transition hover:bg-[#c0af86]"
                    {% if not canAddToCart %}disabled aria-disabled="true"{% endif %}
                >
                    {{ 'cart.add_button'|trans() }}
                </button>
            </div>
        </div>
    </div>
    {{ form_end(form) }}
</div>
