{#
// inputs:
// - with_sidebar: boolean
#}

<div class="product-tabs {% if with_sidebar %} product-tabs--layout--sidebar {% endif %} product-tabs--sticky">
    <div class="product-tabs__list">
        <div class="product-tabs__list-body">
            <div class="product-tabs__list-container container">
                <a href="#tab-description" class="product-tabs__item product-tabs__item--active">Description</a>
                <a href="#tab-specification" class="product-tabs__item">Specification</a>
                <a href="#tab-reviews" class="product-tabs__item">Reviews</a>
            </div>
        </div>
    </div>
    <div class="product-tabs__content">

        <div class="product-tabs__pane product-tabs__pane--active" id="tab-description">
            <div class="typography">
                <h3>Product Full Description</h3>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas fermentum, diam non iaculis finibus,
                    ipsum arcu sollicitudin dolor, ut cursus sapien sem sed purus. Donec vitae fringilla tortor, sed
                    fermentum nunc. Suspendisse sodales turpis dolor, at rutrum dolor tristique id. Quisque pellentesque
                    ullamcorper felis, eget gravida mi elementum a. Maecenas consectetur volutpat ante, sit amet molestie
                    urna luctus in. Nulla eget dolor semper urna malesuada dictum. Duis eleifend pellentesque dui et
                    finibus. Pellentesque dapibus dignissim augue. Etiam odio est, sodales ac aliquam id, iaculis eget
                    lacus. Aenean porta, ante vitae suscipit pulvinar, purus dui interdum tellus, sed dapibus mi mauris
                    vitae tellus.
                </p>
                <h3>Etiam lacus lacus mollis in mattis</h3>
                <p>
                    Praesent mattis eget augue ac elementum. Maecenas vel ante ut enim mollis accumsan. Vestibulum vel
                    eros at mi suscipit feugiat. Sed tortor purus, vulputate et eros a, rhoncus laoreet orci. Proin sapien
                    neque, commodo at porta in, vehicula eu elit. Vestibulum ante ipsum primis in faucibus orci luctus et
                    ultrices posuere cubilia Curae; Curabitur porta vulputate augue, at sollicitudin nisl molestie eget.
                </p>
                <p>
                    Nunc sollicitudin, nunc id accumsan semper, libero nunc aliquet nulla, nec pretium ipsum risus ac
                    neque. Morbi eu facilisis purus. Quisque mi tortor, cursus in nulla ut, laoreet commodo quam.
                    Pellentesque et ornare sapien. In ac est tempus urna tincidunt finibus. Integer erat ipsum, tristique
                    ac lobortis sit amet, dapibus sit amet purus. Nam sed lorem nisi. Vestibulum ultrices tincidunt turpis,
                    sit amet fringilla odio scelerisque non.
                </p>
            </div>
        </div>

        <div class="product-tabs__pane" id="tab-specification">
            <div class="spec">
                <h3 class="spec__header">Specification</h3>
                {% for section, features in specification %}
                    <div class="spec__section">
                        <h4 class="spec__section-title">{{ section }}</h4>
                        {% for name, value in features %}
                            <div class="spec__row">
                                <div class="spec__name">{{ name }}</div><div class="spec__value">{{ value }}</div>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
                <div class="spec__disclaimer">
                    Information on technical characteristics, the delivery set, the country of manufacture and the appearance
                    of the goods is for reference only and is based on the latest information available at the time of publication.
                </div>
            </div>
        </div>

        <div class="product-tabs__pane" id="tab-reviews">
            <div class="reviews-view">
                <div class="reviews-view__list">
                    <h3 class="reviews-view__header">Customer Reviews</h3>

                    <div class="reviews-list">
                        <ol class="reviews-list__content">
                            {% for review in reviews %}
                                <li class="reviews-list__item">
                                    <div class="review">
                                        <div class="review__avatar"><img src="{{ review.avatar }}.jpg" alt=""></div>
                                        <div class="review__content">
                                            <div class="review__author">{{ review.author }}</div>
                                            <div class="review__rating">
                                                {% include '/partials/rating.twig' with {
                                                    rating: review.rating
                                                } %}
                                            </div>
                                            <div class="review__text">{{ review.text }}</div>
                                            <div class="review__date">{{ review.date }}</div>
                                        </div>
                                    </div>
                                </li>
                            {% endfor %}
                        </ol>
                        <div class="reviews-list__pagination">
                            {% include '/partials/pagination.twig' %}
                        </div>
                    </div>
                </div>

                <form class="reviews-view__form">
                    <h3 class="reviews-view__header">Write A Review</h3>
                    <div class="row">
                        <div class="col-12 col-lg-9 col-xl-8">
                            <div class="form-row">
                                <div class="form-group col-md-4">
                                    <label for="review-stars">Review Stars</label>
                                    <select id="review-stars" class="form-control">
                                        <option>5 Stars Rating</option>
                                        <option>4 Stars Rating</option>
                                        <option>3 Stars Rating</option>
                                        <option>2 Stars Rating</option>
                                        <option>1 Stars Rating</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="review-author">Your Name</label>
                                    <input type="text" class="form-control" id="review-author" placeholder="Your Name">
                                </div>
                                <div class="form-group col-md-4">
                                    <label for="review-email">Email Address</label>
                                    <input type="text" class="form-control" id="review-email" placeholder="Email Address">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="review-text">Your Review</label>
                                <textarea class="form-control" id="review-text" rows="6"></textarea>
                            </div>
                            <div class="form-group mb-0">
                                <button type="submit" class="btn btn-primary btn-lg">Post Your Review</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>