{% load static %}

<div class="card h-100" >
    <div class="card-header text-truncate">{{item.title}}</div>
    <div class="card-body p-0">
      <img src="{{item.main_image.url}}"
      class="img-fluid img-thumbnail rounded mx-auto d-block mt-2 mb-2" 
      style="width: 13rem; height: 15rem;" alt="{{item.title}}">

      <div class="card-footer row d-flex mt-3 m-0">
        <div class="col">
          <input type="number" id="quantity{{item.id}}" name="quantity" min="1" value="1" class="form-control form-control-sm">
        </div>
        <div class="col text-end">
          <button class="btn btn-outline-success add-to-cart-button"
            data-product-id="{{item.id}}"
            data-csrf-token="{{csrf_token}}"
            data-add-to-cart-url={% url "cart-action-add-product" %}
            data-bs-toggle="modal" data-bs-target="#addToCartModal"
          >
              <img src="{% static 'images/icons/cart.svg' %}" style="width: 1rem; height: 1rem;" alt="Koszyk"/>
          </button>
        </div>
      </div>
    </div>
</div>
