{#
// inputs:
// - product: object - product data object (required)
// - layout:  string - one of [standard, quickview, sidebar, columnar] (required)
#}

<div class="product product--layout--{{ layout }}" data-layout="{{ layout }}">
    <div class="product__content">
        <!-- .product__gallery -->
        <div class="product__gallery">
            <div class="product-gallery">
                <div class="product-gallery__featured">
                    <button class="product-gallery__zoom">
                        <svg width="24px" height="24px"><use xlink:href="images/sprite.svg#zoom-in-24"></use></svg>
                    </button>
                    <div class="owl-carousel" id="product-image">
                        {% for image in product.images %}
                            <div class="product-image product-image--location--gallery">
                                <!--
                                The data-width and data-height attributes must contain the size of a larger version
                                of the product image.

                                If you do not know the image size, you can remove the data-width and data-height
                                attribute, in which case the width and height will be obtained from the naturalWidth
                                and naturalHeight property of img.product-image__img.
                                -->
                                <a href="{{ image }}.jpg" data-width="700" data-height="700" class="product-image__body" target="_blank">
                                    <img class="product-image__img" src="{{ image }}.jpg" alt="">
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="product-gallery__carousel">
                    <div class="owl-carousel" id="product-carousel">
                        {% for image in product.images %}
                            <a href="{{ image }}.jpg" class="product-image product-gallery__carousel-item">
                                <div class="product-image__body">
                                    <img class="product-image__img product-gallery__carousel-image" src="{{ image }}.jpg" alt="">
                                </div>
                            </a>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <!-- .product__gallery / end -->
        <!-- .product__info -->
        <div class="product__info">
            <div class="product__wishlist-compare">
                <button type="button" class="btn btn-sm btn-light btn-svg-icon" data-toggle="tooltip" data-placement="right" title="Wishlist">
                    <svg width="16px" height="16px"><use xlink:href="images/sprite.svg#wishlist-16"></use></svg>
                </button>
                <button type="button" class="btn btn-sm btn-light btn-svg-icon" data-toggle="tooltip" data-placement="right" title="Compare">
                    <svg width="16px" height="16px"><use xlink:href="images/sprite.svg#compare-16"></use></svg>
                </button>
            </div>
            <h1 class="product__name">{{ product.name }}</h1>
            <div class="product__rating">
                <div class="product__rating-stars">
                    {% include '/partials/rating.twig' with {
                        rating: product.rating
                    } %}
                </div>
                <div class="product__rating-legend">
                    <a href="">7 Reviews</a><span>/</span><a href="">Write A Review</a>
                </div>
            </div>
            <div class="product__description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare, mi in ornare elementum, libero nibh
                lacinia urna, quis convallis lorem erat at purus. Maecenas eu varius nisi.
            </div>
            <ul class="product__features">
                <li>Speed: 750 RPM</li>
                <li>Power Source: Cordless-Electric</li>
                <li>Battery Cell Type: Lithium</li>
                <li>Voltage: 20 Volts</li>
                <li>Battery Capacity: 2 Ah</li>
            </ul>
            <ul class="product__meta">
                <li class="product__meta-availability">Availability: <span class="text-success">In Stock</span></li>
                <li>Brand: <a href="">Wakita</a></li>
                <li>SKU: 83690/32</li>
            </ul>
        </div>
        <!-- .product__info / end -->
        <!-- .product__sidebar -->
        <div class="product__sidebar">
            <div class="product__availability">
                Availability: <span class="text-success">In Stock</span>
            </div>

            <div class="product__prices">
                {% if product.compare_at_price %}
                    <span class="product__new-price">{{ product.price }}</span>
                    <span class="product__old-price">{{ product.compare_at_price }}</span>
                {% else %}
                    {{ product.price }}
                {% endif %}
            </div>
            <!-- .product__options -->
            <form class="product__options">
                <div class="form-group product__option">
                    <label class="product__option-label">Color</label>
                    <div class="input-radio-color">
                        <div class="input-radio-color__list">
                            <label class="input-radio-color__item input-radio-color__item--white" style="color: #fff;" data-toggle="tooltip" title="White">
                                <input type="radio" name="color">
                                <span></span>
                            </label>
                            <label class="input-radio-color__item" style="color: #ffd333;" data-toggle="tooltip" title="Yellow">
                                <input type="radio" name="color">
                                <span></span>
                            </label>
                            <label class="input-radio-color__item" style="color: #ff4040;" data-toggle="tooltip" title="Red">
                                <input type="radio" name="color">
                                <span></span>
                            </label>
                            <label class="input-radio-color__item input-radio-color__item--disabled" style="color: #4080ff;" data-toggle="tooltip" title="Blue">
                                <input type="radio" name="color" disabled>
                                <span></span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group product__option">
                    <label class="product__option-label">Material</label>
                    <div class="input-radio-label">
                        <div class="input-radio-label__list">
                            <label>
                                <input type="radio" name="material">
                                <span>Metal</span>
                            </label>
                            <label>
                                <input type="radio" name="material">
                                <span>Wood</span>
                            </label>
                            <label>
                                <input type="radio" name="material" disabled>
                                <span>Plastic</span>
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group product__option">
                    <label class="product__option-label" for="product-quantity">Quantity</label>
                    <div class="product__actions">
                        <div class="product__actions-item">
                            <div class="input-number product__quantity">
                                <input id="product-quantity" class="input-number__input form-control form-control-lg" type="number" min="1" value="1">
                                <div class="input-number__add"></div>
                                <div class="input-number__sub"></div>
                            </div>
                        </div>
                        <div class="product__actions-item product__actions-item--addtocart">
                            <button class="btn btn-primary btn-lg">Add to cart</button>
                        </div>
                        <div class="product__actions-item product__actions-item--wishlist">
                            <button type="button" class="btn btn-secondary btn-svg-icon btn-lg" data-toggle="tooltip" title="Wishlist">
                                <svg width="16px" height="16px">
                                    <use xlink:href="images/sprite.svg#wishlist-16"></use>
                                </svg>
                            </button>
                        </div>
                        <div class="product__actions-item product__actions-item--compare">
                            <button type="button" class="btn btn-secondary btn-svg-icon btn-lg" data-toggle="tooltip" title="Compare">
                                <svg width="16px" height="16px">
                                    <use xlink:href="images/sprite.svg#compare-16"></use>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
            </form>
            <!-- .product__options / end -->
        </div>
        <!-- .product__end -->
        <div class="product__footer">
            <div class="product__tags tags">
                <div class="tags__list">
                    <a href="">Mounts</a>
                    <a href="">Electrodes</a>
                    <a href="">Chainsaws</a>
                </div>
            </div>

            <div class="product__share-links share-links">
                <ul class="share-links__list">
                    <li class="share-links__item share-links__item--type--like"><a href="">Like</a></li>
                    <li class="share-links__item share-links__item--type--tweet"><a href="">Tweet</a></li>
                    <li class="share-links__item share-links__item--type--pin"><a href="">Pin It</a></li>
                    <li class="share-links__item share-links__item--type--counter"><a href="">4K</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
