{% set product = __SELF__.offer %}
    <!-- Breadcumb Area -->
    <div class="breadcumb_area">
        <div class="container h-100">
            <div class="row h-100 align-items-center">
                <div class="col-12">
                    <h5>Haryt barada giňişleýin maglumat</h5>
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ 'index'|page }}">Esasy sahypa</a></li>
                        <li class="breadcrumb-item"><a href="#">Harytlar</a></li>
                        <li class="breadcrumb-item active">{{ product.name }}</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
    <!-- Breadcumb Area -->

    <!-- Single Product Details Area -->
    <section class="single_product_details_area section_padding_100">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-6">
                    <div class="single_product_thumb">
                        <div id="product_details_slider" class="carousel slide" data-ride="carousel">

                            <!-- Carousel Inner -->
                            <div class="carousel-inner">
                            
                                {% for key, image in product.images %}
                                    <div class="carousel-item {{ key == 0 ? 'active' : '' }}">
                                        <a class="gallery_img" href="{{ image.path }}" title="{{ product.name }}">
                                            <img class="d-block w-100" src="{{ image.path }}" alt="{{ product.name }}">
                                        </a>
                                    </div>
                                {% endfor %}
                            </div>

                            <!-- Carosel Indicators -->
                            <ol class="carousel-indicators">
                                {% for key, image in product.images %}
                                    <li class="{{ key == 0 ? 'active' : '' }}" data-target="#product_details_slider" data-slide-to="{{key}}" style="background-image: url({{ image.path }});"></li>
                                {% endfor %}
                            </ol>
                        </div>
                    </div>
                </div>

                <!-- Single Product Description -->
                <div class="col-12 col-lg-6">
                    <div class="single_product_desc">
                        <h4 class="title mb-2">{{ product.name }}</h4>
                        <div class="single_product_ratings mb-2">
                            {% if(product.comments_count > 0) %}
                                {% for comment in product.comments %}
                                    <i class="fa fa-star {{ (comment.rating == 1 or comment.rating > 1) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                    <i class="fa fa-star {{ (comment.rating == 2 or comment.rating > 1) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                    <i class="fa fa-star {{ (comment.rating == 3 or comment.rating > 2) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                    <i class="fa fa-star {{ (comment.rating == 4 or comment.rating > 3) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                    <i class="fa fa-star {{ (comment.rating == 5 or comment.rating > 4) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                {% endfor %}
                            {% else %}
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                                <i class="fa fa-star" aria-hidden="true"></i>
                            {% endif %}
                            <span class="text-muted">({{ product.comments_count }} teswir)</span>
                        </div>
                        <h4 class="price mb-4">{{ product.price }} TMT</h4>

                        <!-- Overview -->
                        <div class="short_overview mb-4">
                            <h6>Maglumat</h6>
                            <p>{{ product.description|raw }}</p>
                        </div>


                        <!-- Add to Cart Form -->
                        <form class="cart clearfix my-5 d-flex flex-wrap align-items-center" method="post">
                            <div class="quantity">
                                <input type="number" class="qty-text form-control" id="qty2" step="1" min="1" max="12" name="quantity" value="1">
                            </div>
                            <button type="submit" name="addtocart" value="5" class="btn btn-primary mt-1 mt-md-0 ml-1 ml-md-3">Sebede goş</button>
                        </form>

                        <!-- Others Info -->
                        <div class="others_info_area mb-3 d-flex flex-wrap">
                            {% if user %}
                                <a class="add_to_wishlist" href="wishlist.html"><i class="fa fa-heart" aria-hidden="true"></i> Halanlarym</a>
                            {% else %}
                                <a class="add_to_wishlist" href="{{ 'login'|page }}"><i class="fa fa-heart" aria-hidden="true"></i> Halanlarym</a>
                            {% endif %}
                            <a class="share_with_friend" href="#"><i class="fa fa-share" aria-hidden="true"></i> Paýlaşmak</a>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="product_details_tab section_padding_100_0 clearfix">
                        <!-- Tabs -->
                        <ul class="nav nav-tabs" role="tablist" id="product-details-tab">
                            <li class="nav-item">
                                <a href="#description" class="nav-link active" data-toggle="tab" role="tab">Giňişleýin maglumat</a>
                            </li>
                            <li class="nav-item">
                                <a href="#reviews" class="nav-link" data-toggle="tab" role="tab">Teswirler <span class="text-muted">({{ product.comments_count }})</span></a>
                            </li>
                            <li class="nav-item">
                                <a href="#addi-info" class="nav-link" data-toggle="tab" role="tab">Goşmaça maglumat</a>
                            </li>
                            <li class="nav-item">
                                <a href="#refund" class="nav-link" data-toggle="tab" role="tab">Yzyna tabşyrmak &amp; Zakazy ýatyrmak</a>
                            </li>
                        </ul>
                        <!-- Tab Content -->
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane fade show active" id="description">
                                <div class="description_area">
                                    <h5>Giňişleýin maglumat</h5>
                                    <p>{{ product.description|raw }}</p>
                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane fade" id="reviews">
                                <div class="reviews_area">
                                    <ul>
                                        <li>
                                            {% for comment in product.comments %}
                                                <div class="single_user_review mb-15">
                                                    <div class="review-rating">
                                                        <i class="fa fa-star {{ (comment.rating == 1 or comment.rating > 1) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                                        <i class="fa fa-star {{ (comment.rating == 2 or comment.rating > 1) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                                        <i class="fa fa-star {{ (comment.rating == 3 or comment.rating > 2) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                                        <i class="fa fa-star {{ (comment.rating == 4 or comment.rating > 3) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                                        <i class="fa fa-star {{ (comment.rating == 5 or comment.rating > 4) ? 'colorYellow' : '' }}" aria-hidden="true"></i>
                                                        <span>{{ comment.comment }}</span>
                                                    </div>
                                                    <div class="review-details">
                                                        <p><a href="#">{{ comment.user.name }}</a> <span>{{ comment.created_at|date('d.m.Y') }}</span></p>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </li>
                                    </ul>
                                </div>

                                <div class="submit_a_review_area mt-20">
                                    <h4>Teswir ýazmak</h4>
                                    <form action="#" method="post">
                                        <div class="form-group">
                                            <div class="stars">
                                                <input type="radio" name="star" class="star-1" id="star-1">
                                                <label class="star-1" for="star-1">1</label>
                                                <input type="radio" name="star" class="star-2" id="star-2">
                                                <label class="star-2" for="star-2">2</label>
                                                <input type="radio" name="star" class="star-3" id="star-3">
                                                <label class="star-3" for="star-3">3</label>
                                                <input type="radio" name="star" class="star-4" id="star-4">
                                                <label class="star-4" for="star-4">4</label>
                                                <input type="radio" name="star" class="star-5" id="star-5">
                                                <label class="star-5" for="star-5">5</label>
                                                <span></span>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="name">Ulanyjy adyňyz</label>
                                            <input type="email" class="form-control" id="name" placeholder="Ulanyjy ady">
                                        </div>
                                        <div class="form-group">
                                            <label for="comments">Teswirler</label>
                                            <textarea class="form-control" id="comments" rows="5" data-max-length="150"></textarea>
                                        </div>
                                        <button type="submit" class="btn btn-primary">Teswiri ugratmak</button>
                                    </form>
                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane fade" id="addi-info">
                                <div class="additional_info_area">
                                    <h5>Goşmaça maglumatlar</h5>
                                    <p>Gelen harydyň hili pes bolan ýagdaýynda näme edip bilerin?
                                        <br> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit impedit similique qui, itaque delectus labore.</span></p>
                                    <p>Zakaz eden harydym gelmedi, onuň ýerine başga zat geldi.
                                        <br> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quam voluptatum beatae harum tempore, ab?</span></p>
                                    <p class="mb-0">Zakazy nädip ýatyryp bilerin?
                                        <br> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum eius eum, minima!</span></p>
                                </div>
                            </div>

                            <div role="tabpanel" class="tab-pane fade" id="refund">
                                <div class="refund_area">
                                    <h6>Harydy yzyna gaýtarmak</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quidem, eos eius laboriosam voluptates totam mollitia repellat rem voluptate obcaecati quas fuga similique impedit cupiditate vitae repudiandae. Rem, tenetur placeat!</p>

                                    <h6>Näme sebäpden yzyna gaýtarmakçy</h6>
                                    <ul class="mb-30 ml-30">
                                        <li><i class="icofont-check"></i> Hili pes</li>
                                        <li><i class="icofont-check"></i> Dostawka haýal</li>
                                        <li><i class="icofont-check"></i> Başga haryt geldi</li>
                                        
                                    </ul>

                                    <h6>Sorag. Gelen harydyň hili pes bolan ýagdaýynda näme edip bilerin?</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit impedit similique qui, itaque delectus labore.</p>

                                    <h6>Sorag. Zakaz eden harydym gelmedi, onuň ýerine başga zat geldi Näme edip bilerin?.</h6>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quam voluptatum beatae harum tempore, ab?</p>

                                    <h6>Sorag. Nädip zakazy ýatyryp bilerin?</h6>
                                    <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum eius eum, minima!</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Single Product Details Area End -->