{% load static %} 

<div class="card rounded-3 mb-4">
    <div class="card-body p-4">
      <div class="row d-flex justify-content-between align-items-center">
        <div class="col-md-2 col-lg-2 col-xl-2">
          <img
            src="{{item.product.main_image.image.url}}"
            class="img-fluid rounded-3">
        </div>
        <div class="col-md-3 col-lg-3 col-xl-3">
          <p class="lead fw-normal mb-2">{{item.product.title}}</p>
        </div>
        <div class="col-md-3 col-lg-3 col-xl-2 d-flex">
          <button class="btn btn-link px-2"
            onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
            <i class="fas fa-minus"></i>
          </button>

          <input id="form1" min="0" name="quantity" value="{{item.quantity}}" type="number"
            class="form-control form-control-sm quantity-input" 
            data-product-id="{{item.product.id}}"  
            data-csrf-token="{{csrf_token}}"
            data-update-cart-url="{% url 'cart-action-update-product' item.product.id %}"/>

          <button class="btn btn-link px-2"
            onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
            <i class="fas fa-plus"></i>
          </button>
        </div>
        <div class="col-md-3 col-lg-2 col-xl-2 offset-lg-1">
          <h5 class="mb-0">{{item.product.price}} ZŁ</h5>
        </div>
        <div class="col-md-1 col-lg-1 col-xl-1 text-end">
          <a href="#!" class="text-danger remove-from-cart-button"
          data-product-id="{{item.product.id}}"  
          data-csrf-token="{{csrf_token}}"
          data-remove-from-cart-url={% url "cart-action-remove-product" %}>
            <img src="{% static 'images/icons/trash.svg'%}" />
          </a>
        </div>
      </div>
    </div>

  </div>