{% form_theme form with app_form_themes()|merge(['extends/form/checkout/fields.html.twig']) only %}
<div {{ attributes }} class="flex h-full flex-col">
    <style>
        @keyframes checkout-promo-feedback-hide {
            0%, 75% { opacity: 1; max-height: 4rem; margin-top: 0.75rem; }
            100% { opacity: 0; max-height: 0; margin-top: 0; overflow: hidden; }
        }
    </style>
    {% set basket_quantity = cart.quantity %}
    {% set cart_already_paid = cart.isCheckoutPayed %}
    {% for promo in cart.promos %}
        {% set basket_quantity = basket_quantity + promo.giftQuantity %}
    {% endfor %}
    {% set checkout_panel_class = 'border border-primary/10 bg-surface-container-highest p-6 sm:p-8' %}
    {% set checkout_panel_muted_class = 'border border-primary/8 bg-[#f6eee8] p-4 sm:p-5' %}
    {% set checkout_summary_class = 'overflow-hidden border border-[#6b5142] bg-[#4b3428] text-white' %}
    {% set checkout_section_title_class = 'font-display text-[24px] leading-[1.02] font-bold tracking-[-0.03em] text-primary [font-optical-sizing:auto] sm:text-[28px]' %}
    <section class="relative isolate overflow-x-clip bg-white text-dark">
        <div
            class="pointer-events-none absolute inset-x-0 top-0 h-80 bg-[radial-gradient(circle_at_top,rgba(173,156,118,0.16),transparent_65%)]"></div>
        <div class="pointer-events-none absolute top-28 right-0 h-72 w-72 bg-[rgba(173,156,118,0.10)] blur-3xl"></div>
        <div class="pointer-events-none absolute top-[28rem] left-0 h-72 w-72 bg-[rgba(81,38,28,0.06)] blur-3xl"></div>

        <div class="relative mx-auto flex w-full max-w-[1440px] flex-col gap-10 px-4 py-8 md:px-10 lg:px-16 lg:py-12">
            <div class="flex flex-col items-start gap-5 pb-2">
                <a
                    href="{{ path('shop') }}"
                    class="inline-flex items-center gap-2 border border-primary/15 bg-white px-4 py-3 font-label text-[11px] font-semibold uppercase tracking-[0.18em] text-primary transition hover:border-primary hover:bg-primary hover:text-white"
                >
                    <span aria-hidden="true">&larr;</span>
                    {{ 'shop.product.back_to_shop'|trans }}
                </a>

                <div class="font-label text-[12px] uppercase tracking-[0.22em] text-secondary">
                    {{ 'theme.cart.kicker'|trans }}
                </div>
                <div class="w-full space-y-4">
                    <h1 class="font-display text-[clamp(2.15rem,3.3vw,3.2rem)] leading-[0.96] font-bold tracking-[-0.04em] text-primary [font-optical-sizing:auto]">
                        {{ 'checkout_design.title'|trans }}
                    </h1>
                </div>
            </div>

            <div class="grid gap-8 lg:grid-cols-[minmax(0,1.2fr)_420px]">
                <div class="min-w-0 space-y-6">
                    <details
                        class="{{ checkout_summary_class }} lg:hidden">
                        <summary
                            class="flex cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 sm:px-5">
                            <div>
                                <div class="text-gold/80 text-xs uppercase tracking-[0.18em]">{{ 'checkout_design.summary_title'|trans }}</div>
                                <div class="mt-2 font-display text-[28px] leading-none font-bold tracking-[-0.03em] text-white [font-optical-sizing:auto]">
                                    {{ 'checkout_design.basket_title'|trans }} ({{ basket_quantity }})
                                </div>
                                <div class="mt-2 text-base font-semibold text-white">{{ cart.getPricing.totalTTC|price_format }}
                                    €
                                </div>
                            </div>
                            <span class="border border-white/15 px-4 py-2 text-[11px] uppercase tracking-[0.16em] text-white/90">
                                {{ 'checkout_design.summary_toggle'|trans }}
                            </span>
                        </summary>
                        <div class="space-y-6 border-t border-white/10 px-2 py-6 sm:px-4">
                            <div class="space-y-4">
                                {# @var line \CpCreation\VitiCore\Cart\CartPricingLine #}
                                {% for line in cart.getPricing.lines %}
                                    {% set line_previous_ttc = line.isPromoGift
                                        ? line.totalTTC
                                        : (line.totalDiscountTTC > 0
                                            ? line.totalTTC
                                            : (line.degressiveTTC > 0 ? line.netTTC + line.degressiveTTC : null))
                                    %}
                                    {% set line_item_classes = 'p-1 sm:p-2' %}
                                    {% if line.isPromoGift %}
                                        {% set line_item_classes = line_item_classes ~ ' rounded-xl border border-gold/25 border-l-[3px] border-l-gold/80 bg-gold/10 shadow-[0_18px_45px_-30px_rgba(173,156,118,0.55)]' %}
                                    {% endif %}
                                    <div
                                        class="{{ line_item_classes }}">
                                        <div class="flex items-start gap-4">
                                            <div
                                                class="{% if line.isPromoGift %}border-gold/25 bg-white/10{% else %}border-white/10 bg-white/5{% endif %} flex h-20 w-16 shrink-0 items-center justify-center border">
                                                {% if line.imagePath %}
                                                    <twig:Image
                                                        alt="{{ line.productName }}"
                                                        class="flex h-full max-h-24 w-full items-center"
                                                        row:class="flex h-full w-full items-center justify-center"
                                                        img:class="mx-auto h-full max-h-24 w-auto object-contain"
                                                        lazy="{{ false }}"
                                                        quality="{{ 70 }}"
                                                        responsive="{{ false }}"
                                                        path="{{ line.imagePath }}"
                                                        imageWidth="300"
                                                        imageHeight="300"/>
                                                {% else %}
                                                    <div class="text-gold text-[11px] uppercase">{{ 'shop.product.default_quality'|trans }}</div>
                                                {% endif %}
                                            </div>
                                            <div class="min-w-0 flex-1">
                                                <div
                                                    class="{% if line.isPromoGift %}text-white{% endif %} mt-1 font-serif text-sm uppercase">{{ line.productName }}</div>
                                                <div
                                                    class="{% if line.isPromoGift %}text-white{% else %}text-white/90{% endif %} mt-2 text-sm">{{ line.typeName }}
                                                    {% if line.unitLabel is not null %}({{ line.unitLabel }}){% endif %}
                                                </div>
                                                {% if line.optionName %}
                                                    <div class="{% if line.isPromoGift %}text-white{% else %}text-white/80{% endif %} mt-1 text-xs">
                                                        {{ 'shop.option_label'|trans }} : {{ line.optionName }}
                                                        {% if line.optionTotalTTC > 0 %}
                                                            · +{{ line.optionTotalTTC|price_format }}€
                                                            {% if line.optionFlatFee %}( {{ 'shop.flat_fee'|trans|lower }} ){% endif %}
                                                        {% endif %}
                                                    </div>
                                                {% endif %}
                                            </div>
                                            <div class="text-right">
                                                <div
                                                    class="{% if line.isPromoGift %}text-white{% else %}text-white/90{% endif %} text-sm">
                                                    x{{ line.quantity }}</div>
                                                <div
                                                    class="{% if line.isPromoGift %}text-gold{% endif %} mt-2 text-sm font-semibold">
                                                    {% if line_previous_ttc is not null and line_previous_ttc > line.netTTC %}
                                                        <span
                                                            class="mr-2 text-sm font-semibold text-white/80 line-through decoration-1">{{ line_previous_ttc|price_format }}€</span>
                                                    {% endif %}
                                                    {% if line.isPromoGift %}
                                                        {{ 'shop.offered'|trans }}
                                                    {% else %}
                                                        {{ line.netTTC|price_format }}€
                                                    {% endif %}
                                                </div>
                                                {% if line.degressiveTTC > 0 %}
                                                    <div class="text-gold/80 mt-1 text-xs">
                                                        {{ 'shop.degressive'|trans }}:
                                                        -{{ line.degressiveTTC|price_format }}€
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}

                            </div>
                            <div class="border border-white/10 bg-white/5 p-4" data-checkout-promo-block>
                                <div
                                    class="text-gold/80 mb-3 text-xs uppercase">{{ 'shop.discount_code'|trans }}</div>
                                <div class="flex gap-2">
                                    <input
                                        id="checkout-promo-mobile"
                                        type="text"
                                        value="{{ promoCodeInput ?? '' }}"
                                        data-model="norender|promoCodeInput"
                                        oninput="if (this.value.trim() === '') { this.closest('[data-checkout-promo-block]')?.querySelector('[data-checkout-promo-feedback]')?.remove(); }"
                                        placeholder="{{ 'checkout_design.discount_placeholder'|trans }}"
                                        class="focus:border-gold h-12 min-w-0 flex-1 border border-white/10 bg-white/5 px-2 text-sm text-white outline-none placeholder:text-white/55 focus:ring-0"
                                    >
                                    <button
                                        type="button"
                                        data-action="live#action"
                                        data-live-action-param="applyPromoCode"
                                        data-loading="action(applyPromoCode)|addAttribute(disabled)"
                                        class="border-gold/60 text-gold hover:bg-gold hover:text-dark cursor-pointer border px-2 text-xs uppercase transition disabled:cursor-not-allowed disabled:opacity-60">
                                        {{ 'checkout_design.apply'|trans }}
                                    </button>
                                </div>
                                {% set active_price_group_name = this.getActivePriceGroupName() %}
                                {% if active_price_group_name %}
                                    <p class="text-gold/80 mt-3 text-xs">
                                        {{ 'checkout_design.active_group_prices_applied'|trans({'%group%': active_price_group_name|upper}) }}
                                    </p>
                                {% endif %}
                                <div class="text-sm">
                                    <span
                                        class="text-gold/90 mt-3 hidden"
                                        data-loading="action(applyPromoCode)|show"
                                    >
                                        {{ 'checkout_design.promo_applying'|trans }}
                                    </span>
                                    {% if cart.promoCodeMessageKey %}
                                        <span
                                            class="{% if cart.promoCodeStatus == 'applied' %}text-green-300{% elseif cart.promoCodeStatus == 'pending_address' %}text-gold/90{% else %}text-red-300{% endif %} mt-3 block"
                                            data-loading="action(applyPromoCode)|hide"
                                            data-checkout-promo-feedback
                                            {% if cart.promoCodeMessageKey in ['cart.promo.partner_code_applied', 'cart.promo.partner_code_already_active'] %}
                                            style="animation: checkout-promo-feedback-hide 5s ease forwards;"
                                            {% endif %}
                                        >
                                        {{ cart.promoCodeMessageKey|trans(promoCodeMessageParameters) }}
                                        </span>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="space-y-3 border-t border-white/10 pt-4 text-sm">
                                {% if cart.getPricing.degressiveTTC > 0 %}
                                    <div class="text-gold flex items-center justify-between text-sm">
                                        <span>{{ (cart.getPricing.degressiveIsBottleOffered ? 'shop.of_which_bottle_offered' : 'shop.of_which_degressive')|trans }}</span>
                                        <span>-{{ cart.getPricing.degressiveTTC|price_format }} €</span>
                                    </div>
                                {% endif %}
                                <div class="flex items-center justify-between text-white">
                                    <span>{{ 'checkout_design.subtotal'|trans }}</span>
                                    <span>{{ cart.getPricing.subtotalTTC|price_format }} €</span>
                                </div>
                                {% for promo in cart.promos %}
                                    {% if promo.discountItemsTTC > 0 %}
                                        <div class="text-gold flex items-center justify-between text-sm">
                                            <span class="flex flex-col">
                                                <span>{{ 'shop.discount'|trans }}</span>
                                                <span class="text-gold/80 text-xs">
                                                    {{ promo.code ?: ('shop.discount'|trans) }}{% if promo.percent is not null %} - {{ (promo.percent * 100)|number_format(0, ',', ' ') }}%{% endif %}
                                                </span>
                                            </span>
                                            <span>-{{ promo.discountItemsTTC|price_format }} €</span>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                                <div class="flex items-center justify-between text-white">
                                    <span class="flex flex-col">
                                        <span>{{ 'shop.total_shipping'|trans }}</span>
                                        {% if cart.cartShipping is not null and cart.cartShipping.name %}
                                            <span class="text-xs text-white/85">{{ cart.cartShipping.name }}</span>
                                        {% endif %}
                                    </span>
                                    <span>
                                        {% if cart.cartShipping is not null %}
                                            {{ cart.cartShipping.amountTTC|price_format }} €
                                        {% else %}
                                            {{ 'checkout_design.to_define'|trans }}
                                        {% endif %}
                                    </span>
                                </div>
                                {% for promo in cart.promos %}
                                    {% if promo.discountShippingTTC > 0 %}
                                        <div class="text-gold flex items-center justify-between text-sm">
                                            <span class="flex flex-col">
                                                <span>{{ 'shop.discount_shipping'|trans }}</span>
                                                <span class="text-gold/80 text-xs">
                                                    {{ promo.code ?: ('shop.discount'|trans) }}{% if promo.percent is not null %} - {{ (promo.percent * 100)|number_format(0, ',', ' ') }}%{% endif %}
                                                </span>
                                            </span>
                                            <span>-{{ promo.discountShippingTTC|price_format }} €</span>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                                <div
                                    class="flex items-center justify-between border-t border-white/10 pt-4 font-serif text-lg text-white uppercase sm:text-xl">
                                    <span>{{ 'shop.total_ttc'|trans }}</span>
                                    <span>{{ cart.getPricing.totalTTC|price_format }} €</span>
                                </div>
                            </div>
                        </div>
                    </details>

                    {{ component('shop:PartnerCode') }}
                    {{ form_start(form, {'attr': {
                        'data-model': 'debounce(300)|on(change)|*',
                        'data-action': 'live#action:prevent',
                        'data-live-action-param': 'debounce(300)|saveDraft',
                        'class': 'min-w-0 space-y-6',
                        'novalidate': 'true'
                    }}) }}
                    <div class="{{ checkout_panel_class }}">
                        <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                            <div>
                                <h2 class="{{ checkout_section_title_class }}">
                                    {{ 'checkout_design.contact'|trans }}
                                </h2>
                            </div>
                            {% if not app.user %}
                                <a href="{{ path('app_login', { _target_path: app.request.requestUri }) }}"
                                   class="text-dark hover:text-gold text-xs uppercase transition">
                                    {{ 'checkout_design.login'|trans }}
                                </a>
                            {% endif %}
                        </div>
                        <div class="grid gap-4 md:grid-cols-1">
                            {{ form_row(form.deliveryAddress.email, {
                                row_attr: { class: 'md:col-span-2' },
                                attr: {
                                    placeholder: 'checkout_design.email_placeholder',
                                    'data-action': 'change->live#action',
                                    'data-live-action-param': 'saveEmail'
                                }
                            }) }}
                        </div>
                    </div>
                    <div class="{{ checkout_panel_class }}">
                        <div class="mb-6">
                            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                                <h2 class="{{ checkout_section_title_class }}">
                                    {{ 'checkout_design.delivery_title'|trans }}
                                </h2>
                                {% if app.user %}
                                    <button
                                        type="button"
                                        data-action="live#action:prevent"
                                        data-live-action-param="resetDeliveryAddress"
                                        class="text-dark hover:text-gold cursor-pointer text-xs uppercase transition"
                                    >
                                        {{ 'checkout_design.reset_user_details'|trans }}
                                    </button>
                                {% endif %}
                            </div>
                        </div>

                        <div class="grid gap-4 md:grid-cols-2">
                            <div>
                                {{ form_row(form.deliveryAddress.firstname) }}
                            </div>
                            <div>
                                {{ form_row(form.deliveryAddress.lastname) }}
                            </div>
                            <div>
                                {{ form_row(form.deliveryAddress.phone) }}
                            </div>
                            <div>
                                {{ form_row(form.deliveryAddress.street) }}
                            </div>
                            <div>
                                {{ form_row(form.deliveryAddress.postal) }}
                            </div>
                            <div>
                                {{ form_row(form.deliveryAddress.city) }}
                            </div>
                            <div>
                                {{ form_row(form.deliveryAddress.country) }}
                            </div>
                            <div class="{{ checkout_panel_muted_class }} md:col-span-2">
                                {% set show_delivery_siret = (form.deliveryAddress.country.vars.value ?: 'FR') == 'FR' %}
                                <div class="grid gap-4 {{ show_delivery_siret ? 'md:grid-cols-3' : 'md:grid-cols-2' }}">
                                    <div>
                                        {{ form_row(form.deliveryAddress.company) }}
                                    </div>
                                    <div>
                                        {{ form_row(form.deliveryAddress.vatId) }}
                                    </div>
                                    {% if show_delivery_siret %}
                                        <div>
                                            {{ form_row(form.deliveryAddress.siret, {
                                                attr: {
                                                    required: 'required'
                                                }
                                            }) }}
                                        </div>
                                    {% else %}
                                        {% do form.deliveryAddress.siret.setRendered() %}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% set invoice_open = form.invoiceAddress.differentAddress.vars.checked %}
                    <div class="{{ checkout_panel_class }}">
                        <div class="mb-6 flex items-start justify-between gap-4">
                            <div>
                                <h2 class="{{ checkout_section_title_class }}">
                                    {{ 'checkout_design.billing_title'|trans }}
                                </h2>
                            </div>

                            <label
                                class="inline-flex cursor-pointer items-center gap-2 border border-primary/8 bg-[#f6eee8] px-4 py-2 text-[11px] uppercase tracking-[0.16em] text-primary"
                            >
                                {{ form_widget(form.invoiceAddress.differentAddress, {
                                    attr: {
                                        class: 'h-3 w-3 cursor-pointer border-gold/40 text-gold focus:ring-gold',
                                        'data-action': 'change->live#action:prevent',
                                        'data-live-action-param': 'saveDraft'
                                    }
                                }) }}
                                <span>{{ 'checkout_design.use_billing_address'|trans }}</span>
                            </label>
                        </div>

                        {% if invoice_open and app.user %}
                            <div class="mb-6 flex justify-end">
                                <button
                                    type="button"
                                    data-action="live#action:prevent"
                                    data-live-action-param="resetInvoiceAddress"
                                    class="text-dark hover:text-gold cursor-pointer text-xs uppercase transition"
                                >
                                    {{ 'checkout_design.reset_user_details'|trans }}
                                </button>
                            </div>
                        {% endif %}

                        <div class="md:grid-cols-2{% if not invoice_open %} hidden{% endif %} grid gap-4">
                            <div>
                                {{ form_row(form.invoiceAddress.firstname) }}
                            </div>
                            <div>
                                {{ form_row(form.invoiceAddress.lastname) }}
                            </div>
                            <div>
                                {{ form_row(form.invoiceAddress.phone) }}
                            </div>
                            <div>
                                {{ form_row(form.invoiceAddress.email, {
                                    attr: {
                                        placeholder: 'checkout_design.email_placeholder',
                                        required: invoice_open ? 'required' : null
                                    }
                                }) }}
                            </div>
                            <div>
                                {{ form_row(form.invoiceAddress.street) }}
                            </div>
                            <div>
                                {{ form_row(form.invoiceAddress.postal) }}
                            </div>
                            <div>
                                {{ form_row(form.invoiceAddress.city) }}
                            </div>
                            <div>
                                {{ form_row(form.invoiceAddress.country) }}
                            </div>
                            <div class="{{ checkout_panel_muted_class }} md:col-span-2">
                                {% set show_invoice_siret = (form.invoiceAddress.country.vars.value ?: 'FR') == 'FR' %}
                                <div class="grid gap-4 {{ show_invoice_siret ? 'md:grid-cols-3' : 'md:grid-cols-2' }}">
                                    <div>
                                        {{ form_row(form.invoiceAddress.company) }}
                                    </div>
                                    <div>
                                        {{ form_row(form.invoiceAddress.vatId) }}
                                    </div>
                                    {% if show_invoice_siret %}
                                        <div>
                                            {{ form_row(form.invoiceAddress.siret, {
                                                attr: {
                                                    required: 'required'
                                                }
                                            }) }}
                                        </div>
                                    {% else %}
                                        {% do form.invoiceAddress.siret.setRendered() %}
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>


                    <div class="grid gap-6 lg:grid-cols-2">
                        <div class="{{ checkout_panel_class }}">
                            <div class="mb-6">
                                <h2 class="{{ checkout_section_title_class }}">
                                    {{ 'checkout_design.delivery_method_title'|trans }}
                                </h2>
                            </div>

                            <div class="space-y-3">
                                {{ form_row(form.deliveryMethod) }}
                            </div>
                        </div>

                        <div class="{{ checkout_panel_class }}">
                            <div class="mb-6">
                                <h2 class="{{ checkout_section_title_class }}">
                                    {{ 'checkout_design.payment_title'|trans }}
                                </h2>
                            </div>
                            {{ form_row(form.paymentMethod) }}
                        </div>
                    </div>

                    <div class="{{ checkout_panel_class }}">
                        <div class="mb-6">
                            <h2 class="{{ checkout_section_title_class }}">
                                {{ 'checkout_design.info_title'|trans }}
                            </h2>
                        </div>
                        {{ form_row(form.comment) }}
                        <div class="mt-5 hidden flex-col gap-2 lg:flex">
                            <div class="flex items-start gap-3">
                                {{ form_widget(form.cgv, {
                                    attr: {
                                        id: 'checkout-cgv',
                                        class: 'mt-1 h-4 w-4 shrink-0 border-gold/40 text-gold focus:ring-gold',
                                        'data-checkout-cgv-source': 'desktop'
                                    }
                                }) }}
                                <div class="min-w-0 text-sm leading-6 text-dark/90">
                                    <label for="checkout-cgv" class="cursor-pointer">
                                        {{ 'shop.accept_cgv'|trans }}
                                    </label>
                                    <a
                                        href="{{ path('cgv') }}"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        class="text-dark decoration-gold hover:text-gold font-medium underline underline-offset-2 transition"
                                    >
                                        {{ 'cgv.button'|trans }}
                                    </a>
                                </div>
                            </div>
                            <div class="hidden lg:block">
                                {{ form_errors(form.cgv) }}
                            </div>
                        </div>
                    </div>
                    <details
                        class="{{ checkout_summary_class }} lg:hidden">
                        <summary
                            class="flex cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 sm:px-5">
                            <div>
                                <div class="text-gold/80 text-xs uppercase tracking-[0.18em]">{{ 'checkout_design.summary_title'|trans }}</div>
                                <div class="mt-2 font-display text-[28px] leading-none font-bold tracking-[-0.03em] text-white [font-optical-sizing:auto]">
                                    {{ 'checkout_design.basket_title'|trans }} ({{ basket_quantity }})
                                </div>
                                <div class="mt-2 text-base font-semibold text-white">{{ cart.getPricing.totalTTC|price_format }}
                                    €
                                </div>
                            </div>
                            <span class="border border-white/15 px-4 py-2 text-[11px] uppercase tracking-[0.16em] text-white/90">
                                {{ 'checkout_design.summary_toggle'|trans }}
                            </span>
                        </summary>
                        <div class="space-y-6 border-t border-white/10 px-2 md:px-6 py-6 sm:px-4">
                            <div class="space-y-4">
                                {# @var line \CpCreation\VitiCore\Cart\CartPricingLine #}
                                {% for line in cart.getPricing.lines %}
                                    {% set line_previous_ttc = line.isPromoGift
                                        ? line.totalTTC
                                        : (line.totalDiscountTTC > 0
                                            ? line.totalTTC
                                            : (line.degressiveTTC > 0 ? line.netTTC + line.degressiveTTC : null))
                                    %}
                                    {% set line_item_classes = 'p-1 sm:p-2' %}
                                    {% if line.isPromoGift %}
                                        {% set line_item_classes = line_item_classes ~ ' rounded-xl border border-gold/25 border-l-[3px] border-l-gold/80 bg-gold/10 shadow-[0_18px_45px_-30px_rgba(173,156,118,0.55)]' %}
                                    {% endif %}
                                    <div
                                        class="{{ line_item_classes }}">
                                        <div class="flex items-start gap-4">
                                            <div
                                                class="{% if line.isPromoGift %}border-gold/25 bg-white/10{% else %}border-white/10 bg-white/5{% endif %} flex h-20 w-16 shrink-0 items-center justify-center border">
                                                {% if line.imagePath %}
                                                    <twig:Image
                                                        alt="{{ line.productName }}"
                                                        class="flex h-full max-h-24 w-full items-center"
                                                        row:class="flex h-full w-full items-center justify-center"
                                                        img:class="mx-auto h-full max-h-24 w-auto object-contain"
                                                        lazy="{{ false }}"
                                                        quality="{{ 70 }}"
                                                        responsive="{{ false }}"
                                                        path="{{ line.imagePath }}"
                                                        imageWidth="300"
                                                        imageHeight="300"/>
                                                {% else %}
                                                    <div class="text-gold text-[11px] uppercase">{{ 'shop.product.default_quality'|trans }}</div>
                                                {% endif %}
                                            </div>
                                            <div class="min-w-0 flex-1">
                                                <div
                                                    class="{% if line.isPromoGift %}text-white{% endif %} mt-1 font-serif text-sm uppercase">{{ line.productName }}</div>
                                                <div
                                                    class="{% if line.isPromoGift %}text-white{% else %}text-white/90{% endif %} mt-2 text-sm">{{ line.typeName }}
                                                    {% if line.unitLabel is not null %}({{ line.unitLabel }}){% endif %}
                                                </div>
                                                {% if line.optionName %}
                                                    <div class="{% if line.isPromoGift %}text-white{% else %}text-white/80{% endif %} mt-1 text-xs">
                                                        {{ 'shop.option_label'|trans }} : {{ line.optionName }}
                                                        {% if line.optionTotalTTC > 0 %}
                                                            · +{{ line.optionTotalTTC|price_format }}€
                                                            {% if line.optionFlatFee %}( {{ 'shop.flat_fee'|trans|lower }} ){% endif %}
                                                        {% endif %}
                                                    </div>
                                                {% endif %}
                                            </div>
                                            <div class="text-right">
                                                <div
                                                    class="{% if line.isPromoGift %}text-white{% else %}text-white/90{% endif %} text-sm">
                                                    x{{ line.quantity }}</div>
                                                <div
                                                    class="{% if line.isPromoGift %}text-gold{% endif %} mt-2 text-sm font-semibold">
                                                    {% if line_previous_ttc is not null and line_previous_ttc > line.netTTC %}
                                                        <span
                                                            class="mr-2 text-sm font-semibold text-white/80 line-through decoration-1">{{ line_previous_ttc|price_format }}€</span>
                                                    {% endif %}
                                                    {% if line.isPromoGift %}
                                                        {{ 'shop.offered'|trans }}
                                                    {% else %}
                                                        {{ line.netTTC|price_format }}€
                                                    {% endif %}
                                                </div>
                                                {% if line.degressiveTTC > 0 %}
                                                    <div class="text-gold/80 mt-1 text-xs">
                                                        {{ 'shop.degressive'|trans }}:
                                                        -{{ line.degressiveTTC|price_format }}€
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="space-y-3 border-t border-white/10 pt-4 text-sm">
                                {% if cart.getPricing.degressiveTTC > 0 %}
                                    <div class="text-gold flex items-center justify-between text-sm">
                                        <span>{{ (cart.getPricing.degressiveIsBottleOffered ? 'shop.of_which_bottle_offered' : 'shop.of_which_degressive')|trans }}</span>
                                        <span>-{{ cart.getPricing.degressiveTTC|price_format }} €</span>
                                    </div>
                                {% endif %}
                                <div class="flex items-center justify-between text-white">
                                    <span>{{ 'checkout_design.subtotal'|trans }}</span>
                                    <span>{{ cart.getPricing.subtotalTTC|price_format }} €</span>
                                </div>
                                {% for promo in cart.promos %}
                                    {% if promo.discountItemsTTC > 0 %}
                                        <div class="text-gold flex items-center justify-between text-sm">
                                            <span class="flex flex-col">
                                                <span>{{ 'shop.discount'|trans }}</span>
                                                <span class="text-gold/80 text-xs">
                                                    {{ promo.code ?: ('shop.discount'|trans) }}{% if promo.percent is not null %} - {{ (promo.percent * 100)|number_format(0, ',', ' ') }}%{% endif %}
                                                </span>
                                            </span>
                                            <span>-{{ promo.discountItemsTTC|price_format }} €</span>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                                <div class="flex items-center justify-between text-white">
                                    <span class="flex flex-col">
                                        <span>{{ 'shop.total_shipping'|trans }}</span>
                                        {% if cart.cartShipping is not null and cart.cartShipping.name %}
                                            <span class="text-xs text-white/85">{{ cart.cartShipping.name }}</span>
                                        {% endif %}
                                    </span>
                                    <span>
                                        {% if cart.cartShipping is not null %}
                                            {{ cart.cartShipping.amountTTC|price_format }} €
                                        {% else %}
                                            {{ 'checkout_design.to_define'|trans }}
                                        {% endif %}
                                    </span>
                                </div>
                                {% for promo in cart.promos %}
                                    {% if promo.discountShippingTTC > 0 %}
                                        <div class="text-gold flex items-center justify-between text-sm">
                                            <span class="flex flex-col">
                                                <span>{{ 'shop.discount_shipping'|trans }}</span>
                                                <span class="text-gold/80 text-xs">
                                                    {{ promo.code ?: ('shop.discount'|trans) }}{% if promo.percent is not null %} - {{ (promo.percent * 100)|number_format(0, ',', ' ') }}%{% endif %}
                                                </span>
                                            </span>
                                            <span>-{{ promo.discountShippingTTC|price_format }} €</span>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                                <div
                                    class="flex items-center justify-between border-t border-white/10 pt-4 font-serif text-lg text-white uppercase sm:text-xl">
                                    <span>{{ 'shop.total_ttc'|trans }}</span>
                                    <span>{{ cart.getPricing.totalTTC|price_format }} €</span>
                                </div>
                            </div>

                            {% if cart_already_paid %}
                                <div class="border-gold/40 bg-gold/10 space-y-2 border px-2 py-4 text-sm text-white">
                                    <div class="text-gold font-semibold uppercase">
                                        {{ 'checkout_design.already_paid'|trans }}
                                    </div>
                                    <div>
                                        {{ 'checkout_design.paid_method'|trans }}: {{ this.getPaidPaymentMethodLabel() }}
                                    </div>
                                    <div>
                                        {{ 'checkout_design.paid_at'|trans }}: {{ cart.cartCheckout.payedAt|date('d/m/Y H:i') }}
                                    </div>
                                </div>
                            {% endif %}

                        </div>
                    </details>
                    <div class="{{ checkout_panel_class }} space-y-3 lg:hidden">
                        <div class="flex items-start gap-3">
                            <input
                                id="checkout-cgv-mobile"
                                type="checkbox"
                                {% if form.cgv.vars.checked %}checked{% endif %}
                                data-checkout-cgv-source="mobile"
                                class="mt-1 h-4 w-4 shrink-0 border-gold/40 text-gold focus:ring-gold"
                            >
                            <div class="min-w-0 text-sm leading-6 text-dark/90">
                                <label for="checkout-cgv-mobile" class="cursor-pointer">
                                    {{ 'shop.accept_cgv'|trans }}
                                </label>
                                <a
                                    href="{{ path('cgv') }}"
                                    target="_blank"
                                    rel="noopener noreferrer"
                                    class="text-dark decoration-gold hover:text-gold font-medium underline underline-offset-2 transition"
                                >
                                    {{ 'cgv.button'|trans }}
                                </a>
                            </div>
                        </div>
                        <div class="space-y-2">
                            {{ form_errors(form.cgv) }}
                        </div>
                        <button
                            type="button"
                            data-action="live#action"
                            data-live-action-param="payNow"
                            data-loading="action(payNow)|addAttribute(disabled)"
                            {% if cart_already_paid %}disabled{% endif %}
                            class="w-full cursor-pointer bg-white px-5 py-4 text-sm font-semibold uppercase text-primary transition hover:bg-gold hover:text-dark disabled:cursor-not-allowed disabled:bg-white/15 disabled:text-white/45">
                            {% if cart_already_paid %}
                                {{ 'checkout_design.already_paid_button'|trans }}
                            {% else %}
                                {{ 'checkout_design.pay_now'|trans }}
                            {% endif %}
                        </button>
                        <div class="text-dark/90 space-y-3 text-sm">
                            <div class="flex items-center gap-3">
                                <span class="bg-gold h-2 w-2"></span>
                                <span>{{ 'checkout_design.secure_payment'|trans }}</span>
                            </div>
                        </div>
                    </div>
                    {{ form_rest(form) }}
                    {{ form_end(form) }}
                    {{ component('shop:LegalNotice') }}
                </div>

                <aside
                    class="relative hidden min-w-0 lg:block lg:self-start"
                    x-data="sticky({ anchor: 'bottom', topOffset: 24, bottomOffset: 24, releaseAtBoundary: false })"
                >
                    <div
                        x-ref="container"
                        class="relative"
                        :style="mode !== 'static' ? 'min-height: ' + height + 'px' : ''"
                    >
                        <div
                            x-ref="panel"
                            :class="mode === 'fixed' ? ['fixed', 'z-30'].join(' ') : (mode === 'bottom' ? ['absolute', 'bottom-0', 'left-0', 'right-0'].join(' ') : '')"
                            :style="panelStyle()"
                            class="{{ checkout_summary_class }}"
                        >
                            <div class="border-b border-white/10 px-6 py-6 sm:px-4">
                                <div class="text-gold/80 text-xs uppercase tracking-[0.18em]">{{ 'checkout_design.summary_title'|trans }}</div>
                                <h2 class="mt-3 font-display text-[24px] leading-none font-bold tracking-[-0.03em] text-white [font-optical-sizing:auto] sm:text-[28px]">
                                    {{ 'checkout_design.basket_title'|trans }} ({{ basket_quantity }})
                                </h2>
                            </div>

                            <div class="space-y-6 px-6 py-6 sm:px-4">
                                <div class="space-y-4">
                                    {# @var line \CpCreation\VitiCore\Cart\CartPricingLine #}
                                    {% for line in cart.getPricing.lines %}
                                        {% set line_previous_ttc = line.isPromoGift
                                            ? line.totalTTC
                                            : (line.totalDiscountTTC > 0
                                                ? line.totalTTC
                                                : (line.degressiveTTC > 0 ? line.netTTC + line.degressiveTTC : null))
                                        %}
                                        {% set line_item_classes = 'p-1 sm:p-2' %}
                                        {% if line.isPromoGift %}
                                            {% set line_item_classes = line_item_classes ~ ' rounded-xl border border-gold/25 border-l-[3px] border-l-gold/80 bg-gold/10 shadow-[0_18px_45px_-30px_rgba(173,156,118,0.55)]' %}
                                        {% endif %}
                                        <div
                                            class="{{ line_item_classes }}">
                                            <div class="flex items-start gap-4">
                                                <div
                                                    class="{% if line.isPromoGift %}border-gold/25 bg-white/10{% else %}border-white/10 bg-white/5{% endif %} flex h-20 w-16 shrink-0 items-center justify-center border">
                                                    {% if line.imagePath %}
                                                        <twig:Image
                                                            alt="{{ line.productName }}"
                                                            class="flex h-full max-h-24 w-full items-center"
                                                            row:class="flex h-full w-full items-center justify-center"
                                                            img:class="mx-auto h-full max-h-24 w-auto object-contain"
                                                            lazy="{{ false }}"
                                                            quality="{{ 70 }}"
                                                            responsive="{{ false }}"
                                                            path="{{ line.imagePath }}"
                                                            imageWidth="300"
                                                            imageHeight="300"/>

                                                    {% else %}
                                                        <div class="text-gold text-[11px] uppercase">{{ 'shop.product.default_quality'|trans }}</div>
                                                    {% endif %}
                                                </div>
                                                <div class="min-w-0 flex-1">
                                                    <div
                                                        class="{% if line.isPromoGift %}text-white{% endif %} mt-1 font-serif text-sm uppercase">{{ line.productName }}</div>
                                                    <div
                                                        class="{% if line.isPromoGift %}text-white{% else %}text-white/90{% endif %} mt-2 text-sm">{{ line.typeName }}
                                                        {% if line.unitLabel is not null %}({{ line.unitLabel }}){% endif %}
                                                    </div>
                                                    {% if line.optionName %}
                                                        <div class="{% if line.isPromoGift %}text-white{% else %}text-white/80{% endif %} mt-1 text-xs">
                                                            {{ 'shop.option_label'|trans }} : {{ line.optionName }}
                                                            {% if line.optionTotalTTC > 0 %}
                                                                · +{{ line.optionTotalTTC|price_format }}€
                                                                {% if line.optionFlatFee %}( {{ 'shop.flat_fee'|trans|lower }} ){% endif %}
                                                            {% endif %}
                                                        </div>
                                                    {% endif %}
                                                </div>
                                                <div class="text-right">
                                                    <div
                                                        class="{% if line.isPromoGift %}text-white{% else %}text-white/90{% endif %} text-sm">
                                                        x{{ line.quantity }}</div>
                                                    <div
                                                        class="{% if line.isPromoGift %}text-gold{% endif %} mt-2 text-sm font-semibold">
                                                        {% if line_previous_ttc is not null and line_previous_ttc > line.netTTC %}
                                                            <span
                                                                class="mr-2 text-sm font-semibold text-white/80 line-through decoration-1">{{ line_previous_ttc|price_format }}€</span>
                                                        {% endif %}
                                                        {% if line.isPromoGift %}
                                                            {{ 'shop.offered'|trans }}
                                                        {% else %}
                                                            {{ line.netTTC|price_format }}€
                                                        {% endif %}
                                                    </div>
                                                    {% if line.degressiveTTC > 0 %}
                                                        <div class="text-gold/80 mt-1 text-xs">
                                                            {{ 'shop.degressive'|trans }}:
                                                            -{{ line.degressiveTTC|price_format }}€
                                                        </div>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>

                                <div class="border border-white/10 bg-white/5 p-4" data-checkout-promo-block>
                                    <div
                                        class="text-gold/80 mb-3 text-xs uppercase">{{ 'shop.discount_code'|trans }}</div>
                                    <div class="flex gap-2">
                                        <input
                                            id="checkout-promo-desktop"
                                            type="text"
                                            value="{{ promoCodeInput ?? '' }}"
                                            data-model="norender|promoCodeInput"
                                            oninput="if (this.value.trim() === '') { this.closest('[data-checkout-promo-block]')?.querySelector('[data-checkout-promo-feedback]')?.remove(); }"
                                            placeholder="{{ 'checkout_design.discount_placeholder'|trans }}"
                                            class="focus:border-gold h-12 min-w-0 flex-1 border border-white/10 bg-white/5 px-2 text-sm text-white outline-none placeholder:text-white/55 focus:ring-0"
                                        >
                                        <button
                                            type="button"
                                            data-action="live#action"
                                            data-live-action-param="applyPromoCode"
                                            data-loading="action(applyPromoCode)|addAttribute(disabled)"
                                            class="border-gold/60 text-gold hover:bg-gold hover:text-dark cursor-pointer border px-2 text-xs uppercase transition disabled:cursor-not-allowed disabled:opacity-60">
                                            {{ 'checkout_design.apply'|trans }}
                                        </button>
                                    </div>
                                    {% set active_price_group_name = this.getActivePriceGroupName() %}
                                    {% if active_price_group_name %}
                                        <p class="text-gold/80 mt-3 text-xs">
                                            {{ 'checkout_design.active_group_prices_applied'|trans({'%group%': active_price_group_name|upper}) }}
                                        </p>
                                    {% endif %}
                                    <div class="text-sm">
                                    <span
                                        class="text-gold/90 mt-3 hidden"
                                        data-loading="action(applyPromoCode)|show"
                                    >
                                        {{ 'checkout_design.promo_applying'|trans }}
                                    </span>
                                        {% if cart.promoCodeMessageKey %}
                                            <span
                                                class="{% if cart.promoCodeStatus == 'applied' %}text-green-300{% elseif cart.promoCodeStatus == 'pending_address' %}text-gold/90{% else %}text-red-300{% endif %} mt-3 block"
                                                data-loading="action(applyPromoCode)|hide"
                                                data-checkout-promo-feedback
                                                {% if cart.promoCodeMessageKey in ['cart.promo.partner_code_applied', 'cart.promo.partner_code_already_active'] %}
                                                style="animation: checkout-promo-feedback-hide 5s ease forwards;"
                                                {% endif %}
                                            >
                                        {{ cart.promoCodeMessageKey|trans(promoCodeMessageParameters) }}
                                        </span>
                                        {% endif %}
                                    </div>
                                </div>

                                <div class="space-y-3 border-t border-white/10 pt-4 text-sm">
                                    {% if cart.getPricing.degressiveTTC > 0 %}
                                        <div class="text-gold flex items-center justify-between text-sm">
                                            <span>{{ (cart.getPricing.degressiveIsBottleOffered ? 'shop.of_which_bottle_offered' : 'shop.of_which_degressive')|trans }}</span>
                                            <span>-{{ cart.getPricing.degressiveTTC|price_format }} €</span>
                                        </div>
                                    {% endif %}
                                    <div class="flex items-center justify-between text-white">
                                        <span>{{ 'checkout_design.subtotal'|trans }}</span>
                                        <span>{{ cart.getPricing.subtotalTTC|price_format }} €</span>
                                    </div>
                                    {% for promo in cart.promos %}
                                        {% if promo.discountItemsTTC > 0 %}
                                            <div class="text-gold flex items-center justify-between text-sm">
                                            <span class="flex flex-col">
                                                <span>{{ 'shop.discount'|trans }}</span>
                                                <span class="text-gold/80 text-xs">
                                                    {{ promo.code ?: ('shop.discount'|trans) }}{% if promo.percent is not null %} - {{ (promo.percent * 100)|number_format(0, ',', ' ') }}%{% endif %}
                                                </span>
                                            </span>
                                                <span>-{{ promo.discountItemsTTC|price_format }} €</span>
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                    <div class="flex items-center justify-between text-white">
                                    <span class="flex flex-col">
                                        <span>{{ 'shop.total_shipping'|trans }}</span>
                                        {% if cart.cartShipping is not null and cart.cartShipping.name %}
                                            <span class="text-xs text-white/85">{{ cart.cartShipping.name }}</span>
                                        {% endif %}
                                    </span>
                                        <span>
                                        {% if cart.cartShipping is not null %}
                                            {{ cart.cartShipping.amountTTC|price_format }} €
                                        {% else %}
                                            {{ 'checkout_design.to_define'|trans }}
                                        {% endif %}
                                    </span>
                                    </div>
                                    {% for promo in cart.promos %}
                                        {% if promo.discountShippingTTC > 0 %}
                                            <div class="text-gold flex items-center justify-between text-sm">
                                            <span class="flex flex-col">
                                                <span>{{ 'shop.discount_shipping'|trans }}</span>
                                                <span class="text-gold/80 text-xs">
                                                    {{ promo.code ?: ('shop.discount'|trans) }}{% if promo.percent is not null %} - {{ (promo.percent * 100)|number_format(0, ',', ' ') }}%{% endif %}
                                                </span>
                                            </span>
                                                <span>-{{ promo.discountShippingTTC|price_format }} €</span>
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                    <div
                                        class="flex items-center justify-between border-t border-white/10 pt-4 font-serif text-lg text-white uppercase sm:text-xl">
                                        <span>{{ 'shop.total_ttc'|trans }}</span>
                                        <span>{{ cart.getPricing.totalTTC|price_format }} €</span>
                                    </div>
                                </div>

                                {% if cart_already_paid %}
                                    <div class="border-gold/40 bg-gold/10 mb-4 space-y-2 border px-2 py-4 text-sm text-white">
                                        <div class="text-gold font-semibold uppercase">
                                            {{ 'checkout_design.already_paid'|trans }}
                                        </div>
                                        <div>
                                            {{ 'checkout_design.paid_method'|trans }}: {{ this.getPaidPaymentMethodLabel() }}
                                        </div>
                                        <div>
                                            {{ 'checkout_design.paid_at'|trans }}: {{ cart.cartCheckout.payedAt|date('d/m/Y H:i') }}
                                        </div>
                                    </div>
                                {% endif %}
                                <button
                                    type="button"
                                    data-action="live#action"
                                    data-live-action-param="payNow"
                                    data-loading="action(payNow)|addAttribute(disabled)"
                                    {% if cart_already_paid %}disabled{% endif %}
                                    class="w-full cursor-pointer bg-white px-5 py-4 text-sm font-semibold uppercase text-primary transition hover:bg-gold hover:text-dark disabled:cursor-not-allowed disabled:bg-white/15 disabled:text-white/45">
                                    {% if cart_already_paid %}
                                        {{ 'checkout_design.already_paid_button'|trans }}
                                    {% else %}
                                        {{ 'checkout_design.pay_now'|trans }}
                                    {% endif %}
                                </button>
                                <div class="space-y-3 text-sm text-white/90">
                                    <div class="flex items-center gap-3">
                                        <span class="bg-gold h-2 w-2"></span>
                                        <span>{{ 'checkout_design.secure_payment'|trans }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                </aside>
            </div>
        </div>
    </section>
</div>
