{# Initialisation de la variable produit utilisée par Vue (fallback = 'prod') #}
{% set var = var|default('prod') %}

{# Carte produit principale avec gestion du hover (Vue events) #}
<div class="card-product" @mouseenter="activateHover({{ var }})" @mouseleave="resetHover({{ var }})">

    {# Zone média produit : image, zoom, tailles, couleurs #}
    <div class="card-product-media" :style="{ '--img-aspect': {{ var }}.aspectRatio || MIXED_ASPECT_RATIO }">

        {# Image principale du produit avec gestion erreur et redirection #}
        <img :src="getCardImage({{ var }})"
             :alt="{{ var }}.name"
             loading="lazy"
             decoding="async"
             @error="handleImageError({{ var }}, false)"
             @click.prevent="redirectToProductDeclination({{ var }}.idProduit || {{ var }}.productId || {{ var }}.id, {{ var }}.name, {{ var }}.id)"

             style="cursor:pointer;">



        {# Bouton overlay pour ouverture du zoom produit #}
        <button class="zoom-overlay" type="button" @click.prevent="openZoom(prod)">
            <i class="fa fa-arrows-alt" aria-hidden="true"></i>
            <span class="zoom-fallback" aria-hidden="true">&#8645;</span>
        </button>
        {# Favoris #}
        <button type="button"
                class="wishlist-overlay js-wishlist-toggle"
                :class="{ 'is-active': window.__WISHLIST_IDS__ && window.__WISHLIST_IDS__.has({{ var }}.idProduit || {{ var }}.productId || {{ var }}.id) }"
                :data-product-id="{{ var }}.idProduit || {{ var }}.productId || {{ var }}.id"
                :data-product-name="{{ var }}.name"
                :data-declination-id="{{ var }}.id || ({{ var }}.activeSizes.length ? {{ var }}.activeSizes[0].id : 0)"
                aria-label="Ajouter aux favoris">
            <i class="fa fa-heart" aria-hidden="true"></i>
            <span class="wishlist-fallback" aria-hidden="true">♥</span>
        </button>


        {# Titre du produit affiché sur l’image #}
        <h3 class="home-card-title product-name" v-text="{{ var }}.name"></h3>

        {# Overlay des tailles disponibles avec ajout rapide ou notification #}
        <div class="size-overlay" v-if="{{ var }}.activeSizes.length">
            <div class="size-pill-wrapper" v-for="size in {{ var }}.activeSizes" :key="size.id">

                {# Bouton taille (désactivé si stock nul) #}
                <button type="button"
                        class="size-pill"
                        :disabled="size.qty <= 0"
                        @click.prevent="quickAddSize({{ var }}, size)"
                        :title="size.qty <= 0 ? 'Prévenez-moi quand cette taille revient' : size.label">
                    ${size.label}
                </button>

                {# Icône notification si taille en rupture #}
                <span class="size-alert" v-if="size.qty <= 0" title="Prévenez-moi">
                    <i class="fas fa-bell"></i>
                </span>
            </div>

            {# Icône globale notification si produit hors stock #}
            <button v-if="!{{ var }}.stock"
                    class="notify-icon"
                    @click.prevent="openNotifyModal({{ var }})"
                    title="Préviens-moi lorsqu’il sera disponible">
                &#128276;
            </button>
        </div>

        {# Ligne des couleurs disponibles #}
        <div class="color-row">

            {# Affichage des 3 premières couleurs sous forme de pastilles #}
            <div class="color-swatches">
                <button v-for="(color, index) in ({{ var }}.colorSwatches || []).slice(0,3)"
                        type="button"
                        :key="color.id || index"
                        class="color-swatch"
                        :class="{'active': {{ var }}.activeColor && {{ var }}.activeColor.id === color.id}"
                        :style="getColorStyle(color.code)"
                        :title="color.name"
                        @click.prevent="onColorClick({{ var }}, color)">
                </button>
            </div>

            {# Bouton indiquant le nombre de couleurs supplémentaires #}
            <button v-if="({{ var }}.colorSwatches || []).length > 3"
                    class="more-colors"
                    type="button"
                    @click="openProduct({{ var }}.idProduit || {{ var }}.productId || {{ var }}.id, {{ var }}.name)"
                    v-text="'+' + (({{ var }}.colorSwatches || []).length - 3) + ' couleurs'">
            </button>

        </div>
    </div>

    {# Corps de la carte produit : prix et promotion #}
    <div class="card-product-body">
        <div class="product-card-rating" v-if="Number({{ var }}.ratingCount || 0) > 0">
            <span class="product-card-rating-stars" aria-hidden="true">
                <span
                    v-for="star in 5"
                    :key="star"
                    class="product-card-rating-star"
                    :class="{
                        'is-full': Number({{ var }}.ratingScore || 0) >= star,
                        'is-half': Number({{ var }}.ratingScore || 0) >= (star - 0.5) && Number({{ var }}.ratingScore || 0) < star
                    }"
                >&#9733;</span>
            </span>
            <span class="product-card-rating-value">${ Number({{ var }}.ratingScore || 0).toFixed(1) }</span>
            <span class="product-card-rating-count">(<span v-text="{{ var }}.ratingCount"></span>)</span>
        </div>

        {# Bloc prix principal #}
        <div class="product-price">
            <div class="price-current">

                {# Prix affiché (promo ou normal) #}
                <span class="price-value">
                    ${ formatPrice({{ var }}.promo && {{ var }}.promo.isValid ? getDiscountedPrice({{ var }}) : {{ var }}.priceTTC) } TND
                </span>

                {# Détails promotion : ancien prix + badge remise #}
                <span class="price-meta" v-if="{{ var }}.promo && {{ var }}.promo.isValid">
                    <span class="original-price">${ formatPrice({{ var }}.priceTTC) } TND</span>
                    <span class="discount-flag" v-text="getPromoLabel({{ var }})"></span>
                </span>
            </div>
        </div>
    </div>
</div>