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

{# --------------------------------------------------------------------- #}
{#  Template : Cart > _itemRow.html.twig                                        #}
{#  Objectif  : une seule instance du champ quantité (pas de doublon d'id)     #}
{# --------------------------------------------------------------------- #}
{% set variant   = item.variant %}
{% set product   = variant.product %}
{% set originalPrice = sylius_order_item_original_price_to_display(item) %}
{% set image     = product.imagesByType('main').first ?? null %}
{% set variantImagePath = null %}
{% if variant.images|length > 0 %}
  {% for variantImage in variant.images %}
    {% if variantImagePath is null and variantImage.path is not empty %}
      {% set variantImagePath = variantImage.path %}
    {% endif %}
  {% endfor %}
{% endif %}
{% if variantImagePath is null %}
  {% for productImage in product.images %}
    {% if variantImagePath is null and productImage.productVariants is defined and productImage.path is not empty %}
      {% for linkedVariant in productImage.productVariants %}
        {% if variantImagePath is null and linkedVariant.id is defined and linkedVariant.id == variant.id %}
          {% set variantImagePath = productImage.path %}
        {% endif %}
      {% endfor %}
    {% endif %}
  {% endfor %}
{% endif %}

{# On rend le champ une seule fois pour éviter les IDs dupliqués #}
{% set quantityField = form_widget(form.quantity, {
    attr: {
        class: 'form-control text-center',
        min: 1
    }
}) %}

<tr {{ sylius_test_html_attribute('cart-product-row', item.productName) }}>

  {# -------------------------------------------------- #}
  {# 1. Cellule : Image + Infos produit                 #}
  {# -------------------------------------------------- #}
  <td class="py-3 ps-0 align-top">
    <div class="d-flex">
      {% if variantImagePath %}
        <div class="ratio ratio-1x1">
          <img src="{{ variantImagePath|imagine_filter('sylius_shop_product_tiny_thumbnail') }}"
               alt="{{ variant.name|default(product.name) }}"
               class="object-fit-cover rounded-3 border border-light bg-light" />
        </div>
      {% else %}
        {% include '@SyliusShop/Product/_mainImage.html.twig' with {
          product: product,
          filter: 'sylius_shop_product_tiny_thumbnail'
        } %}
      {% endif %}

      <div class="w-100 min-w-0 ps-2 ps-lg-3">
        <h5 class="d-flex animate-underline mb-2">
          <a class="d-block fs-sm fw-medium text-truncate animate-target"
             href="{{ path('sylius_shop_product_show', {'slug': product.slug }) }}">
            {{ product.name }}
          </a>
        </h5>

        <ul class="list-unstyled gap-1 fs-xs mb-0">
          {% for option in variant.optionValues %}
            <li>
              <span class="text-body-secondary">{{ option.option.name }}:</span>
              <span class="text-dark-emphasis fw-medium">{{ option.value }}</span>
            </li>
          {% endfor %}
        </ul>

        {# Infos prix & total supplémentaires pour mobile (< md) #}
        <div class="d-md-none mt-3">
          <div class="d-flex justify-content-between fs-sm mb-1">
            <span class="text-body-secondary">{{ 'sylius.ui.price'|trans }}:</span>
            <span class="fw-medium">{{ money.convertAndFormat(item.unitPrice) }}</span>
          </div>
          <div class="d-flex justify-content-between fs-sm">
            <span class="text-body-secondary">{{ 'sylius.ui.total'|trans }}:</span>
            <span class="fw-medium">{{ money.convertAndFormat(item.subtotal) }}</span>
          </div>
        </div>
      </div>
    </div>
  </td>

  {# -------------------------------------------------- #}
  {# 2. Cellule : Prix unitaire (desktop ≥ md)          #}
  {# -------------------------------------------------- #}
  <td class="h6 py-3 d-none d-md-table-cell align-middle">
    {{ money.convertAndFormat(item.unitPrice) }}
    {% if originalPrice is not null %}
      <del class="text-body-tertiary fs-xs fw-normal">
        {{ money.convertAndFormat(originalPrice) }}
      </del>
    {% endif %}
  </td>

  {# -------------------------------------------------- #}
  {# 3. Cellule : Quantité – source unique             #}
  {# -------------------------------------------------- #}
  <td class="py-3 align-middle">
    <div class="count-input rounded-2 d-inline-flex gap-1 align-items-center">
      <button type="button" class="btn btn-icon btn-sm flex-shrink-0" data-decrement>
        <i class="ci-minus"></i>
      </button>
      {{ quantityField|raw }}
      <button type="button" class="btn btn-icon btn-sm flex-shrink-0" data-increment>
        <i class="ci-plus"></i>
      </button>
    </div>
  </td>

  {# -------------------------------------------------- #}
  {# 4. Cellule : Sous‑total (desktop ≥ md)             #}
  {# -------------------------------------------------- #}
  <td class="h6 py-3 d-none d-md-table-cell align-middle">
    {{ money.convertAndFormat(item.subtotal) }}
  </td>

  {# -------------------------------------------------- #}
  {# 5. Cellule : Bouton supprimer                      #}
  {# -------------------------------------------------- #}
  <td class="text-end py-3 px-0 align-middle">
    <button type="button"
            class="btn-close fs-sm"
            data-bs-toggle="tooltip"
            data-bs-custom-class="tooltip-sm"
            data-bs-title="{{ 'sylius.ui.remove'|trans }}"
            aria-label="{{ 'sylius.ui.remove'|trans }}"
            data-js-remove-from-cart-button
            data-js-remove-from-cart-redirect-url="{{ path('sylius_shop_cart_summary') }}"
            data-js-remove-from-cart-csrf-token="{{ csrf_token(item.id) }}"
            data-js-remove-from-cart-api-url="{{ path('sylius_shop_ajax_cart_item_remove', {'id': item.id}) }}">
    </button>
  </td>
</tr>