{% raw %}
{% for product in products %}
  <div
    class="border-bottom row no-gutters align-items-center justify-content-center mb-3 mb-md-0 pb-3 pb-md-0"
    data-controller="cart"
    data-cart-variant-id="{{ product.variant_id }}"
    data-cart-image="{{ product.image }}"
    data-cart-title="{{ product.title }}"
    data-cart-extra="{{ product.extra | join: '|' }}"
    data-cart-line-item-id="{{ product.line_item.id }}">
    <div class="col-12 col-md-6 col-lg-4 p-3">
      <div class="d-flex align-items-center flex-wrap">
        <img class="mr-3" loading="lazy" src="{{ product.image }}" alt="{{ product.title }}" />

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

    <div class="col-12 col-md-6 col-lg-8">
      <div class="row no-gutters align-items-center">
        <div class="col-12 col-lg p-3">
          <p class="font-weight-light gray-600 m-0 text-center">
            <strong class="d-lg-none mr-3">{{ site.cart.price }}:</strong>
            <span>
              {{ product.line_item.attributes.price }} {{ product.line_item.attributes.currency }}
            </span>
          </p>
        </div>

        <div class="col-12 col-lg p-3">
          <div class="form-group m-0">
            <label for="cart-quantity-{{ product.variant_id }}" class="sr-only">{{ site.cart.quantity }}</label>
            <input
              class="form-control"
              aria-describedby="cart-quantity-help-{{ production.variant_id }}"
              type="number"
              min="1"
              data-target="cart.quantity"
              value="{{ product.line_item.attributes.quantity }}" />
          </div>
        </div>

        <div class="col-12 col-lg p-3">
          <p class="font-weight-light gray-600 m-0 text-center">
            <strong class="d-lg-none mr-3">{{ site.cart.subtotal }}:</strong>
            <span data-target="cart.subtotal">
              {{ product.line_item.attributes.discounted_amount }}
            </span>

            {{ product.line_item.attributes.currency }}
          </p>
        </div>

        <div class="col-12 col-lg-2 text-center">
          <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.cart.remove }}</span>
          </button>
        </div>
      </div>
    </div>
  </div>
{% endfor %}
{% endraw %}