{% set sellopsUpsell = sellopsDirectData ?? page.extensions.sellopsPostPurchaseUpsell ?? null %}
{% set upsellProducts = sellopsUpsell ? (sellopsUpsell.products ?? []) : [] %}
{% set sliderItemsPerView = sellopsUpsell ? (sellopsUpsell.sliderItemsPerView ?? 2) : 2 %}
{% set countdownSeconds = sellopsUpsell ? (sellopsUpsell.countdownSeconds ?? 0) : 0 %}
{% set discountPercent = sellopsUpsell ? (sellopsUpsell.discountPercent ?? 0) : 0 %}

{% set productDiscounts = sellopsUpsell ? (sellopsUpsell.productDiscounts ?? {}) : {} %}
{% set headline = sellopsUpsell ? (sellopsUpsell.headline ?? '') : '' %}
{% set subline = sellopsUpsell ? (sellopsUpsell.subline ?? '') : '' %}
{% set orderId = sellopsUpsell ? (sellopsUpsell.orderId ?? '') : '' %}
{% set acceptLabel = sellopsUpsell ? (sellopsUpsell.acceptLabel ?? '') : '' %}
{% set declineLabel = sellopsUpsell ? (sellopsUpsell.declineLabel ?? '') : '' %}
{% set offerExpired = sellopsUpsell ? (sellopsUpsell.offerExpired ?? false) : false %}
{% set expiresAt = sellopsUpsell ? (sellopsUpsell.expiresAt ?? null) : null %}
{% set hasTimedDiscount = orderId and expiresAt and not offerExpired %}
{% set configurableProductIds = sellopsUpsell ? (sellopsUpsell.configurableProductIds ?? []) : [] %}
{% set variantsByProductId = sellopsUpsell ? (sellopsUpsell.variantsByProductId ?? {}) : {} %}

{% set hasOneClick = sellopsUpsell ? (sellopsUpsell.hasOneClick ?? false) : false %}
{% set acceptUrl = sellopsUpsell ? (sellopsUpsell.acceptUrl ?? '') : '' %}
{% set displayMode = sellopsUpsell ? (sellopsUpsell.displayMode ?? 'popup') : 'popup' %}
{% set isPopup = displayMode != 'inline' %}

