{namespace magento=Nesolu\SutterbeggDistribution\ViewHelpers}
{namespace blogvh=T3G\AgencyPack\Blog\ViewHelpers}

<f:layout name="Blogpost" />

<div class="page">
	<div class="topnav">
		<f:render partial="TopNav" section="TopNav" />
	</div>

	<header id="header">
		<f:render partial="Navigation" section="Navigation" />
    </header>

    <main id="main">
		<div class="head">
			<f:render section="head" />
		</div>
		<div class="content {f:if(condition:'{nofooterpad}', then: 'nopadd')}">
			<f:if condition="{hidebc}">
				<f:else>
					<f:render partial="Breadcrump" />
				</f:else>
			</f:if>

			<div class="blogpost">
				<a href="#" class="filterlist"><i class="fa fa-lg fa-sliders" aria-hidden="true"></i> Filter</a>
				<div class="content">
					<div class="meta">
						<div class="cat">
							<blogvh:link.PostTag postId="{page.uid}" class="category" />
							<span class="date">
								<f:if condition="{page.publish_date}">
									<f:then>{f:format.date(format: '%d. %B %Y', date: page.publish_date)}</f:then>
									<f:else>{f:format.date(format: '%d. %B %Y', date: page.crdate)}</f:else>
								</f:if>
							</span>
						</div>
						<f:if condition="{page.read_time}">
							<div class="readtime"><blogvh:readTime seconds="{page.read_time}" /></div>
						</f:if>
					</div>

					<h1>{page.title}</h1>
					
					<f:render section="content" />

					<div class="share-buttons">
						<div class="content">
							<p class="text"><span class="arrow"></span>Jetzt weiterempfehlen</p>
							<div class="list">
								<div class="item">
									<div class="link" href="#" data-type="facebook">
										<span class="fa-stack fa-lg">
											<i class="fa fa-circle fa-stack-2x"></i>
											<i class="fa fa-facebook fa-stack-1x"></i>
										</span>
									</div>
								</div>
								<div class="item">
									<div class="link" href="#" data-type="twitter">
										<span class="fa-stack fa-lg">
											<i class="fa fa-circle fa-stack-2x"></i>
											<i class="fa fa-twitter fa-stack-1x"></i>
										</span>
									</div>
								</div>
								<div class="item wadesktop">
									<div class="link" href="#" data-type="whatsapp-desktop">
										<span class="fa-stack fa-lg">
											<i class="fa fa-circle fa-stack-2x"></i>
											<i class="fa fa-whatsapp fa-stack-1x"></i>
										</span>
									</div>
								</div>
								<div class="item wamobile">
									<div class="link" href="#" data-type="whatsapp-mobile">
										<span class="fa-stack fa-lg">
											<i class="fa fa-circle fa-stack-2x"></i>
											<i class="fa fa-whatsapp fa-stack-1x"></i>
										</span>
									</div>
								</div>
								<div class="item">
									<div class="link" href="#" data-type="email">
										<span class="fa-stack fa-lg">
											<i class="fa fa-circle fa-stack-2x"></i>
											<i class="fa fa-envelope-o fa-stack-1x"></i>
										</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="sidenav">
					<blogvh:Sidebar />
				</div>
			</div>
		</div>
	</main>
	<footer id="footer">
		<f:render partial="Footer" section="Footer" />
	</footer>
	<v:asset.script name="blogpost" movable="1">
		new Sutterbegg.Frontend.Elements.ShareButtons($('.share-buttons'));
		new Sutterbegg.Frontend.Layout.MobileBlogNav($('.blogpost'));
	</v:asset.script>
</div>