{% extends "layout.html" %}

{% set title = 'Product Details' %}

{% block content %}

<section class="sec-pad-sm npt">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                {% include 'component/search.html' %}
            </div>
        </div>
    </div>
</section>


<section class="sec-pad npt">
    <div class="container">
        <div class="row">
            <div class="col-sm-7">
                <div class="item-slider">
                    <div class="item-slide">
                        <div class="item-img vcenter">
                            <img src="_assets/img/products/06.jpg" alt="">
                        </div>
                    </div>
                    <div class="item-slide">
                        <div class="item-img vcenter">
                            <img src="_assets/img/products/02.jpg" alt="">
                        </div>
                    </div>
                    <div class="item-slide">
                        <div class="item-img vcenter">
                            <img src="_assets/img/products/03.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="item-thumb mtxxlg">
                    <div class="thumb-slide">
                        <img src="_assets/img/products/06.jpg" alt="">
                    </div>
                    <div class="thumb-slide">
                        <img src="_assets/img/products/02.jpg" alt="">
                    </div>
                    <div class="thumb-slide">
                        <img src="_assets/img/products/03.jpg" alt="">
                    </div>
                </div>
            </div>
            <div class="col-sm-5">
                <div class="media-content item-content plxlg">
                    <div class="pblg bb">
                        <h3 class="no-margin text-bold mbmd">
                            Johnson's Shiny Drops, Kids Shampoo, Wit a touch of silk proteins 500 ml
                        </h3>
                        <span class="info d-block mbmd">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
                        <p class="no-margin">
                            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
                        </p>
                    </div>
                    <div class="clearfix">
                        <div class="price mtxxlg pull-left">
                            <span class="text-bold d-block">50 <sub class="text-upper text-semibold">egp</sub></span>
                            <span class="text-bold d-block text-upper mtxs">80 egp</span>
                        </div>
                        <div class="qty mtxlg pull-right">
                            <label for="qty" class="text-bold d-block">Qty:</label>
                            <div class="qty-content">
                                <a href="#" class="qty-btn qty-minus text-bold">-</a>
                                <input type="number" id="qty" value="2">
                                <a href="#" class="qty-btn qty-plus text-bold">+</a>
                            </div>
                            <div class="status text-bold mtxs">
                                Status: <span>Available</span>
                            </div>
                        </div>
                    </div>
                    <a href="" class="btn btn-orange text-upper d-block mtxlg">
                        <i class="fas fa-shopping-cart mrsm"></i>
                        Add to Cart
                    </a>
                    <div class="product-actions mtmd">
                        <a href="#" class="mrlg">
                            <img src="_assets/img/icons/save-icon.png" class="mrxs" alt="">
                            Add to wishlist
                        </a>
                        <a href="#">
                            <img src="_assets/img/icons/share.png" class="mrxs" alt="">
                            Share
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad doctors">
    <div class="container">
        <div class="section-title">
            <h2 class="text-bold d-inline bb pull-left no-margin mbxlg pbmd text-upper">related products</h2>
        </div>
        <div class="slider mbxxlg">
            <div class="product-slider">
                {% for i in range(0, 2) -%}
                <div class="doctor-card service-card product-card">
                    <a href="#">
                        <figure class="doctor-img product-img">
                            <img src="_assets/img/products/01.jpg" alt="">
                        </figure>
                    </a>
                    <div class="doctor-info product-info">
                        <h3 class="text-center text-bold">
                            <a href="product.html">Product name</a>
                        </h3>
                        <p class="text-center">Product description</p>
                        <p class="text-bold text-center price">
                            80 EGP <sub>98 EGP</sub>
                        </p>
                    </div>
                    <a href="" class="btn btn-outline text-upper d-block mtxlg">
                        <i class="fas fa-shopping-cart mrsm"></i>
                        Add to Cart
                    </a>
                </div>
                <div class="doctor-card service-card product-card">
                    <a href="#">
                        <figure class="doctor-img product-img">
                            <img src="_assets/img/products/02.jpg" alt="">
                        </figure>
                    </a>
                    <div class="doctor-info product-info">
                        <h3 class="text-center text-bold">
                            <a href="product.html">Product name</a>
                        </h3>
                        <p class="text-center">Product description</p>
                        <p class="text-bold text-center price">
                            80 EGP <sub>98 EGP</sub>
                        </p>
                    </div>
                    <a href="" class="btn btn-outline text-upper d-block mtxlg">
                        <i class="fas fa-shopping-cart mrsm"></i>
                        Add to Cart
                    </a>
                </div>
                <div class="doctor-card service-card product-card">
                    <a href="#">
                        <figure class="doctor-img product-img">
                            <img src="_assets/img/products/03.jpg" alt="">
                        </figure>
                    </a>
                    <div class="doctor-info product-info">
                        <h3 class="text-center text-bold">
                            <a href="product.html">Product name</a>
                        </h3>
                        <p class="text-center">Product description</p>
                        <p class="text-bold text-center price">
                            80 EGP <sub>98 EGP</sub>
                        </p>
                    </div>
                    <a href="" class="btn btn-outline text-upper d-block mtxlg">
                        <i class="fas fa-shopping-cart mrsm"></i>
                        Add to Cart
                    </a>
                </div>
                <div class="doctor-card service-card product-card">
                    <a href="#">
                        <figure class="doctor-img product-img">
                            <img src="_assets/img/products/04.jpg" alt="">
                        </figure>
                    </a>
                    <div class="doctor-info product-info">
                        <h3 class="text-center text-bold">
                            <a href="product.html">Product name</a>
                        </h3>
                        <p class="text-center">Product description</p>
                        <p class="text-bold text-center price">
                            80 EGP <sub>98 EGP</sub>
                        </p>
                    </div>
                    <a href="" class="btn btn-outline text-upper d-block mtxlg">
                        <i class="fas fa-shopping-cart mrsm"></i>
                        Add to Cart
                    </a>
                </div>
                <div class="doctor-card service-card product-card">
                    <a href="#">
                        <figure class="doctor-img product-img">
                            <img src="_assets/img/products/05.jpg" alt="">
                        </figure>
                    </a>
                    <div class="doctor-info product-info">
                        <h3 class="text-center text-bold">
                            <a href="product.html">Product name</a>
                        </h3>
                        <p class="text-center">Product description</p>
                        <p class="text-bold text-center price">
                            80 EGP <sub>98 EGP</sub>
                        </p>
                    </div>
                    <a href="" class="btn btn-outline text-upper d-block mtxlg">
                        <i class="fas fa-shopping-cart mrsm"></i>
                        Add to Cart
                    </a>
                </div>
                {%- endfor %}
            </div>
        </div>
    </div>
</section>


{% endblock content %}