{% form_theme form with app_form_themes() 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 %}
    <section class="bg-page text-foreground relative isolate overflow-x-hidden">
        <div
            class="pointer-events-none absolute inset-x-0 top-0 h-72 bg-checkout-glow"></div>
        <div class="bg-accent/10 pointer-events-none absolute top-32 right-0 h-64 w-64 blur-3xl"></div>
        <div class="bg-foreground/5 pointer-events-none absolute top-96 left-0 h-64 w-64 blur-3xl"></div>

        <div class="relative mx-auto flex w-full max-w-7xl flex-col gap-10 px-2 py-8 sm:px-6 lg:px-8 lg:py-14">
            <div class="border-accent/30 flex flex-col gap-6 border-b pb-8 lg:flex-row lg:items-end lg:justify-between">
                <div class="w-full space-y-4">
                    <h1 class="w-full font-serif text-2xl uppercase md:text-3xl text-center ">
                        {{ 'checkout_design.title'|trans }}
                    </h1>
                </div>
            </div>

            <div class="grid gap-8 lg:grid-cols-checkout">
                <div class="min-w-0 space-y-6">
                    <details
                        class="border-foreground/10 bg-foreground overflow-hidden border text-on-foreground shadow-surface-strong lg:hidden">
                        <summary
                            class="flex cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 sm:px-4">
                            <div>
                                <div
                                    class="text-accent/80 text-xs uppercase">{{ 'checkout_design.summary_title'|trans }}</div>
                                <div
                                    class="mt-2 font-serif text-lg uppercase sm:text-xl">
                                    {{ 'checkout_design.basket_title'|trans }} ({{ basket_quantity }})
                                </div>
                                <div
                                    class="mt-2 text-base font-semibold text-on-foreground">{{ cart.getPricing.totalTTC|price_format }}
                                    €
                                </div>
                            </div>
                            <span
                                class="border border-on-foreground/20 px-2 py-2 text-caption text-on-foreground uppercase">
                                {{ 'checkout_design.summary_toggle'|trans }}
                            </span>
                        </summary>
                        <div class="space-y-6 border-t border-on-foreground/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-accent/25 border-l-[3px] border-l-accent/80 bg-accent/10 shadow-promo-line' %}
                                    {% endif %}
                                    <div
                                        class="{{ line_item_classes }}">
                                        <div class="flex items-start gap-4">
                                            <div
                                                class="{% if line.isPromoGift %}border-accent/25 bg-surface/10{% else %}border-on-foreground/10 bg-surface/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="w-full"
                                                        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-accent text-caption uppercase">Brut</div>
                                                {% endif %}
                                            </div>
                                            <div class="min-w-0 flex-1">
                                                <div
                                                    class="{% if line.isPromoGift %}text-on-foreground{% endif %} mt-1 font-serif text-sm uppercase">{{ line.productName }}</div>
                                                <div
                                                    class="{% if line.isPromoGift %}text-on-foreground{% else %}text-on-foreground/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-on-foreground{% else %}text-on-foreground/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-on-foreground{% else %}text-on-foreground/90{% endif %} text-sm">
                                                    x{{ line.quantity }}</div>
                                                <div
                                                    class="{% if line.isPromoGift %}text-accent{% 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-on-foreground/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-accent/80 mt-1 text-xs">
                                                        {{ 'shop.degressive'|trans }}:
                                                        -{{ line.degressiveTTC|price_format }}€
                                                    </div>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}

                            </div>
                            <div class="border border-on-foreground/10 bg-surface/5 p-4" data-checkout-promo-block>
                                <div
                                    class="text-accent/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-accent h-12 min-w-0 flex-1 border border-on-foreground/10 bg-surface/5 px-2 text-sm text-on-foreground outline-none placeholder:text-on-foreground/55 focus:ring-0"
                                    >
                                    <button
                                        type="button"
                                        data-action="live#action"
                                        data-live-action-param="applyPromoCode"
                                        data-loading="action(applyPromoCode)|addAttribute(disabled)"
                                        class="border-accent/60 text-accent hover:bg-accent hover:text-foreground 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-accent/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-accent/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-success{% elseif cart.promoCodeStatus == 'pending_address' %}text-accent/90{% else %}text-error{% 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-on-foreground/10 pt-4 text-sm">
                                {% if cart.getPricing.degressiveTTC > 0 %}
                                    <div class="text-accent 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-on-foreground">
                                    <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-accent flex items-center justify-between text-sm">
                                            <span class="flex flex-col">
                                                <span>{{ 'shop.discount'|trans }}</span>
                                                <span class="text-accent/80 text-xs">
                                                    {{ promo.code ?: 'Promo' }}{% 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-on-foreground">
                                    <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-on-foreground/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-accent flex items-center justify-between text-sm">
                                            <span class="flex flex-col">
                                                <span>{{ 'shop.discount_shipping'|trans }}</span>
                                                <span class="text-accent/80 text-xs">
                                                    {{ promo.code ?: 'Promo' }}{% 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-on-foreground/10 pt-4 font-serif text-lg text-on-foreground uppercase sm:text-xl">
                                    <span>{{ 'shop.total_ttc'|trans }}</span>
                                    <span>{{ cart.getPricing.totalTTC|price_format }} €</span>
                                </div>
                            </div>
                        </div>
                    </details>

                    <div class="flex justify-center">
                        <a
                            href="{{ path('shop') }}"
                            class="inline-flex items-center justify-center border border-accent bg-accent px-5 py-3 text-sm font-semibold uppercase text-foreground transition hover:bg-accent-soft"
                        >
                            {{ 'shop.back'|trans }}
                        </a>
                    </div>

                    {{ 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="border-accent/30 border bg-surface/80 p-6 shadow-surface backdrop-blur sm:p-8">
                        <div class="mb-6 flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                            <div>
                                <h2 class="mt-2 font-serif text-lg uppercase sm:text-xl">
                                    {{ 'checkout_design.contact'|trans }}
                                </h2>
                            </div>
                            {% if not app.user %}
                                <a href="{{ path('app_login', { _target_path: app.request.requestUri }) }}"
                                   class="text-foreground hover:text-accent 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="border-accent/30 border bg-surface/80 p-6 shadow-surface backdrop-blur sm:p-8">
                        <div class="mb-6">
                            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                                <h2 class="mt-2 font-serif text-lg uppercase sm:text-xl">
                                    {{ 'checkout_design.delivery_title'|trans }}
                                </h2>
                                {% if app.user %}
                                    <button
                                        type="button"
                                        data-action="live#action:prevent"
                                        data-live-action-param="resetDeliveryAddress"
                                        class="text-foreground hover:text-accent 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="border-accent/20 bg-accent/5 md:col-span-2 rounded-sm border p-4">
                                {% 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="border-accent/30 border bg-surface/80 p-6 shadow-surface backdrop-blur sm:p-8">
                        <div class="mb-6 flex items-start justify-between gap-4">
                            <div>
                                <h2 class="mt-2 font-serif text-lg uppercase sm:text-xl">
                                    {{ 'checkout_design.billing_title'|trans }}
                                </h2>
                            </div>

                            <label
                                class="border-accent/25 bg-accent/5 text-foreground inline-flex cursor-pointer items-center gap-2 border px-3 py-1.5 text-caption uppercase"
                            >
                                {{ form_widget(form.invoiceAddress.differentAddress, {
                                    attr: {
                                        class: 'h-3 w-3 cursor-pointer border-accent/40 text-accent focus:ring-accent',
                                        '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-foreground hover:text-accent 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="border-accent/20 bg-accent/5 md:col-span-2 rounded-sm border p-4">
                                {% 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="border-accent/30 border bg-surface/80 p-6 shadow-surface backdrop-blur sm:p-8">
                            <div class="mb-6">
                                <h2 class="mt-2 font-serif text-lg uppercase sm:text-xl">
                                    {{ 'checkout_design.delivery_method_title'|trans }}
                                </h2>
                            </div>

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

                        <div
                            class="border-accent/30 border bg-surface/80 p-6 shadow-surface backdrop-blur sm:p-8">
                            <div class="mb-6">
                                <h2 class="mt-2 font-serif text-lg uppercase sm:text-xl">
                                    {{ 'checkout_design.payment_title'|trans }}
                                </h2>
                            </div>
                            {{ form_row(form.paymentMethod) }}
                        </div>
                    </div>

                    <div
                        class="border-accent/30 border bg-surface/80 p-6 shadow-surface backdrop-blur sm:p-8">
                        <div class="mb-6">
                            <h2 class="mt-2 font-serif text-lg uppercase sm:text-xl">
                                {{ '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-accent/40 text-accent focus:ring-accent',
                                        'data-checkout-cgv-source': 'desktop'
                                    }
                                }) }}
                                <div class="min-w-0 text-sm leading-6 text-foreground/90">
                                    <label for="checkout-cgv" class="cursor-pointer">
                                        {{ 'shop.accept_cgv'|trans }}
                                    </label>
                                    <a
                                        href="{{ path('cgv') }}"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        class="text-foreground decoration-accent hover:text-accent 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="border-foreground/10 bg-foreground overflow-hidden border text-on-foreground shadow-surface-strong lg:hidden">
                        <summary
                            class="flex cursor-pointer list-none items-center justify-between gap-4 px-6 py-5 sm:px-4">
                            <div>
                                <div
                                    class="text-accent/80 text-xs uppercase">{{ 'checkout_design.summary_title'|trans }}</div>
                                <div
                                    class="mt-2 font-serif text-lg uppercase sm:text-xl">
                                    {{ 'checkout_design.basket_title'|trans }} ({{ basket_quantity }})
                                </div>
                                <div
                                    class="mt-2 text-base font-semibold text-on-foreground">{{ cart.getPricing.totalTTC|price_format }}
                                    €
                                </div>
                            </div>
                            <span
                                class="border border-on-foreground/20 px-2 py-2 text-caption text-on-foreground uppercase">
                                {{ 'checkout_design.summary_toggle'|trans }}
                            </span>
                        </summary>
                        <div class="space-y-6 border-t border-on-foreground/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-accent/25 border-l-[3px] border-l-accent/80 bg-accent/10 shadow-promo-line' %}
                                    {% endif %}
                                    <div
                                        class="{{ line_item_classes }}">
                                        <div class="flex items-start gap-4">
                                            <div
                                                class="{% if line.isPromoGift %}border-accent/25 bg-surface/10{% else %}border-on-foreground/10 bg-surface/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="w-full"
                                                        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-accent text-caption uppercase">Brut</div>
                                                {% endif %}
                                            </div>
                                            <div class="min-w-0 flex-1">
                                                <div
                                                    class="{% if line.isPromoGift %}text-on-foreground{% endif %} mt-1 font-serif text-sm uppercase">{{ line.productName }}</div>
                                                <div
                                                    class="{% if line.isPromoGift %}text-on-foreground{% else %}text-on-foreground/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-on-foreground{% else %}text-on-foreground/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-on-foreground{% else %}text-on-foreground/90{% endif %} text-sm">
                                                    x{{ line.quantity }}</div>
                                                <div
                                                    class="{% if line.isPromoGift %}text-accent{% 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-on-foreground/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-accent/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-on-foreground/10 pt-4 text-sm">
                                {% if cart.getPricing.degressiveTTC > 0 %}
                                    <div class="text-accent 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-on-foreground">
                                    <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-accent flex items-center justify-between text-sm">
                                            <span class="flex flex-col">
                                                <span>{{ 'shop.discount'|trans }}</span>
                                                <span class="text-accent/80 text-xs">
                                                    {{ promo.code ?: 'Promo' }}{% 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-on-foreground">
                                    <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-on-foreground/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-accent flex items-center justify-between text-sm">
                                            <span class="flex flex-col">
                                                <span>{{ 'shop.discount_shipping'|trans }}</span>
                                                <span class="text-accent/80 text-xs">
                                                    {{ promo.code ?: 'Promo' }}{% 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-on-foreground/10 pt-4 font-serif text-lg text-on-foreground 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-accent/40 bg-accent/10 space-y-2 rounded-sm border px-2 py-4 text-sm text-on-foreground">
                                    <div class="text-accent 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="border-accent/30 space-y-3 border bg-surface/80 p-6 shadow-surface backdrop-blur sm:p-8 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-accent/40 text-accent focus:ring-accent"
                            >
                            <div class="min-w-0 text-sm leading-6 text-foreground/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-foreground decoration-accent hover:text-accent 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="bg-accent text-foreground disabled:bg-foreground/20 w-full cursor-pointer px-5 py-4 text-sm font-semibold uppercase transition hover:bg-accent-soft disabled:cursor-not-allowed disabled:text-on-foreground/45">
                            {% if cart_already_paid %}
                                {{ 'checkout_design.already_paid_button'|trans }}
                            {% else %}
                                {{ 'checkout_design.pay_now'|trans }}
                            {% endif %}
                        </button>
                        <div class="text-foreground/90 space-y-3 text-sm">
                            <div class="flex items-center gap-3">
                                <span class="bg-accent 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="border-foreground/10 bg-foreground overflow-hidden border text-on-foreground shadow-surface-strong"
                        >
                            <div class="border-b border-on-foreground/10 px-6 py-6 sm:px-4">
                                <div
                                    class="text-accent/80 text-xs uppercase">{{ 'checkout_design.summary_title'|trans }}</div>
                                <h2 class="mt-3 font-serif text-lg uppercase sm:text-xl">
                                    {{ '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-accent/25 border-l-[3px] border-l-accent/80 bg-accent/10 shadow-promo-line' %}
                                        {% endif %}
                                        <div
                                            class="{{ line_item_classes }}">
                                            <div class="flex items-start gap-4">
                                                <div
                                                    class="{% if line.isPromoGift %}border-accent/25 bg-surface/10{% else %}border-on-foreground/10 bg-surface/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="w-full"
                                                            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-accent text-caption uppercase">Brut</div>
                                                    {% endif %}
                                                </div>
                                                <div class="min-w-0 flex-1">
                                                    <div
                                                        class="{% if line.isPromoGift %}text-on-foreground{% endif %} mt-1 font-serif text-sm uppercase">{{ line.productName }}</div>
                                                    <div
                                                        class="{% if line.isPromoGift %}text-on-foreground{% else %}text-on-foreground/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-on-foreground{% else %}text-on-foreground/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-on-foreground{% else %}text-on-foreground/90{% endif %} text-sm">
                                                        x{{ line.quantity }}</div>
                                                    <div
                                                        class="{% if line.isPromoGift %}text-accent{% 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-on-foreground/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-accent/80 mt-1 text-xs">
                                                            {{ 'shop.degressive'|trans }}:
                                                            -{{ line.degressiveTTC|price_format }}€
                                                        </div>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>

                                <div class="border border-on-foreground/10 bg-surface/5 p-4" data-checkout-promo-block>
                                    <div
                                        class="text-accent/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-accent h-12 min-w-0 flex-1 border border-on-foreground/10 bg-surface/5 px-2 text-sm text-on-foreground outline-none placeholder:text-on-foreground/55 focus:ring-0"
                                        >
                                        <button
                                            type="button"
                                            data-action="live#action"
                                            data-live-action-param="applyPromoCode"
                                            data-loading="action(applyPromoCode)|addAttribute(disabled)"
                                            class="border-accent/60 text-accent hover:bg-accent hover:text-foreground 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-accent/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-accent/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-success{% elseif cart.promoCodeStatus == 'pending_address' %}text-accent/90{% else %}text-error{% 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-on-foreground/10 pt-4 text-sm">
                                    {% if cart.getPricing.degressiveTTC > 0 %}
                                        <div class="text-accent 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-on-foreground">
                                        <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-accent flex items-center justify-between text-sm">
                                            <span class="flex flex-col">
                                                <span>{{ 'shop.discount'|trans }}</span>
                                                <span class="text-accent/80 text-xs">
                                                    {{ promo.code ?: 'Promo' }}{% 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-on-foreground">
                                    <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-on-foreground/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-accent flex items-center justify-between text-sm">
                                            <span class="flex flex-col">
                                                <span>{{ 'shop.discount_shipping'|trans }}</span>
                                                <span class="text-accent/80 text-xs">
                                                    {{ promo.code ?: 'Promo' }}{% 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-on-foreground/10 pt-4 font-serif text-lg text-on-foreground 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-accent/40 bg-accent/10 mb-4 space-y-2 rounded-sm border px-2 py-4 text-sm text-on-foreground">
                                        <div class="text-accent 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="bg-accent text-foreground disabled:bg-foreground/20 w-full cursor-pointer px-5 py-4 text-sm font-semibold uppercase transition hover:bg-accent-soft disabled:cursor-not-allowed disabled:text-on-foreground/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-on-foreground/90">
                                    <div class="flex items-center gap-3">
                                        <span class="bg-accent h-2 w-2"></span>
                                        <span>{{ 'checkout_design.secure_payment'|trans }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                </aside>
            </div>
        </div>
    </section>
</div>
