{%- block _cart_items_entry_row -%}
    {% set cart = form.parent.parent.vars.data ?? null %}
    {% set pricing = cart ? cart.getPricing : null %}
    {% set pricing_line = null %}
    {% if pricing %}
        {% for line in pricing.lines %}
            {% if line.itemId == form.vars.data.id %}
                {% set pricing_line = line %}
            {% endif %}
        {% endfor %}
    {% endif %}
    {% set line_previous_ttc = pricing_line and pricing_line.degressiveTTC > 0 ? pricing_line.netTTC + pricing_line.degressiveTTC : null %}
    {% set product = form.vars.data.variant.product %}
    {% set product_image_path = pricing_line and pricing_line.imagePath ? pricing_line.imagePath : (product.secondImage and product.secondImage.path ? product.secondImage.path : (product.image and product.image.path ? product.image.path : null)) %}
    {% set product_title = pricing_line and pricing_line.productName ? pricing_line.productName : product.name %}
    {% set product_meta = pricing_line and (pricing_line.typeName or pricing_line.unitLabel)
        ? ((pricing_line.typeName ?: '') ~ (pricing_line.unitLabel ? ' (' ~ pricing_line.unitLabel ~ ')' : ''))
        : form.vars.data.variant.label
    %}
    {% set option_meta = pricing_line and pricing_line.optionName
        ? ('shop.option_label'|trans ~ ' : ' ~ pricing_line.optionName ~ (pricing_line.optionTotalTTC > 0 ? ' (+' ~ pricing_line.optionTotalTTC|price_format ~ ' €' ~ (pricing_line.optionFlatFee ? ', ' ~ ('shop.flat_fee'|trans|lower) : '') ~ ')' : ''))
        : null
    %}
    <div class="flex h-full flex-1 flex-col gap-6 overflow-y-scroll" id="item_{{ form.vars.data.id }}">
        <div class="flex h-fit w-full gap-3">
            <div class="border-accent/15 flex h-fit w-1/3 items-center justify-center border bg-surface p-2">
                {% if product_image_path %}
                    <twig:Image
                        alt="{{ product_title }}"
                        class="h-full w-full max-h-24"
                        row:class="w-full"
                        img:class="mx-auto h-full max-h-24 w-auto object-contain"
                        lazy="{{ false }}"
                        quality="{{ 70 }}"
                        responsive="{{ false }}"
                        path="{{ product_image_path }}"
                        imageWidth="300"
                        imageHeight="300"/>
                {% endif %}
            </div>
            <div class="flex w-full flex-col justify-between">
                <div class="mb-1 flex w-full justify-between gap-3">
                    <div class="flex min-w-0 flex-col">
                        <div class="font-serif text-sm uppercase md:text-base">{{ product_title }}</div>
                        {% if product_meta %}
                            <div class="mt-1 text-sm text-foreground/75 md:text-base">{{ product_meta }}</div>
                        {% endif %}
                        {% if option_meta %}
                            <div class="mt-1 text-sm text-foreground/60 md:text-sm">{{ option_meta }}</div>
                        {% endif %}
                    </div>
                    <button class="w-6 cursor-pointer text-xl disabled:cursor-not-allowed disabled:opacity-50" type="button" data-action="live#action:prevent:once"
                            data-live-action-param="debounce(300)|deleteItem"
                            data-loading="action(deleteItem)|addAttribute(disabled)"
                            data-live-id-param="{{ form.vars.data.id }}">
                        <div class="icon-trash-2 "></div>
                    </button>
                </div>
                {% if pricing_line and pricing_line.degressiveTTC > 0 %}
                    <div class="text-xs text-foreground/70">
                        <span>{{ 'shop.degressive'|trans }}</span>
                        <span> : -{{ pricing_line.degressiveTTC|price_format }} €</span>
                    </div>
                {% endif %}
                <div class="flex w-full items-center justify-between gap-3"
                     id="qty-{{ form.vars.name }}-{{ form.quantity.vars.errors|length }}">
                    <div data-controller="quantity-stepper" class="w-20 shrink-0">
                        {{ form_widget(form.quantity, {
                            attr : {
                                class: 'hidden h-10 w-full border border-border bg-surface/30 px-2 text-center text-sm text-foreground shadow-sm outline-none transition focus:border-border-strong sm:block',
                                'inputmode': 'numeric',
                                'data-model': 'norender|' ~ form.quantity.vars.full_name,
                                'data-quantity-stepper-target': 'input',
                                'data-action': 'input->quantity-stepper#syncDisplay change->quantity-stepper#syncDisplay change->live#action:prevent',
                                'data-live-action-param': 'debounce(300)|updateItemQuantity'
                            }
                        }) }}
                        <div class="quantity-stepper-mobile sm:hidden">
                            <div class="flex items-center rounded-full border border-foreground/15 bg-surface">
                                <button
                                    type="button"
                                    class="flex h-8 w-8 items-center justify-center text-lg leading-none text-foreground"
                                    data-action="quantity-stepper#decrement"
                                    aria-label="{{ 'shop.quantity'|trans }} -"
                                >
                                    -
                                </button>
                                <span
                                    class="flex min-w-8 items-center justify-center px-1 text-sm"
                                    data-quantity-stepper-target="display"
                                >
                                    {{ form.quantity.vars.value ?: 1 }}
                                </span>
                                <button
                                    type="button"
                                    class="flex h-8 w-8 items-center justify-center text-lg leading-none text-foreground"
                                    data-action="quantity-stepper#increment"
                                    aria-label="{{ 'shop.quantity'|trans }} +"
                                >
                                    +
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="font-serif font-semibold">
                        {% if line_previous_ttc is not null and line_previous_ttc > pricing_line.netTTC %}
                            <span class="mr-2 text-sm font-medium text-foreground-muted line-through decoration-1">{{ line_previous_ttc|price_format }}</span>
                        {% elseif form.vars.data.isDiscounted %}
                            <span class="mr-2 text-sm font-medium text-foreground-muted line-through decoration-1">{{ form.vars.data.getTotalTTC|price_format }}</span>
                        {% endif %}
                        {{ (pricing_line ? pricing_line.netTTC : form.vars.data.getTotalFinalTTC)|price_format }} €
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
