<table class="cart-table">
  <tbody>
    {% for item in items %}
    <tr class="{% cycle 'odd-row' 'even-row' %}">
      <td class="text-left product-name" data-label="Produit">{{ item.product_title }}</td>
      {% if item.product_description %}
        <td class="text-left product-description" data-label="Description">{{ item.product_description }}</td>
      {% endif %}
      <td class="product-color" data-label="Couleur">
        <div class="color-display">
            <div class="color-sample-cart"
                 {% if item.secondary_color_hex %}
                    style="background-image: linear-gradient(to right, {{ item.color_hex }} 50%, {{ item.secondary_color_hex }} 50%);"
                 {% else %}
                    style="background-color: {{ item.color_hex }};"
                 {% endif %}
            ></div>
          {{ item.color_name }} | {{ item.size_name }}
        </div>
      </td>
      <td class="product-quantity" data-label="Quantité">
        {% if edit_mode %}
        <div class="quantity-controls">
          <form method="post" action="{% url 'shop:update_cart_item' %}" class="quantity-form">
            {% csrf_token %}
            <input type="hidden" name="item_id" value="{{ item.id }}">
            <button type="submit" name="action" value="decrease" class="quantity-btn" {% if item.quantity <= 1 %}disabled{% endif %}>-</button>
            <span class="quantity-value">{{ item.quantity }}</span>
            <button type="submit" name="action" value="increase" class="quantity-btn">+</button>
          </form>
        </div>
        {% else %}
        <span>x {{ item.quantity }}</span>
        {% endif %}
      </td>
      <td class="price-column product-price" data-label="Prix">{{ item.total_price }} €</td>
      {% if edit_mode %}
      <td class="product-actions">
        <form method="post" action="{% url 'shop:remove_from_cart' %}" class="remove-form">
          {% csrf_token %}
          <input type="hidden" name="item_id" value="{{ item.id }}">
          <button type="submit" class="remove-btn">retirer</button>
        </form>
      </td>
      {% endif %}
    </tr>
    {% endfor %}
  </tbody>
  <tfoot>
    <tr>
      <td class="total-quantity" data-label="total-quantity">{{ total_quantity }} produit(s)</td>
      <td class="total-label text-left"></td>
      <td class="total-label text-left"></td>
      <td class="price-column total-price" data-label="total-price">{{ total_price }} €</td>
      {% if edit_mode %}
      <td class="total-label text-left"></td>
      {% endif %}
    </tr>
  </tfoot>
</table>
