{% for product in products %}
  <tr
    class="cart border-bottom"
    data-controller="cart"
    data-cart-variant-id="{{ product.variant_id }}"
    data-cart-image="{{ product.image }}"
    data-cart-title="{{ product.title }}"
    data-cart-remove="{{ product.remove }}"
    data-cart-line-item-id="{{ product.line_item.id }}">
    <td class="align-middle">
      <img class="pb-3 pt-3" src="{{ product.image }}" alt="{{ product.title }}" />
    </td>

    <td class="gray-600 align-middle">
      <p class="font-weight-bold m-0">-</p>
      <p class="font-weight-bold m-0">{{ product.title }}</p>
      <p class="font-weight-light m-0">{{ product.extra | join: ', ' }}</p>
    </td>

    <td class="align-middle">
      <p class="font-weight-light gray-600 m-0">{{ product.line_item.attributes.price }} {{ product.line_item.attributes.currency }}</p>
    </td>

    <td class="gray-600 align-middle">
      <input type="number" min="1" data-cart-target="quantity" value="{{ product.line_item.attributes.quantity }}" />
    </td>

    <td class="align-middle">
      <p class="font-weight-light gray-600 m-0">
        <span data-cart-target="subtotal">
          {{ product.line_item.attributes.subtotal }}
        </span>
        {{ product.line_item.attributes.currency }}
      </p>
    </td>

    <td class="align-middle">
      <button class="btn btn-transparent border-0 gray-600" data-action="cart#remove">
        <i class="fa fa-trash-o fa-2x fa-fw"></i>
        <span class="sr-only">{{ site.i18n.cart.layouts.cart.remove }}</span>
      </button>
    </td>
  </tr>
{% endfor %}