{% 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="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">{{ product.merk }}</h2>
                     <div class="breadcrumb__menu">
                        <nav>
                           <ul>
                              <li><span><a href="\">Home</a></span></li>
                              <li><span>Détails du produit</span></li>
                           </ul>
                        </nav>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- Breadcrumb area start  -->

      <!-- Product details area start -->
      <div class="product__details-area section-space-medium">
         <div class="container">
            <div class="row align-items-center">
               <div class="col-xxl-6 col-lg-6">
                  <div class="product__details-thumb-wrapper d-sm-flex align-items-start mr-50">
                     <div class="product__details-thumb-tab mr-20">
                        <nav>
                           <div class="nav nav-tabs flex-nowrap flex-sm-column" id="nav-tab" role="tablist">
                              <button class="nav-link active" id="img-main-tab" data-bs-toggle="tab"
                                 data-bs-target="#img-main" type="button" role="tab" aria-controls="img-main"
                                 aria-selected="true">
                                 <img src="{{ product.photo_main.url }}" alt="product-sm-thumb">
                              </button>
                              {% if product.photo_1 %}
                              <button class="nav-link" id="img-1-tab" data-bs-toggle="tab" data-bs-target="#img-1"
                                 type="button" role="tab" aria-controls="img-1" aria-selected="true">
                                 <img src="{{ product.photo_1.url }}" alt="product-sm-thumb">
                              </button>
                              {% endif %}
                              {% if product.photo_2 %}
                              <button class="nav-link" id="img-2-tab" data-bs-toggle="tab" data-bs-target="#img-2"
                                 type="button" role="tab" aria-controls="img-3" aria-selected="false">
                                 <img src="{{ product.photo_2.url }}" alt="product-sm-thumb">
                              </button>
                              {% endif %}
                              {% if product.photo_3 %}
                              <button class="nav-link" id="img-3-tab" data-bs-toggle="tab" data-bs-target="#img-3"
                                 type="button" role="tab" aria-controls="img-3" aria-selected="false">
                                 <img src="{{ product.photo_3.url }}" alt="product-sm-thumb">
                              </button>
                              {% endif %}
                           </div>
                        </nav>
                     </div>
                     <div class="product__details-thumb-tab-content">
                        <div class="tab-content" id="productthumbcontent">
                           <div class="tab-pane fade show active" id="img-main" role="tabpanel"
                              aria-labelledby="img-1-tab">
                              <div class="product__details-thumb-big w-img">
                                 <img src="{{ product.photo_main.url }}" alt="">
                              </div>
                           </div>

                           {% if product.photo_1 %}
                           <div class="tab-pane fade" id="img-1" role="tabpanel" aria-labelledby="img-1-tab">
                              <div class="product__details-thumb-big w-img">
                                 <img src="{{ product.photo_1.url }}" alt="">
                              </div>
                           </div>
                           {% endif %}
                           {% if product.photo_2 %}
                           <div class="tab-pane fade" id="img-2" role="tabpanel" aria-labelledby="img-2-tab">
                              <div class="product__details-thumb-big w-img">
                                 <img src="{{ product.photo_2.url }}" alt="">
                              </div>
                           </div>
                           {% endif %}
                           {% if product.photo_3 %}
                           <div class="tab-pane fade" id="img-3" role="tabpanel" aria-labelledby="img-3-tab">
                              <div class="product__details-thumb-big w-img">
                                 <img src="{{ product.photo_3.url }}" alt="">
                              </div>
                           </div>
                           {% endif %}
                        </div>
                     </div>
                  </div>
               </div>
               <div class="col-xxl-6 col-lg-6">
                  <div class="product__details-content pr-80">
                     <div class="product__details-top d-sm-flex align-items-center mb-15">
                        <div class="product__details-tag mr-10">
                           <a href="#">{{ product.merk }}</a>
                        </div>
                        {% comment %} <div class="product__details-rating mr-10">
                           <a href="#"><i class="fa-solid fa-star"></i></a>
                           <a href="#"><i class="fa-solid fa-star"></i></a>
                           <a href="#"><i class="fa-regular fa-star"></i></a>
                        </div> {% endcomment %}
                        {% comment %} <div class="product__details-review-count">
                           <a href="#">10 Reviews</a>
                        </div> {% endcomment %}
                     </div>
                     <h3 class="product__details-title text-capitalize">{{ product.title }}</h3>
                     <div class="product__details-price">
                        {% if product.old_price %}
                        <span class="old-price">Dh {{ product.old_price }}</span>
                        {% endif %}
                        <span class="new-price">Dh {{ product.price }}</span>
                     </div>
                     <p>{{ product.description }}</p>

                     <div class="product__details-action mb-35">
                        <div class="product__add-cart">
                           <a href="https://wa.me/+212{{ sites.whatsapp }}?text=Bonjour%20Ce%20m'intéresse%20{{ product.title }}." target="_blank" class="fill-btn cart-btn">
                              <span class="fill-btn-inner">
                                 <span class="fill-btn-normal">WhatsApp</span>
                                 <span class="fill-btn-hover">WhatsApp</span>
                              </span>
                           </a>
                        </div>
                        {% comment %} <div class="product__add-wish">
                           <a href="#" class="product__add-wish-btn"><i class="fa-solid fa-heart"></i></a>
                        </div> {% endcomment %}
                     </div>
                     <div class="product__details-meta mb-20">
                        {% comment %} <div class="sku">
                           <span>SKU:</span>
                           <a href="#">BO1D0MX8SJ</a>
                        </div> {% endcomment %}
                        <div class="categories">
                           <span>Catégories:</span> <a href="#">{{ product.category }},</a>
                        </div>
                        {% comment %} <div class="tag">
                           <span>Tags:</span> <a href="#"> Cheese,</a> <a href="#">Custard,</a> <a href="#">Frozen</a>
                        </div> {% endcomment %}
                     </div>
                     <div class="product__details-share">
                        <span>Share:</span>
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri }}"><i class="fa-brands fa-facebook-f"></i></a>
                        <a href="https://wa.me/?text=Check+this+out:+{{ request.build_absolute_uri }}"><i class="fa-brands fa-whatsapp"></i></a>
                        <a href="#" onclick="copyLink(); return false;"><i class="fa-brands fa-instagram"></i></a>
                     </div>
                  </div>
               </div>
            </div>
            <div class="product__details-additional-info section-space-medium-top">
               <div class="row">
                  <div class="col-xxl-3 col-xl-4 col-lg-4">
                     <div class="product__details-more-tab mr-15">
                        <nav>
                           <div class="nav nav-tabs flex-column " id="productmoretab" role="tablist">
                              <button class="nav-link active" id="nav-description-tab" data-bs-toggle="tab"
                                 data-bs-target="#nav-description" type="button" role="tab"
                                 aria-controls="nav-description" aria-selected="true">Description</button>
                              <button class="nav-link" id="nav-additional-tab" data-bs-toggle="tab"
                                 data-bs-target="#nav-additional" type="button" role="tab"
                                 aria-controls="nav-additional" aria-selected="false">Informations sur le produit </button>
                              {% comment %} <button class="nav-link" id="nav-review-tab" data-bs-toggle="tab"
                                 data-bs-target="#nav-review" type="button" role="tab" aria-controls="nav-review"
                                 aria-selected="false">Reviews (3)</button> {% endcomment %}
                           </div>
                        </nav>
                     </div>
                  </div>
                  <div class="col-xxl-9 col-xl-8 col-lg-8">
                     <div class="product__details-more-tab-content">
                        <div class="tab-content" id="productmorecontent">
                           <div class="tab-pane fade show active" id="nav-description" role="tabpanel"
                              aria-labelledby="nav-description-tab">
                              <div class="product__details-des">
                                 <p>{{ product.description }}</p>
                              </div>
                           </div>
                           <div class="tab-pane fade" id="nav-additional" role="tabpanel"
                              aria-labelledby="nav-additional-tab">
                              <div class="product__details-info">
                                 <ul>
                                    <li>
                                       <h4>ML</h4>
                                       {% if product.ml %}
                                       <span>{{ product.ml }}</span>
                                       {% else %}
                                       <span>N/A</span>
                                       {% endif %}
                                    </li>
                                    <li>
                                       <h4>Expédition</h4>
                                       <span>Transport</span>
                                    </li>
                                    <li>
                                       <h4>Care Info</h4>
                                       {% if product.care_info %}
                                       <span>{{ product.care_info }}</span>
                                       {% else %}
                                       <span>N/A</span>
                                       {% endif %}
                                    </li>
                                    <li>
                                       <h4>Marque</h4>
                                       {% if product.merk %}
                                       <span>{{ product.merk }}</span>
                                       {% else %}
                                       <span>N/A</span>
                                       {% endif %}
                                    </li>
                                 </ul>
                              </div>
                           </div>
                           <div class="tab-pane fade" id="nav-review" role="tabpanel" aria-labelledby="nav-review-tab">
                              <div class="product__details-review">
                                 <h3 class="comments-title">03 reviews for “Wide Cotton Tunic extreme hammer”</h3>
                                 <div class="latest-comments mb-50">
                                    <ul>
                                       <li>
                                          <div class="comments-box d-flex">
                                             <div class="comments-avatar mr-10">
                                                <img src="assets/imgs/user/user-01.png" alt="">
                                             </div>
                                             <div class="comments-text">
                                                <div
                                                   class="comments-top d-sm-flex align-items-start justify-content-between mb-5">
                                                   <div class="avatar-name">
                                                      <h5>Siarhei Dzenisenka</h5>
                                                      <div class="comments-date">
                                                         <span>March 27, 2018 9:51 am</span>
                                                      </div>
                                                   </div>
                                                   <div class="user-rating">
                                                      <ul>
                                                         <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                         <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                         <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                         <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                         <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                      </ul>
                                                   </div>
                                                </div>
                                                <p>This is cardigan is a comfortable warm classic piece. Great to layer
                                                   with a light top and you can dress up or down given the jewel
                                                   buttons. I’m 5’8” 128lbs a 34A and the Small fit fine.</p>
                                             </div>
                                          </div>
                                       </li>
                                       <li>
                                          <div class="comments-box d-flex">
                                             <div class="comments-avatar mr-10">
                                                <img src="assets/imgs/user/user-02.png" alt="">
                                             </div>
                                             <div class="comments-text">
                                                <div
                                                   class="comments-top d-sm-flex align-items-start justify-content-between mb-5">
                                                   <div class="avatar-name">
                                                      <h5>Siarhei Dzenisenka</h5>
                                                      <div class="comments-date">
                                                         <span>March 27, 2018 9:51 am</span>
                                                      </div>
                                                   </div>
                                                   <div class="user-rating">
                                                      <ul>
                                                         <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                         <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                         <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                         <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                         <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                      </ul>
                                                   </div>
                                                </div>
                                                <p>I bought this beautiful pale gray cashmere sweater for my
                                                   daughter-in-law for her birthday. She loves it and can wear it with
                                                   almost anything!</p>
                                             </div>
                                          </div>
                                       </li>
                                       <li>
                                          <div class="comments-box d-flex">
                                             <div class="comments-avatar mr-10">
                                                <img src="assets/imgs/user/user-03.png" alt="">
                                             </div>
                                             <div class="comments-text">
                                                <div
                                                   class="comments-top d-sm-flex align-items-start justify-content-between mb-5">
                                                   <div class="avatar-name">
                                                      <h5>Siarhei Dzenisenka</h5>
                                                      <div class="comments-date">
                                                         <span>March 27, 2018 9:51 am</span>
                                                      </div>
                                                   </div>
                                                   <div class="user-rating">
                                                      <ul>
                                                         <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                         <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                         <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                         <li><a href="#"><i class="fas fa-star"></i></a></li>
                                                         <li><a href="#"><i class="fal fa-star"></i></a></li>
                                                      </ul>
                                                   </div>
                                                </div>
                                                <p>Amazing club. Sure the secruity is very tight but actually made me
                                                   and my friends feel secure. You just have to go along with the
                                                   secruity. Bar staff and cloakroom staff really friendly. Coming out
                                                   at 7am into bright London sunshine in Smithfields is an amazing
                                                   London experience</p>
                                             </div>
                                          </div>
                                       </li>
                                    </ul>
                                 </div>
                                 <div class="product__details-comment section-space-medium-bottom">
                                    <div class="comment-title mb-20">
                                       <h3>Add a review</h3>
                                       <p>Your email address will not be published. Required fields are marked *</p>
                                    </div>
                                    <div class="comment-rating mb-20">
                                       <span>Overall ratings</span>
                                       <ul>
                                          <li><a href="#"><i class="fas fa-star"></i></a></li>
                                          <li><a href="#"><i class="fas fa-star"></i></a></li>
                                          <li><a href="#"><i class="fas fa-star"></i></a></li>
                                          <li><a href="#"><i class="fas fa-star"></i></a></li>
                                          <li><a href="#"><i class="fal fa-star"></i></a></li>
                                       </ul>
                                    </div>
                                    <div class="comment-input-box">
                                       <form action="#">
                                          <div class="row">
                                             <div class="col-xxl-12">
                                                <div class="comment-input">
                                                   <textarea placeholder="Your review"></textarea>
                                                </div>
                                             </div>
                                             <div class="col-xxl-6">
                                                <div class="comment-input">
                                                   <input type="text" placeholder="Your Name*">
                                                </div>
                                             </div>
                                             <div class="col-xxl-6">
                                                <div class="comment-input">
                                                   <input type="email" placeholder="Your Email*">
                                                </div>
                                             </div>
                                             <div class="col-xxl-12">
                                                <div class="comment-agree d-flex align-items-center mb-25">
                                                   <input class="z-check-input" type="checkbox" id="z-agree">
                                                   <label class="z-check-label" for="z-agree">Save my name, email, and
                                                      website in this browser for the next time I comment.</label>
                                                </div>
                                             </div>
                                             <div class="col-xxl-12">
                                                <div class="comment-submit">
                                                   <button type="submit" class="fill-btn">
                                                      <span class="fill-btn-inner">
                                                         <span class="fill-btn-normal">submit now</span>
                                                         <span class="fill-btn-hover">submit now</span>
                                                      </span>
                                                   </button>
                                                </div>
                                             </div>
                                          </div>
                                       </form>
                                    </div>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <!-- Product details area end -->

      <script>
function copyLink() {
  const url = window.location.href;
  navigator.clipboard.writeText(url).then(() => {
    alert("✅ Link copied! Paste it on Instagram 🌿");
  });
}
</script>
{% endblock content %}