{% extends 'base.html' %}

{% block content %}
<div class="container mt-4">
    <div class="card-group">
      <div class="row row-cols-1 row-cols-md-3 g-4">
        {% for p in products %}
        <div class="col">
          <div class="card" style="width: 18rem;">
            <img src="{{ p.img.url }}" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">{{p.name}}</h5>
              <p class="card-text"> {{p.dis}}</p>
              <p><h2>Price: </h2>{{p.price}}</h2></p>
              <form method="get" action=" {% url 'buy' p.id %} ">

              <button type="submit" class="btn btn-primary mb-3">Buy Product</button>
            </form>
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>

{% endblock %}