{#
/**
 * @file
 *
 * Default product template.
 *
 * Available variables:
 * - attributes: HTML attributes for the wrapper.
 * - product: The rendered product fields.
 *   Use 'product' to print them all, or print a subset such as
 *   'product.title'. Use the following code to exclude the
 *   printing of a given field:
 *   @code
 *   {{ product|without('title') }}
 *   @endcode
 * - product_entity: The product entity.
 * - product_url: The product URL.
 *
 * @ingroup themeable
 */
#}
<div{{ attributes.addClass('product-detail') }}>
  <div class="row">
    <div class="product-images col-xs-12 col-sm-6 col-md-6 col-lg-6">
      {{ product['variation_field_image'] }}
    </div>
    <div class="product-info col-xs-12 col-sm-6 col-md-6 col-lg-6">
      <div class="title">{{ product['title'] }}</div>
      <div class="price">{{ product['variation_price'] }}</div>
      <div class="rating">{{ product['field_rating'] }}</div>
      <div class="add-to-cart">{{ product['variations'] }}</div>
      <div class="description">{{ product['field_descriptions'] }}</div>
      <div class="sku">{{ product['variation_sku'] }}</div>
      <div class="categories">{{ product['field_categories'] }}</div>
    </div>
  </div>
  <div class="product-details-wrap dexp_tab_wrapper vertical">
    <ul class="nav nav-tabs" id="shop-detail-tab">
      <li class="active">
        <a data-toggle="tab" href="#Description">{{ "Description"|t }}</a>
      </li>
      <li class="">
        <a data-toggle="tab" href="#Reviews">{{ "Review"|t }}</a>
      </li>
    </ul>

    <div class="tab-content" id="myTabContent">
      <div id="Description" class="tab-pane fade active in">
        {{ product['body'] }}
      </div>
      <div id="Reviews" class="tab-pane fade">
        {{ product['field_comments'] }}
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</div>