{% extends "base.twig" %}

{% block after_header %}
	{% if post.top_image or theme_header_image %}
		<div id="main-image-container" class="relative">
			<div class="main-image-overlay" style="background-image: url('{{ theme.link }}/assets/img/alasivut-overlay.png');"></div>
			{% if post.top_image %}
			<div class="main-image" style="background-image: url('{{ post.top_image|image|resize(2560) }}');"></div>
			{% else %}
			<div class="main-image" style="background-image: url('{{ theme_header_image }}');"></div>
			{% endif %}
		</div>
	{% endif %}
{% endblock %}

{% block body %}
	<article class="post-type-{{post.post_type}}" id="post-{{post.ID}}">
		<div class="row no-margin padding-gutter double-gutter flex flex-center">
			<div class="col-xl-24 col-m-16 text-center ingres-text">
				<h1 class="article-heading">{{post.title}}</h1>
				{{ post.additional_content|wysiwyg }}						
			</div>
			<div class="col-xs-24 col-l-12">
				<section class="article-body">
					{{post.content}}
				</section>
			</div>
			<div class="col-xs-24 col-l-12">
				{% set product_media =  site.get_posts_by_post_type('attachment', -1, 'menu_order', 'ASC', 'media_category', post.product_category)%}
				<div class="owl-carousel product-carousel">
					{% for carousel_image in product_media %}
						<div class="product-background-image" style=" background-image:url('{{Image(carousel_image.id)}}');"></div>
					{% endfor %}
				</div>
			</div>
		</div>
	</article>

	{% include "parts/previous-page-link.twig" %}

{% endblock %}