{% load static %}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>List page</title>
    <style>
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap");

body {
    background-color: #eee;
    font-family: "Poppins", sans-serif
}
div { column-gap: 40px; }

.container {
    height: 100vh
}

.card {
    background-color: #fff;
    position: relative;
    width: 350px;
    border: none
}

.percent {
    width: 63px;
    height: 30px;
    position: absolute;
    background: red;
    color: #fff;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 0;
    border-bottom-left-radius: 15px;
    padding: 10px
}

.card-image {
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center
}

.card-inner {
    padding: 20px;
    margin: auto;
}

.price span {
    color: orange;
    font-weight: 600;
    font-size: 20px
}

 

.details {
    border-radius: 20px;
    border-color: black;
    width: 150px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center
}

.success:hover {
  background-color: #04AA6D;
  color: white;

 
    </style>
  </head>
  <body>

  
 
  {% if user.is_authenticated %}
   
<div class="row">
  <div class="col-sm-12 mb-3">
    <h4 class="text-center">Welcome {{ user.username }}</h4>
  </div>
  <div class="col-sm-12 mt-2 text-center">
    <button class="btn btn-primary">
      <a href="{% url 'logout' %}" class="text-white">Logout</a>
    </button>
  </div>
</div>
  {% else %}
  <a href="{% url 'login' %}">login</a><br>
  {% endif %}
    <h1 style="text-align:center">our Products</h1>
    <hr>
    <br/>
    <br/>

{% comment %} {% for p in pro %}

<div class="card" style="width: 18rem;">
  <img src="{{p.image.url}}" class="card-img-top" alt="product_img">
  <div class="card-body">
    <h5 class="card-title">{{p.title}}</h5>
    <p class="card-text">{{p.description}} </p>
    <p class="card-text">${{p.price}} </p>
    <a href="{% url 'esewa' p.id %}" class="btn btn-primary">subscribe with esewa</a>
  </div>
</div>
 
   

    {% endfor %} {% endcomment %}


  
{% comment %} here we use forloop for the iteration  {% endcomment %}
 
 
 <div class="container d-flex justify-content-center align-items-center">
  <div class="row">
  {% for p in object_list %}
    <div class="card col-4"> 
   
    {% comment %} <span class="percent">-10%</span> {% endcomment %}
        <div class="card-image"> <img src="{{p.image.url}}" width="250"> </div>
        <div class="card-inner">
         {% comment %} <span>Groceries</span> {% endcomment %}
            <h5 class="mb-0">{{p.title}}</h5>
            <div class="price"> <span>Nrs {{p.price}}</span></sup> </div>
             {% comment %} <a href="{% url 'esewarequest' p.id %}" class="btn success text-uppercase btn-sm details">pay with esewa</a> {% endcomment %}
             <a href="{% url 'addtocart' p.id %}" class="btn success text-uppercase btn-sm details"> Add to Cart </a>
        </div>
        </div>
        <br>
        <br>
         {% endfor %}
    </div>
</div>
   

   



 
    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>