<{capture name="title"}><{$blog_post->getTitle()}><{/capture}>

<{assign var="images" value=$blog_post->getImages()}>

<article class="post single">

	<figure class="post-img">
		<{if $images}>
			<{section name="i" loop=$images max=1}>
				<a href="<{$images[i]->getSrc(1000, 1000, 'fit')}>" class="mfp-image">
					<img src="<{$images[i]->getSrc(1200, 300, 'box')}>" alt="" <{$images[i]->getHtmlSize(1200, 300, 'box')}>/>
					<div class="hover-icon"></div>
				</a>
			<{/section}>
		<{else}>
			<a href="images/blog-01-big.jpg" class="mfp-image" title="First Image Title">
				<img src="images/blog-01.jpg" alt=""/>
				<div class="hover-icon"></div>
			</a>
		<{/if}>
	</figure>

	<section class="date">
		<span class="day"><{$blog_post->getCreated()|date_format:"%d"}></span>
		<span class="month"><{$blog_post->getCreated()|date_format:"%b"}></span>
	</section>

	<section class="post-content">

		<header class="meta">
			<h2><a href="<{$webshop->getUrl()|escape}>/<{$blog_post->getUrl()|escape}>"><{$blog_post->getTitle()|escape}></a></h2>
			<span><i class="fa fa-user"></i>Af <{$blog_post->getUserName()|escape}></span>
			<span><i class="fa fa-calendar"></i><{$blog_post->getCreated()|date_format:"%d-%m-%Y %H:%M"}></span>

			<{if $categories = $blog_post->getCategories()}>
				<{foreach $categories as $category}>
					<span><i class="fa fa-bookmark"></i><a href="<{$category->getBlogPostUrl()|escape}>"><{$category->getName()|escape}></a></span>
				<{/foreach}>
			<{/if}>

		</header>

		<{$blog_post->getBody()}>

	</section>

</article>

<{if $images|@count > 1}>
	<div class="clearfix"></div>
	<div id="portfolio-wrapper">
		<{section name="i" loop=$images start=1}>

			<div class="row justify-content-center">

				<div class="col-10 col-md-3 portfolio-item">
					<figure>
						<div class="portfolio-holder">
							<a href="<{$images[i]->getSrc(1000, 1000, 'fit')}>" class="mfp-image">
								<img src="<{$images[i]->getSrc(210, 210, 'box')}>" alt="" <{$images[i]->getHtmlSize(210, 210, 'box')}>/>
								<div class="hover-cover"></div>
								<div class="hover-icon"></div>
							</a>
						</div>
					</figure>
				</div>
			</div>

		<{/section}>
	</div>
<{/if}>

<{include file="carousel.html" title="Relevante produkter" products=$blog_post->getProducts()}>