{% extends 'base.html' %}
{% load static %}
{% block content %}

<!-- Breadcrumb area start  -->
      <div class="breadcrumb__area theme-bg-1 p-relative z-index-11 pt-95 pb-95">
         <div class="breadcrumb__thumb" data-background="{% static 'assets/imgs/bg/breadcrumb-bg-furniture.jpg' %}"></div>
         <div class="container">
            <div class="row justify-content-center">
               <div class="col-xxl-12">
                  <div class="breadcrumb__wrapper text-center">
                     <h2 class="breadcrumb__title">Produit</h2>
                     <div class="breadcrumb__menu">
                        <nav>
                           <ul>
                              <li><span><a href="/">Home</a></span></li>
                              <li><span>Produit</span></li>
                           </ul>
                        </nav>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- Breadcrumb area start  -->

      <!-- Product area start -->
      <section class="bd-product__area section-space">
         <div class="container">
            {% comment %} <div class="row">
               <div class="col-xxl-4 col-xl-4 col-lg-4 col-md-6">
                  <div class="bd-product__result mb-30">
                     <h4>20 Item On List</h4>
                  </div>
               </div>
               <div class="col-xxl-8 col-xl-8 col-lg-8 col-md-6">
                  <div
                     class="product__filter-wrapper d-flex flex-wrap gap-3 align-items-center justify-content-md-end mb-30">
                     <div class="bd-product__filter-btn">
                        <button type="button"><i class="fa-solid fa-list"></i> Filter</button>
                     </div>
                     <div class="product__filter-count d-flex align-items-center">
                        <div class="btn-dropdown__options">
                           <select>
                              <option>Show 20</option>
                              <option>This Past Week</option>
                              <option>This Past Month</option>
                              <option>This Past Year</option>
                              <option>All Time</option>
                           </select>
                        </div>
                        <div class="bd-product__filter-style nav nav-tabs" role="tablist">
                           <button class="nav-link active" id="nav-grid-tab" data-bs-toggle="tab"
                              data-bs-target="#nav-grid" type="button" role="tab" aria-selected="false"><i
                                 class="fa-solid fa-grid"></i></button>
                           <button class="nav-link" id="nav-list-tab" data-bs-toggle="tab" data-bs-target="#nav-list"
                              type="button" role="tab" aria-selected="true"><i class="fa-solid fa-bars"></i></button>
                        </div>
                     </div>
                  </div>
               </div>
            </div> {% endcomment %}
            <div class="row">
               <div class="col-xxl-12">
                  <div class="product__filter-tab">
                     <div class="tab-content" id="nav-tabContent">
                        <div class="tab-pane fade active show" id="nav-grid" role="tabpanel"
                           aria-labelledby="nav-grid-tab">
                           <div class="row g-5">
                              {% if products %}
                              {% for product in products %}
                              <div class="col-xxl-3 col-xl-3 col-lg-4 col-md-6 col-sm-6">
                                 <div class="product-item">
                                    <div class="product-badge">
                                       {% if product.aanbieding %}
                                       <span class="product-trending">Promotion</span>
                                       {% endif %}
                                    </div>
                                    <div class="product-thumb">
                                       <a href="{% url 'product_detail' product.id %}"><img src="{{ product.photo_main.url }}"
                                             alt=""></a>
                                    </div>
                                    <div class="product-action-item">
                                       
                                       <button type="button" class="product-action-btn" data-bs-toggle="modal"
                                          data-bs-target="#producQuickViewModal">

                                          <svg width="26" height="18" viewBox="0 0 26 18" fill="none"
                                             xmlns="http://www.w3.org/2000/svg">
                                             <path
                                                d="M13.092 4.55026C10.5878 4.55026 8.55683 6.58125 8.55683 9.08541C8.55683 11.5896 10.5878 13.6206 13.092 13.6206C15.5961 13.6206 17.6271 11.5903 17.6271 9.08541C17.6271 6.5805 15.5969 4.55026 13.092 4.55026ZM13.092 12.1089C11.4246 12.1089 10.0338 10.7196 10.0338 9.05216C10.0338 7.38473 11.3898 6.02872 13.0572 6.02872C14.7246 6.02872 16.0807 7.38473 16.0807 9.05216C16.0807 10.7196 14.7594 12.1089 13.092 12.1089ZM25.0965 8.8768C25.0875 8.839 25.092 8.79819 25.0807 8.76115C25.0761 8.74528 25.0655 8.73621 25.0603 8.7226C25.0519 8.70144 25.0542 8.67574 25.0429 8.65533C22.8441 3.62131 18.1064 0.724854 13.0572 0.724854C8.00807 0.724854 3.17511 3.61677 0.975559 8.65079C0.966488 8.67196 0.968 8.69388 0.959686 8.71806C0.954395 8.73318 0.943812 8.74074 0.938521 8.7551C0.927184 8.7929 0.931719 8.83296 0.92416 8.8715C0.910555 8.93953 0.897705 9.00605 0.897705 9.07483C0.897705 9.14361 0.910555 9.20862 0.92416 9.2774C0.931719 9.31519 0.926428 9.35677 0.938521 9.39229C0.943057 9.40968 0.954395 9.41648 0.959686 9.4316C0.967244 9.45201 0.965732 9.4777 0.975559 9.49887C3.17511 14.5314 7.96121 17.381 13.0104 17.381C18.0595 17.381 22.8448 14.5374 25.0436 9.5034C25.055 9.48148 25.0527 9.45956 25.061 9.43538C25.0663 9.42253 25.0761 9.4127 25.0807 9.39758C25.092 9.36055 25.089 9.32049 25.0965 9.28118C25.1101 9.21315 25.1222 9.14739 25.1222 9.0771C25.1222 9.01058 25.1094 8.94482 25.0958 8.87604L25.0965 8.8768ZM13.0104 15.8692C8.72841 15.8692 4.51298 13.6123 2.44193 9.07407C4.49333 4.55177 8.76469 2.23582 13.0572 2.23582C17.349 2.23582 21.5251 4.55404 23.5773 9.07861C21.5266 13.6002 17.3036 15.8692 13.0104 15.8692Z"
                                                fill="white" />
                                          </svg>
                                          <span class="product-tooltip">Quick View</span>
                                       </button>
                                       
                                    </div>
                                    <div class="product-content">
                                       <div class="product-tag">
                                          <span>{{ product.merk}}</span>
                                       </div>
                                       <h4 class="product-title"><a href="{% url 'product_detail' product.id %}">{{ product.title }}</a>
                                       </h4>
                                       <div class="product-price">
                                          {% if product.old_price %}
                                          <span class="product-old-price"><del>DH{{ product.old_price }}</del></span>
                                          {% endif %}
                                          <span class="product-new-price">Dh {{ product.price }}</span>
                                       </div>
                                    </div>
                                 </div>
                              </div>
                              {% endfor %}
                              {% else %}
                              <p>No products available.</p>
                              {% endif %}
                           </div>
                        </div>
                        
                     </div>
                  </div>
               </div>
            </div>
            <div class="row">
               <div class="bd-basic__pagination mt-50 d-flex align-items-center justify-content-center">
                  <nav>
                     <ul>
                        <li>
                           <span class="current">1</span>
                        </li>
                        <li>
                           <a href="#">2</a>
                        </li>
                        <li>
                           <a href="#">3</a>
                        </li>
                        <li>
                           <a href="#"><i class="fa-regular fa-angle-right"></i></a>
                        </li>
                     </ul>
                  </nav>
               </div>
            </div>
         </div>
      </section>
      <!-- Product area end -->
   {% endblock %}