{% if upsellProducts is not empty and not offerExpired %}

    <div data-sellops-upsell-offer
         data-sellops-order-total="{{ sellopsUpsell.orderTotal|default(0) }}"
         data-sellops-currency-code="{{ sellopsUpsell.currencyCode ?? context.currency.isoCode|default('USD') }}"

         data-sellops-accept-url="{{ acceptUrl|default('/sellops/upsell/accept')|e('html_attr') }}"
         data-sellops-csrf-token="{{ sellops_upsell_accept_token(orderId)|e('html_attr') }}"
         data-sellops-is-popup="{{ isPopup ? '1' : '0' }}">

        {% macro imageSlider(product, cssClasses) %}
            {% set productImages = [] %}
            {% if product.media is not empty %}
                {% for mediaItem in product.media %}
                    {% if mediaItem.media is not null and mediaItem.media.url is not empty %}
                        {% set productImages = productImages|merge([{ url: mediaItem.media.url, pos: mediaItem.position|default(0) }]) %}
                    {% endif %}
                {% endfor %}
            {% endif %}
            {% if productImages is empty and product.cover is not null and product.cover.media is not null %}
                {% set productImages = [{ url: product.cover.media.url, pos: 0 }] %}
            {% endif %}
            {% if productImages is not empty %}
            <div class="sellops-img-slider {{ cssClasses }}" data-sellops-img-slider>
                {% for img in productImages %}
                <div class="sellops-img-slide{% if not loop.first %} d-none{% endif %}">

                   <!-- <a href="{{ seoUrl('frontend.detail.page', { productId: product.id }) }}" class="text-decoration-none d-block h-100"> -->
                    <a class="text-decoration-none d-block h-100">
                        <img class="sellops-img-slide-img object-fit-cover w-100 h-100"
                             src="{{ img.url }}"
                             alt="{{ product.translated.name|default('')|sw_sanitize }}"
                             loading="lazy">
                    </a>
                </div>
                {% endfor %}
                {% if productImages|length > 1 %}
                <button type="button" class="sellops-img-nav sellops-img-prev btn btn-secondary" aria-label="Previous image">
                    <svg class="sellops-img-nav-icon" width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M20 12H4M4 12L10 18M4 12L10 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
                <button type="button" class="sellops-img-nav sellops-img-next btn btn-secondary" aria-label="Next image">
                    <svg class="sellops-img-nav-icon" width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M4 12H20M20 12L14 6M20 12L14 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </button>
                <div class="sellops-img-dots">
                    {% for i in 1..productImages|length %}
                    <span class="sellops-img-dot{% if i == 1 %} active{% endif %}"></span>
                    {% endfor %}
                </div>
                {% endif %}
            </div>
            {% endif %}
        {% endmacro %}

        {% macro oneClickButton(product, orderId, offerExpired, acceptLabel, acceptUrl, discountPercent, expiresAt) %}
            {% set unitPrice = product.calculatedPrice is not null ? product.calculatedPrice.unitPrice : 0 %}
            {% set discountedPriceVal = discountPercent > 0 ? (unitPrice * (1 - discountPercent / 100))|round(2) : unitPrice %}
            {% set discountAmountVal  = discountPercent > 0 ? (unitPrice - discountedPriceVal)|round(2) : 0 %}
            {% set coverImgUrl = product.cover is not null and product.cover.media is not null ? product.cover.media.url : '' %}
            <button type="button"
                    class="btn btn-primary w-100 sellops-one-click-btn"
                    data-sellops-one-click="true"
                    data-sellops-order-id="{{ orderId|sw_sanitize }}"
                    data-sellops-product-id="{{ product.id|sw_sanitize }}"
                    data-sellops-accept-url="{{ acceptUrl|sw_sanitize }}"
                    data-sellops-discount="{{ discountPercent|default(0) }}"
                    data-sellops-expires-at="{{ expiresAt|default(0) }}"
                    data-sellops-product-name="{{ product.translated.name|default('')|sw_sanitize }}"
                    data-sellops-price-fmt="{{ unitPrice|currency }}"
                    data-sellops-price-num="{{ unitPrice }}"
                    data-sellops-discounted-price-fmt="{{ discountedPriceVal|currency }}"
                    data-sellops-discounted-price-num="{{ discountedPriceVal }}"
                    data-sellops-discount-amount-fmt="{{ discountAmountVal > 0 ? discountAmountVal|currency : '' }}"
                    data-sellops-product-img="{{ coverImgUrl }}"
                    {% if offerExpired %}disabled{% endif %}>
                <span class="sellops-btn-label">{{ (acceptLabel ?: 'Add to my order')|sw_sanitize }}</span>
                <span class="sellops-btn-spinner d-none">
                    <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                    Processing…
                </span>
            </button>

            <div class="sellops-one-click-success mt-2">

                <div class="d-flex align-items-center gap-3 mb-0">
                    <div class="sellops-success-icon-wrap">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
                             xmlns="http://www.w3.org/2000/svg">
                            <path d="M20 6L9 17L4 12" stroke="white" stroke-width="2.5"
                                  stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <div>
                        <div class="fw-semibold sellops-success-title">
                            Added to your order!
                        </div>
                        <div class="sellops-success-subtitle">
                            Ships with your current order
                        </div>
                    </div>
                </div>

            </div>

            <div class="sellops-one-click-error mt-2 rounded-3 px-3 py-2"></div>
        {% endmacro %}

        {% macro simpleForm(product, hasTimedDiscount, expiresAt, orderId, offerExpired, acceptLabel, discountPercent, requiresCheckoutRedirect) %}
            <form method="post"
                  action="{{ path('frontend.checkout.line-item.add') }}"
                  data-sellops-upsell-offer-form>
                <input type="hidden" name="redirectTo" value="frontend.checkout.confirm.page">
                <input type="hidden" name="lineItems[{{ product.id }}][id]" value="{{ product.id }}">
                <input type="hidden" name="lineItems[{{ product.id }}][referencedId]" value="{{ product.id }}">
                <input type="hidden" name="lineItems[{{ product.id }}][type]" value="product">
                <input type="hidden" name="lineItems[{{ product.id }}][quantity]" value="1">
                <input type="hidden" name="lineItems[{{ product.id }}][stackable]" value="1">
                <input type="hidden" name="lineItems[{{ product.id }}][removable]" value="1">

                <input type="hidden" name="lineItems[{{ product.id }}][payload][sellopsUpsellItem]" value="1">
                {% if discountPercent > 0 %}

                    {% set effExpiresAt = sellops_upsell_discount_expiry(hasTimedDiscount ? expiresAt : 0) %}
                    <input type="hidden" name="lineItems[{{ product.id }}][payload][sellopsUpsellDiscountEligible]" value="1" data-sellops-discount-input>
                    <input type="hidden" name="lineItems[{{ product.id }}][payload][sellopsUpsellDiscountPercent]" value="{{ discountPercent }}" data-sellops-discount-input>

                    <input type="hidden"
                           name="lineItems[{{ product.id }}][payload][sellopsUpsellDiscountSignature]"
                           value="{{ sellops_upsell_discount_signature(product.id, discountPercent, effExpiresAt, hasTimedDiscount) }}"
                           data-sellops-discount-input>

                    <input type="hidden"
                           name="lineItems[{{ product.id }}][payload][sellopsUpsellDiscountExpiresAt]"
                           value="{{ effExpiresAt }}"
                           data-sellops-upsell-discount-expires-at
                           data-sellops-discount-input>
                {% endif %}
                {% if hasTimedDiscount %}
                    <input type="hidden" name="lineItems[{{ product.id }}][payload][sellopsUpsellFinishOffer]" value="1" data-sellops-discount-input>
                {% endif %}
                <button type="submit"
                        class="btn btn-primary w-100"
                        {% if orderId and expiresAt %}data-sellops-upsell-buy-button{% endif %}
                        {% if offerExpired %}disabled{% endif %}>
                    {{ (acceptLabel ?: 'Add to my order')|sw_sanitize }}
                </button>
            </form>
        {% endmacro %}

        {% macro variantSwatchOneClick(product, variants, orderId, offerExpired, acceptLabel, acceptUrl, discountPercent, expiresAt) %}
            {% set unitPrice = product.calculatedPrice is not null ? product.calculatedPrice.unitPrice : 0 %}
            {% set discountedPriceVal = discountPercent > 0 ? (unitPrice * (1 - discountPercent / 100))|round(2) : unitPrice %}
            {% set discountAmountVal  = discountPercent > 0 ? (unitPrice - discountedPriceVal)|round(2) : 0 %}
            {% set coverImgUrl = product.cover is not null and product.cover.media is not null ? product.cover.media.url : '' %}
            {% set variantsSimple = [] %}
            {% for v in variants %}
                {% set variantsSimple = variantsSimple|merge([{id: v.id, label: v.label, groups: v.groups ?? []}]) %}
            {% endfor %}
            <div class="sellops-variant-swatch"
                 data-sellops-variants="{{ variantsSimple|json_encode|e('html_attr') }}">
                <div class="sellops-swatch-options mb-2"></div>
                <div class="sellops-swatch-validation sellops-hidden text-danger small mb-2">
                    👆 Please select all options to continue.
                </div>
                <button type="button"
                        class="btn btn-primary w-100 sellops-one-click-btn"
                        data-sellops-one-click="true"
                        data-sellops-order-id="{{ orderId|sw_sanitize }}"
                        data-sellops-product-id=""
                        data-sellops-accept-url="{{ acceptUrl|sw_sanitize }}"
                        data-sellops-discount="{{ discountPercent|default(0) }}"
                        data-sellops-expires-at="{{ expiresAt|default(0) }}"
                        data-sellops-product-name="{{ product.translated.name|default('')|sw_sanitize }}"
                        data-sellops-price-fmt="{{ unitPrice|currency }}"
                        data-sellops-price-num="{{ unitPrice }}"
                        data-sellops-discounted-price-fmt="{{ discountedPriceVal|currency }}"
                        data-sellops-discounted-price-num="{{ discountedPriceVal }}"
                        data-sellops-discount-amount-fmt="{{ discountAmountVal > 0 ? discountAmountVal|currency : '' }}"
                        data-sellops-product-img="{{ coverImgUrl }}"
                        {% if offerExpired %}disabled{% endif %}>
                    <span class="sellops-btn-label">{{ (acceptLabel ?: 'Add to my order')|sw_sanitize }}</span>
                    <span class="sellops-btn-spinner d-none">
                        <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
                        Processing…
                    </span>
                </button>

                <div class="sellops-one-click-success mt-2">
                    <div class="d-flex align-items-center gap-3 mb-0">
                        <div class="sellops-success-icon-wrap">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
                                <path d="M20 6L9 17L4 12" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <div>
                            <div class="fw-semibold sellops-success-title">Added to your order!</div>
                            <div class="sellops-success-subtitle">Ships with your current order</div>
                        </div>
                    </div>
                </div>
                <div class="sellops-one-click-error mt-2 rounded-3 px-3 py-2"></div>
            </div>
        {% endmacro %}

        {% macro variantForm(product, variants, hasTimedDiscount, expiresAt, orderId, offerExpired, acceptLabel, discountPercent) %}
            {% if variants is not empty %}

                {% set effExpiresAt = sellops_upsell_discount_expiry(hasTimedDiscount ? expiresAt : 0) %}
                {% set _variantSigs = {} %}
                {% if discountPercent > 0 %}
                    {% for variant in variants %}
                        {% set _variantSigs = _variantSigs|merge({
                            (variant.id): sellops_upsell_discount_signature(variant.id, discountPercent, effExpiresAt, hasTimedDiscount)
                        }) %}
                    {% endfor %}
                {% endif %}

                <select class="form-select form-select-sm mb-2"
                        data-sellops-variant-select
                        data-sellops-parent-id="{{ product.id }}"
                        data-sellops-has-timed-discount="{{ hasTimedDiscount ? '1' : '0' }}"
                        data-sellops-expires-at="{{ expiresAt }}"
                        data-sellops-effective-expires-at="{{ effExpiresAt }}"
                        data-sellops-discount-percent="{{ discountPercent }}"
                        data-sellops-variant-signatures="{{ _variantSigs|json_encode|e('html_attr') }}">
                    <option value="">— Choose option —</option>
                    {% for variant in variants %}
                        <option value="{{ variant.id }}">{{ variant.label|sw_sanitize }}</option>
                    {% endfor %}
                </select>
                <form method="post"
                      action="{{ path('frontend.checkout.line-item.add') }}"
                      id="sellops-vf-{{ product.id }}"
                      data-sellops-upsell-offer-form>
                    <input type="hidden" name="redirectTo" value="frontend.checkout.confirm.page">
                    <button type="submit"
                            id="sellops-vb-{{ product.id }}"
                            class="btn btn-primary w-100"
                            {% if orderId and expiresAt %}data-sellops-upsell-buy-button{% endif %}
                            {% if offerExpired %}disabled{% endif %}
                            disabled>
                        {{ (acceptLabel ?: 'Add to my order')|sw_sanitize }}
                    </button>
                </form>
            {% else %}

                <a href="{{ seoUrl('frontend.detail.page', { productId: product.id }) }}"
                   class="btn btn-primary w-100">
                    {{ (acceptLabel ?: 'Select options')|sw_sanitize }}
                </a>
            {% endif %}
        {% endmacro %}

        {% set sellopsSliderOptions = {
            slider: {
                startIndex: 1,
                slideBy: 1,
                controls: upsellProducts|length > 1,
                nav: false,
                mouseDrag: upsellProducts|length > 1,
                autoplay: false,
                autoplayButtonOutput: false,
                speed: 300,
                ariaLive: true,
                gutter: 30,
                loop: false,
                rewind: true,
                items: sliderItemsPerView,
                responsive: {
                    xs: { items: 1 },
                    sm: { items: sliderItemsPerView },
                    md: { items: sliderItemsPerView },
                    lg: { items: sliderItemsPerView },
                    xl: { items: sliderItemsPerView }
                }
            }
        } %}

        <div
            class="base-slider product-slider has-nav has-nav-outside"
            data-base-slider="true"
            data-base-slider-options="{{ sellopsSliderOptions|json_encode }}"
            role="region"
            aria-label="You may also like"
            tabindex="0"
        >
            <div class="product-slider-container" data-base-slider-container="true">
                {% for product in upsellProducts %}
                    <div class="product-slider-item">
                        <div class="card h-100 d-flex flex-row flex-wrap flex-md-nowrap">
                            {{ _self.imageSlider(product, 'col-12 col-md-6') }}
                            <div class="product-slider-item-content col-12 col-md-6 p-5 d-flex flex-wrap align-content-center">
                                <div class="card-body">
                                    {% if orderId and expiresAt %}
                                        {% set initialMinutes = (countdownSeconds / 60)|round(0, 'floor') %}
                                        {% set initialSeconds = (countdownSeconds % 60) %}
                                        <div class="small text-muted mb-3 d-flex align-items-center gap-2"
                                            data-sellops-upsell-countdown
                                            data-order-id="{{ orderId|sw_sanitize }}"
                                            data-expires-at="{{ expiresAt }}"
                                            data-duration="{{ countdownSeconds }}">
                                            <div class="d-flex align-items-center timer_info">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="timer">
                                                    <path d="M18.3,8.59l.91-.9a1,1,0,0,0-1.42-1.42l-.9.91a8,8,0,0,0-9.79,0l-.91-.92A1,1,0,0,0,4.77,7.69l.92.91A7.92,7.92,0,0,0,4,13.5,8,8,0,1,0,18.3,8.59ZM12,19.5a6,6,0,1,1,6-6A6,6,0,0,1,12,19.5Zm-2-15h4a1,1,0,0,0,0-2H10a1,1,0,0,0,0,2Zm3,6a1,1,0,0,0-2,0v1.89a1.5,1.5,0,1,0,2,0Z"/>
                                                </svg>
                                                <strong><span data-sellops-upsell-countdown-target>{{ initialMinutes }}:{{ '%02d'|format(initialSeconds) }}</span></strong>
                                            </div>
                                        </div>
                                        <div data-sellops-expired-notice
                                            class="sellops-hidden alert alert-warning small py-2 mb-2">
                                            ⏰ This special offer has expired. You can still add the product at the regular price.
                                        </div>
                                    {% endif %}
                                    <h2 class="h3">{{ (headline ?: 'You may also like')|sw_sanitize }}</h2>
                                    {% if subline %}
                                        <div class="text-muted mb-2">{{ subline|sw_sanitize }}</div>
                                    {% endif %}

                                    <a class="text-decoration-none">
                                        <div class="fw-semibold product-name">{{ product.translated.name|default('')|sw_sanitize }}</div>
                                    </a>

                                    {% set pidKey       = (product.id|default(''))|lower|replace({'-': ''}) %}
                                    {% set effectivePct = (productDiscounts[pidKey] is defined and productDiscounts[pidKey] is not null)
                                                          ? productDiscounts[pidKey]
                                                          : discountPercent %}

                                    {% if product.calculatedPrice is not null %}
                                        {% set originalPrice = product.calculatedPrice.unitPrice %}
                                        {% set discountedPrice = effectivePct > 0 ? (originalPrice * (1 - effectivePct / 100)) : originalPrice %}
                                        <div class="mt-2">
                                            {% if effectivePct > 0 and discountedPrice < originalPrice %}
                                                <div data-sellops-discounted-price>
                                                    <div class="text-danger fw-semibold">{{ discountedPrice|currency }}</div>
                                                    <div class="small text-muted"><s>{{ originalPrice|currency }}</s></div>
                                                </div>
                                                <div data-sellops-full-price class="sellops-hidden">
                                                    <div class="fw-semibold">{{ originalPrice|currency }}</div>
                                                </div>
                                                <div class="small text-success fw-semibold">Save {{ effectivePct|round(0) }}% off</div>
                                            {% else %}
                                                <div class="fw-semibold">{{ originalPrice|currency }}</div>
                                            {% endif %}
                                        </div>
                                    {% endif %}

                                    {% set shortDescription = product.translated.description|default('')|striptags %}
                                    {% if shortDescription %}
                                        <div class="small text-muted mt-2 description">
                                            {{ shortDescription|length > 140 ? (shortDescription|slice(0, 140) ~ '...') : shortDescription }}
                                        </div>
                                    {% endif %}
                                </div>

                                <div class="card-footer bg-transparent w-100">

                                    {% if hasOneClick and product.id not in configurableProductIds %}
                                        {{ _self.oneClickButton(product, orderId, offerExpired, acceptLabel, acceptUrl, effectivePct, expiresAt) }}
                                    {% elseif product.id in configurableProductIds %}
                                        {% if hasOneClick %}
                                            {{ _self.variantSwatchOneClick(product, variantsByProductId[product.id] ?? [], orderId, offerExpired, acceptLabel, acceptUrl, effectivePct, expiresAt) }}
                                        {% else %}
                                            {{ _self.variantForm(product, variantsByProductId[product.id] ?? [], hasTimedDiscount, expiresAt, orderId, offerExpired, acceptLabel, effectivePct) }}
                                        {% endif %}
                                    {% else %}
                                        {{ _self.simpleForm(product, hasTimedDiscount, expiresAt, orderId, offerExpired, acceptLabel, effectivePct, requiresCheckoutRedirect) }}
                                    {% endif %}
                                </div>

                                <div class="mt-3 text-center mx-auto">
                                    <button type="button"
                                            class="btn p-0 m-auto text-decoration-underline current_selection_btn"
                                            data-sellops-upsell-decline="true"
                                            data-sellops-upsell-order-id="{{ orderId|sw_sanitize }}"
                                            data-sellops-upsell-decline-url="{{ orderId ? path('frontend.sellops.upsell.decline', { orderId: orderId }) : '' }}">
                                        {{ (declineLabel ?: 'Decline offer')|sw_sanitize }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>

            {% if upsellProducts|length > 1 %}
                <div class="product-slider-controls-container">
                    <div class="base-slider-controls" data-base-slider-controls="true" role="navigation">
                        <button class="base-slider-controls-prev product-slider-controls-prev is-nav-prev-outside" aria-label="Previous">
                            <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none"><path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </button>
                        <button class="base-slider-controls-next product-slider-controls-next is-nav-next-outside" aria-label="Next">
                            <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none"><path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        </button>
                    </div>
                </div>
            {% endif %}
        </div>

    </div>

    {% if isPopup %}
        </div>
        </div>
    </div>
    {% endif %}

{% endif %}