{% extends 'app/base.html' %} 
{% load static %}
{% block title %}
Home 
{% endblock title %}
{% block slider %}
<div
  id="carouselExampleSlidesOnly"
  class="carousel slide"
  data-bs-ride="carousel"
>
<div class="carousel-inner bg-secondary-subtle">
  <div class="carousel-item active">
    <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80" class="d-block w-100 h-25" alt="..." />
  </div>
  <div class="carousel-item">
    <img src="https://images.unsplash.com/photo-1596461404969-9ae70f2830c1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80" class="w-100 d-block h-25" alt="..." />
  </div>
  <div class="carousel-item">
    <img src="https://plus.unsplash.com/premium_photo-1673502752899-04caa9541a5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=870&q=80" class="w-100 d-block h-25" alt="..." />
  </div>
  </div>
</div>
{% endblock slider %}
{% block content %} {% comment %}
<h1>Welcome page</h1>
{% endcomment %}

  <div class="row m-0 p-0">
    {% for product in data reversed %}
    <div class="col-sm-4">

      <a href="{% url 'product-detail' product.id %}" class="btn">
        <div>
        <img
          src="{{product.product_image.url}}"
          width="300px"
          hight="200px"
          alt="{{product}}"
        />
        <div class="fw-bold">{{product.title}}</div>
        <div class="fw-bold text-danger">
          Rs {{product.selling_price}}
          <small class="fw-light text-decoration-line-through"
          >{{product.discount}}</small
          >
        </div>
      </div>
    </a>
  </div>
    {% endfor %}
  </div>


{% endblock content %}