{# === Header déclinaison === #}
{# Header déclinaison #}
<div class="d-flex align-items-center gap-3 mb-4 pb-2" style="border-bottom:1px solid #eee;">
    <div class="d-flex align-items-center mb-4 pb-2" style="border-bottom:1px solid #eee; gap:1.5rem;">
  
        {# --- Image --- #}
        <div class="flex-shrink-0">
          {% set img = null %}
          {% for pic in stock.declinationProduit.picture %}
            {% if pic.isSelected and img is null %}
              {% set img = vich_uploader_asset(pic, 'file') %}
            {% endif %}
          {% endfor %}

          {% if img %}
            <img
              src="{{ app.request.schemeAndHttpHost ~ img }}"
              alt="Photo"
              class="rounded border"
              style="width:80px;height:120px;object-fit:cover;"
            >
          {% else %}
            <div
              class="rounded border d-flex align-items-center justify-content-center bg-light"
              style="width:80px;height:80px;"
            >
              <i class="fa fa-image text-muted fs-4"></i>
            </div>
          {% endif %}
        </div>

        {# --- Texte --- #}
        <div class="flex-grow-1">
          <div class="fw-bold text-dark mb-1">
            Réf : <span class="fw-bold">{{ stock.declinationProduit.reference }}</span>
          </div>

          <div class="fw-semibold" style="font-size:1.1rem;">
            {{ stock.declinationProduit.name ?? 'Déclinaison' }}
          </div>

          <div class="text-muted d-flex align-items-center mt-2" style="gap:0.5rem;">
            <i class="fa fa-warehouse text-secondary"></i>
            <span>Entrepôt {{ stock.storehouse }}</span>
          </div>
        </div>
      </div>

  </div>


{# === Tableau historique === #}
{% set list = mouvements is defined ? mouvements : rows|default([]) %}

{% if list is not empty %}
  <table class="table table-bordered table-sm">
  <thead>
    <tr>
      <th style="width:36px;"></th>
      <th>Date</th>
      <th>Type</th>      
      <th class="text-center">Avant</th>
      <th class="text-center">Mouvement</th>
      <th class="text-center">Après</th>
      <th>Motif</th>
      <th>Note</th>
      <th>Utilisateur</th>
    </tr>
  </thead>

  <tbody>
    {% for r in list %}
      {% set delta   = r.deltaAvailable %}
      {% set created = r.createdAt %}      
      {% set type    = r.sourceType %}
      {% set before  = r.qtyBeforeAvailable %}      
      {% set after   = r.qtyAfterAvailable %}
      {% set reason  = r.reason|default('-') %}
      {% set note  = r.note|default('-') %}
      {% set actorId = r.actorId %}
      {% set actor   = actors[actorId]|default('-') %}

      <tr>
        <td class="text-center">
          {% if delta > 0 %}
            <i class="fa fa-arrow-up text-success" title="Entrée de stock"></i>
          {% elseif delta < 0 %}
            <i class="fa fa-arrow-down text-danger" title="Sortie de stock"></i>
          {% else %}
            <i class="fa fa-minus text-muted" title="Aucun changement"></i>
          {% endif %}
        </td>

        <td>{{ created ? created|date('d/m/Y H:i') : '-' }}</td>
        <td>{{ type ? type|capitalize : '-' }}</td>

        <td class="text-center">{{ before }}</td>

        <td class="text-center {{ delta < 0 ? 'text-danger' : 'text-success' }}">
          {{ delta > 0 ? '+' : '' }}{{ delta }}
        </td>
        
        <td class="text-center">{{ after }}</td>
        <td>{{ reason }}</td>
        <td>{{ note }}</td>
        <td>{{ actor }}</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

{% else %}
  <p class="text-muted text-center mb-0">Aucun mouvement enregistré pour ce stock.</p>
{% endif %}