{% extends "layouts/home.html" %}
{% load static %}


{% block main %}

    <!-- breadcrumb -->
        <div class="tf-breadcrumb">
            <div class="container">
                <div class="tf-breadcrumb-wrap d-flex justify-content-between flex-wrap align-items-center">
                    <div class="tf-breadcrumb-list">
                        <a href="/" class="text">Home</a>
                        <i class="icon icon-arrow-right"></i>
                        <a href="/shop?category={{product.category.slug}}" class="text">{{product.category.name}}</a>
                        <i class="icon icon-arrow-right"></i>
                        <span class="text">{{product.name}}</span>
                    </div>
                    
                </div>
            </div>
        </div>
        <!-- /breadcrumb -->
        <!-- default -->
        <section class="flat-spacing-4 pt_0">
            <div class="tf-main-product section-image-zoom">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="tf-product-media-wrap sticky-top">
                                <div class="thumbs-slider">
                                    <div dir="ltr" class="swiper tf-product-media-thumbs other-image-zoom" data-direction="vertical">
                                        <div class="swiper-wrapper stagger-wrap">
                                            <!-- beige -->
                                            
                                            {% for img in product.imgs %}
                                            <div class="swiper-slide stagger-item" >
                                                <div class="item">
                                                    <img class="lazyload" data-src="{{img.image.url}}" src="{{img.image.url}}" alt="img-product">
                                                </div>
                                            </div>
                                            {% endfor %}
                                           
                                        </div>
                                    </div>
                                    <div dir="ltr" class="swiper tf-product-media-main" id="gallery-swiper-started">
                                        <div class="swiper-wrapper" >
                                            <!-- beige -->
                                             {% for img in product.imgs %}
                                             
                                                <div class="swiper-slide">
                                                    <a href="{{img.image.url}}" target="_blank" class="item" data-pswp-width="770px" data-pswp-height="1075px">
                                                        <img class="tf-image-zoom lazyload" data-zoom="{{img.image.url}}" data-src="{{img.image.url}}" src="{{img.image.url}}" alt="">
                                                    </a>
                                                </div>

                                             {% endfor %}
                                            
                                          
                                        </div>
                                        <div class="swiper-button-next button-style-arrow thumbs-next"></div>
                                        <div class="swiper-button-prev button-style-arrow thumbs-prev"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="tf-product-info-wrap position-relative">
                                <div class="tf-zoom-main"></div>
                                <div class="tf-product-info-list other-image-zoom">
                                    <div class="tf-product-info-title">
                                        <h5>{{product.name}}</h5>
                                    </div>
                                    
                                    <div class="tf-product-info-price">
                                        <div class="price-on-sale">{{currency}} {{product.price}}</div>
                                       
                                    </div>
                                   
                                    <form action="/add-to-cart" method="POST">
                                        {% csrf_token %}
                                    <div class="tf-product-info-quantity">
                                        <div class="quantity-title fw-6">Quantity</div>
                                        <div class="wg-quantity">
                                            <span class="btn-quantity btn-decrease">-</span>
                                            <input type="text" class="quantity-product" name="quantity" value="1">
                                            <input type="hidden" name="product_code" value="{{product.code}}">
                                            <span class="btn-quantity btn-increase">+</span>
                                        </div>
                                    </div>
                                    <div class="tf-product-info-buy-button my-5">
                                       
                                            <article>
                                                <button type="submit" class="tf-btn btn-fill justify-content-center fw-6 fs-16 flex-grow-1 animate-hover-btn "><span>Add to cart -&nbsp;</span><span class="tf-qty-price total-price">{{currency}}{{product.price}}</span></button>
                                                
                                                <div class="w-100">
                                                    <a href="/checkout" class="btns-full">Buy with <img src="{% static "images/payments/paypal.png" %}" alt=""></a>
                                                </div>
                                            </article>
                                        
                                    </div>
                                   </form>
                                 
                                    
                                </div>
                            </div>

                            <div class="widget-tabs style-has-border">
                                <ul class="widget-menu-tab">
                                    <li class="item-title active">
                                        <span class="inner">Description</span>
                                    </li>
                                
                                </ul>
                                <div class="widget-content-tab">
                                    <div class="widget-content-inner active">
                                        <div class="">
                                            {{product.description | safe}}
                                        </div>
                                    </div>
                                
                                </div>
                            </div>

                            <div class="tf-product-info-trust-seal">
                                        <div class="tf-product-trust-mess">
                                            <i class="icon-safe"></i>
                                            <p class="fw-6">Guarantee Safe <br> Checkout</p>
                                        </div>
                                        <div class="tf-payment">
                                            <img src="{% static "images/payments/visa.png" %}" alt="">
                                            <img src="{% static "images/payments/img-1.png" %}" alt="">
                                            <img src="{% static "images/payments/img-2.png" %}" alt="">
                                            <img src="{% static "images/payments/img-3.png" %}" alt="">
                                            <img src="{% static "images/payments/img-4.png" %}" alt="">
                                        </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
           
        </section>
        <!-- /default -->
       
        <!-- product -->
        <section class="flat-spacing-1 pt_0">
            <div class="container">
                <div class="flat-title">
                    <span class="title">People Also Bought</span>
                </div>
                <div class="hover-sw-nav hover-sw-2">
                    <div dir="ltr" class="swiper tf-sw-product-sell wrap-sw-over" data-preview="4" data-tablet="3" data-mobile="2" data-space-lg="30" data-space-md="15" data-pagination="2" data-pagination-md="3" data-pagination-lg="3">
                        <div class="swiper-wrapper">

                            {% for product in related %}
                
                            <div class="swiper-slide" lazy="true">
                                {% include "components/shared/product_card.html" %}
                            </div>

                            {% endfor %}
                            
                        </div>
                    </div>
                    <div class="nav-sw nav-next-slider nav-next-product box-icon w_46 round"><span class="icon icon-arrow-left"></span></div>
                    <div class="nav-sw nav-prev-slider nav-prev-product box-icon w_46 round"><span class="icon icon-arrow-right"></span></div>
                    <div class="sw-dots style-2 sw-pagination-product justify-content-center"></div>
                </div>
            </div>
        </section>
        <!-- /product -->

{% endblock main %}