{% extends "base.html" %} {% load static %} {% block branding %}
<section class="py-2 mb-5" style="background-color: #eee6ee">
  <div class="container">
    <nav aria-label="breadcrumb">
      <ol class="breadcrumb breadcrumb-site py-0 d-flex justify-content-center">
        <li class="breadcrumb-item">
          <a class="text-decoration-none text-body" href="{% url 'home' %}">Home</a>
        </li>
        <li class="breadcrumb-item active pl-0 d-flex align-items-center" aria-current="page">
          Products
        </li>
      </ol>
    </nav>
  </div>
</section>
<section>
  <div class="container container-xl">
    <div class="d-flex justify-content-between align-items-center flex-wrap">
      <!-- <p class="fs-18 font-weight-500 my-lg-0 my-2" style="color: #696969;">We found <strong
          class="font-weight-bold text-secondary"> {{ prod.paginator.count }} </strong>
        products available for you</p> -->
      <div class="d-flex align-items-center">
        <!-- <div class="dropdown show lh-1 rounded ml-lg-5 ml-0" style="background-color:#f5f5f5">
          <a href="#"
            class="dropdown-toggle custom-dropdown-toggle text-decoration-none text-secondary p-3 mw-210 position-relative d-block"
            id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Category
          </a> -->
        <form method="post">
          <div>
            <select class="lh-1 rounded ml-lg-5 ml-0" style="background-color: #f5f5f5;border: none;padding: 0.6rem;"
              name="categoryDropdown" id="catdd">
              <option selected="selected" ><span class="mr-3">Categories</span></option>

              {% for i in categories%}
              <option value={{i.name}}>{{i.name}}</option>
              {% endfor %}
            </select>

          </div>
        </form>
      </div>
    </div>
  </div>
  </div>
</section>

<section class="mt-7" >
  <div class="container container-xl" >
    <div class="row" id="catproduct">
      {% for i in prod %}
      <div class="col-xl-3 col-lg-4 col-md-6">
        <div class="card border-0 product mb-6" data-animate="fadeInUp" onclick='location.href="productDetails/{{i.id}}";'>
          <div class="position-relative d-flex align-items-center bg-light w-100" style="min-height: 400px;">
            <img src="media/{{ i.image }}" alt="Bio-shroom Rejuvenating Serum" />
            <div class="card-img-overlay d-flex p-3 flex-column">
              <div></div>
              <div class="w-100 content-change-horizontal d-flex justify-content-center mt-auto">
                <a href="https://wa.me/7506157743/?text=urlencodedtext" data-toggle="tooltip" data-placement="top" title="Whats App"
                  class="add-to-cart d-flex align-items-center justify-content-center text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle mr-2">
                  <img src='{% static "images/whatsapp-24.png" %}' alt="Whatsapp" />
                </a>
                <a href="productDetails/{{ i.id }}" data-toggle="tooltip" data-placement="top" title="Quick view"
                  class="preview d-md-flex align-items-center justify-content-center cursor-pointer text-secondary bg-white hover-white bg-hover-secondary w-48px h-48px rounded-circle mb-2 d-none">
                  <span data-toggle="modal" data-target="#quick-view">
                    <svg class="icon icon-eye-light fs-24">
                      <use xlink:href="#icon-eye-light"></use>
                    </svg>
                  </span>
                </a>
              </div>
            </div>
          </div>
          <div class="card-body pt-4 text-center px-0">
            <!-- <p class="card-text font-weight-bold fs-16 mb-1 text-secondary mx-auto w-75">
              <span>RS. {{ i.price }}</span>
            </p> -->
            <h2 class="card-title fs-15 font-weight-500 mb-2 mx-auto w-75">
              <a href="#">{{ i.name }}</a>
            </h2>
            <div class="d-flex align-items-center justify-content-center flex-wrap">
              <span class="card-text fs-14 font-weight-400 pl-2 lh-1 w-75">{{ i.small_description }}</span>
            </div>
            <!-- <div class="d-flex align-items-center justify-content-center flex-wrap">
              <span class="card-text fs-14 font-weight-400 pl-2 lh-1 w-75">{{ i.detail_description }}</span>
            </div> -->
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  <!-- <nav class="pb-5" method="GET">
    {% if prod.has_other_pages %}
    <ul class="pagination justify-content-center align-items-center mb-0 fs-16 font-weight-600">
        {% if prod.has_previous %}
        <li class="page-item fs-18 d-none d-sm-block">
            <a class="page-link rounded-circle w-40px h-40 p-0 justify-content-center align-items-center d-flex"
                href="?page={{ prod.previous_page_number }}" tabindex="-1"><i class="far fa-angle-double-left"></i></a>
        </li>
        {% else %}
        <li class="page-item fs-18 d-none d-sm-block disabled">
          <span class="page-link rounded-circle w-40px h-40 p-0 justify-content-center align-items-center d-flex"><i class="far fa-angle-double-left"></i></span>
        </li>
        {% endif %}
        {% for p in prod.paginator.page_range %}
          {% if prod.number == p %}
            <li class="page-item active">
                <span class="page-link rounded-circle w-40px h-40 p-0 justify-content-center align-items-center d-flex">{{ p }}<span class="sr-only">(current)</span></span>
            </li>
          {% else %}
            <li class="page-item">
                <a class="page-link rounded-circle w-40px h-40 p-0 justify-content-center align-items-center d-flex"
                    href="?page={{ p }}">{{ p }}</a>
            </li>
          {% endif %}
        {% endfor %}
        {% if prod.has_next %}
          <li class="page-item fs-18 d-none d-sm-block">
              <a class="page-link rounded-circle w-40px h-40 p-0 justify-content-center align-items-center d-flex"
                  href="?page={{ prod.next_page_number }}"><i class="far fa-angle-double-right"></i></a>
          </li>
        {% else %}
          <li class="page-item fs-18 d-none d-sm-block disabled">
            <span class="page-link rounded-circle w-40px h-40 p-0 justify-content-center align-items-center d-flex">
              <i class="far fa-angle-double-right"></i>
            </span>
          </li>
        {% endif %}
    </ul>
    {% endif %}
  </nav> -->
</section>
{% endblock %}