{% import "@SyliusShop/Common/Macro/money.html.twig" as money %}

{# Valeurs par défaut (pour éviter les erreurs si aucune variante) #}
{% set has_discount = false %}
{% set price = null %}
{% set original_price = null %}
{% set applied_promotions = [] %}

{% if not product.enabledVariants.empty() %}
{% set variant = product|sylius_resolve_variant %}
{% if variant is not null %}
{% set has_discount = variant|sylius_has_discount({'channel': sylius.channel}) %}
{% set price = money.calculatePrice(variant) %}
{% set original_price = money.calculate_original_price(variant) %}
{% set applied_promotions = variant.getappliedPromotionsForChannel(sylius.channel) %}
{% endif %}
{% endif %}

{% set nonVariantImages = [] %}
{% set variantImages = [] %}

{% for image in product.images %}
    {% if image.productVariants|length == 0 %}
        {% set nonVariantImages = nonVariantImages|merge([image]) %}
    {% else %}
        {% set variantImages = variantImages|merge([image]) %}
    {% endif %}
{% endfor %}

{% set orderedImages = nonVariantImages|merge(variantImages) %}
{% set cardImage = orderedImages|first %}
{% set cardImagePath = null %}

{% if cardImage %}
    {% set cardImagePath = cardImage.path|imagine_filter('sylius_shop_product_original') %}
{% else %}
    {% set cardImagePath = '//placehold.it/400x300' %}
{% endif %}

<div class="animate-underline hover-effect-opacity">
    <div class="position-relative mb-3">

        {# Badge si promo / réduction #}
        {% if has_discount %}
        <span class="badge text-bg-danger position-absolute top-0 start-0 z-2 mt-2 mt-sm-3 ms-2 ms-sm-3">
            Promo
        </span>
        {% endif %}

        {# Lien vers la page produit #}
        <a class="d-flex bg-body-tertiary rounded"
            href="{{ path('sylius_shop_product_show', {'slug': product.slug, '_locale': product.translation.locale}) }}">
            <!-- Conteneur Bootstrap avec ratio fixe (4:3) -->
            <div class="ratio" style="--cz-aspect-ratio: calc(308 / 274 * 100%)">

                <!-- Image principale -->
                <img class="img-fluid w-100 h-100 rounded" style="object-fit: cover; object-position: center;"
                    src="{{ cardImagePath }}"
                    alt="{{ product.name|e }}" loading="lazy" />
            </div>
        </a>



        {# Bloc d’effet d’animation #}
        <div
            class="hover-effect-target position-absolute start-0 bottom-0 w-100 z-2 opacity-0 pb-2 pb-sm-3 px-2 px-sm-3">
        </div>
    </div>

    {# Nom du produit #}
    <div class="nav mb-2">
        <a class="nav-link animate-target min-w-0 text-dark-emphasis p-0"
            href="{{ path('sylius_shop_product_show', {'slug': product.slug, '_locale': product.translation.locale}) }}">
            <span class="text-truncate">{{ product.name }}</span>
        </a>
    </div>

    {# Prix (incluant logiques de promotion / stock) via ton fragment #}
    <div class="h6 mb-2">
        {% include '@SyliusShop/Product/Box/_price.html.twig' with {'product': product} %}
    </div>

    {# Exemple d’options (taille, couleur, etc.) si tu en as besoin #}
    {#
    <div class="position-relative">
        <div class="hover-effect-target fs-xs text-body-secondary opacity-100">+2 colors</div>
        <div class="hover-effect-target d-flex gap-2 position-absolute top-0 start-0 opacity-0">
            <!-- Ex. de boucles ou radio buttons pour couleurs -->
        </div>
    </div>
    #}
</div>

<style>
  /* Ensure base link color is consistent on iOS Safari (no default blue) */
  .animate-underline a,
  .animate-underline a:link,
  .animate-underline a:visited {
    color: inherit !important;
    text-decoration: none;
  }
  .animate-underline a:hover,
  .animate-underline a:active,
  .animate-underline a:focus {
    color: inherit !important;
    text-decoration: none;
  }
</style>