{% set product_style_temp = 'style'|get_path_param %}
{% if product_style_temp %}
	{% set product_style = product_style_temp %}
{% endif %}
{% if product_style is empty %}
	{% set product_style = 'fullwidth' %}
{% endif %}
{% if product_style == 'fullwidth' %}
	<div class="col-md-8 col-sm-12 col-xs-12  margin-bottom">
		<div class="product_preview_left">
			<div class="row gallery">
				<div class="full col-md-8">
					<!-- first image is viewable to start -->
					<img src="{{ file_url(product.variation_field_images['#items'].entity.fileuri) }}"  alt="{{ product.variation_field_images['#items'].alt }}"/>
				</div>
				<div class="previews col-md-2">
				{% for img in product.variation_field_images['#items'] %}
					<a class="{{ loop.first ? 'selected' }}" data-full="{{ file_url(img.entity.fileuri) }}"><img src="{{ img.entity.fileuri|image_style_url('image_150x150') }}" alt="{{ img.alt }}" /></a>
				{% endfor %}	
				</div>
			</div>
		</div>
	</div>
	<!--end left-->
	<div class="col-md-4 col-sm-12 col-xs-12 product-des">
		<h4 class="uppercase">{{ product.title['#object'].title.value }}</h4>
		<div class="divider-line solid light"></div>
		<br/>
		<div class="col-md-5">
		<h2 class="text-gyellow font-weight-4">{{ product.variation_price.0['#markup'] }}</h2></div>
		<div class="col-md-7">
			<div class="stars votingapi-widgets fivestar">
				{{ product.field_vote_product }}
			</div>
		</div>
		<div class="clearfix"></div>
		{{ product.body }}
		<div class="clearfix"></div>
		<br/>
		{{ product.variations }}
		<div class="clearfix"></div>
		<br/>
		<br/>
		<div class="divider-line solid light"></div>
		<br/>
		<div class="pro-details"><span>{{ 'Product SKU'|t }} :</span> {{ product.variation_sku['#object'].sku.value }}</div>
		<div class="pro-details"><span>{{ 'Category'|t }} :</span> {{ product.field_product_categories|render|strip_tags('<a>')|raw }}</div>
		<div class="clearfix"></div>
		<br/><br/>
		<ul class="sp-sc-icons">
			<li><a class="twitter" href="https://twitter.com/home?status={{ url('<current>') }}"><i class="fa fa-twitter"></i></a></li>
			<li><a href="https://www.facebook.com/sharer/sharer.php?u={{ url('<current>') }}"><i class="fa fa-facebook"></i></a></li>
			<li><a class="active" href="https://plus.google.com/share?url={{ url('<current>') }}"><i class="fa fa-google-plus"></i></a></li>
			<li><a href="https://www.linkedin.com/shareArticle?mini=true&url={{ url('<current>') }}&title={{ product.title['#object'].title.value }}&summary={{ product.body|render|strip_tags|trim_text(100) }}&source="><i class="fa fa-linkedin"></i></a></li>
		</ul>
	</div>
	<!--end right-->
{% else %}
	<div class="col-md-12 col-sm-12 col-xs-12 margin-bottom-1">
		<div class="product_preview_left">
			<div class="row gallery">
				<div class="full col-md-7">
					<!-- first image is viewable to start -->
					<img src="{{ file_url(product.variation_field_images['#items'].entity.fileuri) }}" alt="{{ product.variation_field_images['#items'].alt }}" />
				</div>
				<div class="previews col-md-2">
				{% for img in product.variation_field_images['#items'] %}
					<a class="{{ loop.first ? 'selected' }}" data-full="{{ file_url(img.entity.fileuri) }}"><img src="{{ img.entity.fileuri|image_style_url('image_150x150') }}" alt="{{ img.alt }}" /></a>
				{% endfor %}
				</div>
			</div>
		</div>
	</div>
	<div class="col-md-11 col-sm-12 col-xs-12 product-des">
		<h4 class="uppercase">{{ product.title['#object'].title.value }}</h4>
		<div class="divider-line solid light"></div>
		<br/>
		<div class="col-md-5">
		<h2 class="text-gyellow font-weight-4">{{ product.variation_price.0['#markup'] }}</h2></div>
		<div class="col-md-7">
			<div class="stars votingapi-widgets fivestar">
				{{ product.field_vote_product }}
			</div>
		</div>
		<div class="clearfix"></div>
		{{ product.body }}
		<div class="clearfix"></div>
		<br/>
		{{ product.variations }}
		<div class="clearfix"></div>
		<br/>
		<br/>
		<div class="divider-line solid light"></div>
		<br/>
		<div class="pro-details"><span>{{ 'Product SKU'|t }} :</span> {{ product.variation_sku['#object'].sku.value }}</div>
		<div class="pro-details"><span>{{ 'Category'|t }} :</span> {{ product.field_product_categories|render|strip_tags('<a>')|raw }}</div>
		<div class="clearfix"></div>
		<br/><br/>
		<ul class="sp-sc-icons">
			<li><a class="twitter" href="https://twitter.com/home?status={{ url('<current>') }}"><i class="fa fa-twitter"></i></a></li>
			<li><a href="https://www.facebook.com/sharer/sharer.php?u={{ url('<current>') }}"><i class="fa fa-facebook"></i></a></li>
			<li><a class="active" href="https://plus.google.com/share?url={{ url('<current>') }}"><i class="fa fa-google-plus"></i></a></li>
			<li><a href="https://www.linkedin.com/shareArticle?mini=true&url={{ url('<current>') }}&title={{ product.title['#object'].title.value }}&summary={{ product.body|render|strip_tags|trim_text(100) }}&source="><i class="fa fa-linkedin"></i></a></li>
		</ul>
	</div>
	<!--end right-->
{% endif %}