<f:layout name="Default" />

{namespace sg=SGalinski\SgNews\ViewHelpers}
{namespace rx=Reelworx\RxShariff\ViewHelper}

<f:section name="main">
	<div class="tx-sgnews-single">
		<div class="tx-sgnews-teaser">
			<f:if condition="{newsMetaData.imageObject}">
				<div class="tx-sgnews-single-image">
					<f:image image="{newsMetaData.imageObject}" alt="" />
				</div>
			</f:if>

			<div class="tx-sgnews-teaser-inner">
				<div class="tx-sgnews-teaser-title">
					<h1>{newsMetaData.news.subtitleWithFallbackToTitle}</h1>
				</div>

				<div class="tx-sgnews-teaser-meta">
					<span class="author">
						<f:if condition="{newsMetaData.news.authorFrontendUser}">
							<f:then>
								<f:if condition="{newsMetaData.news.authorFrontendUser.www}">
									<f:then>
										<f:link.page pageUid="{newsMetaData.news.authorFrontendUser.www}">
											{newsMetaData.news.authorFrontendUser.name}
										</f:link.page>
									</f:then>
									<f:else>
										{newsMetaData.news.authorFrontendUser.name}
									</f:else>
								</f:if>
							</f:then>
							<f:else>
								{newsMetaData.news.author}
							</f:else>
						</f:if>
					</span>

					<span class="date">
						<f:format.date format="%d. %B %Y">{newsMetaData.news.lastUpdated}</f:format.date>
					</span>

					<span class="category">
						{newsMetaData.category.subtitleWithFallbackToTitle}
					</span>
				</div>
			</div>
		</div>

		<div class="tx-sgnews-single-container">
			<f:if condition="{newsMetaData.news.relatedNews}">
				<div class="tx-sgnews-single-relatedNews">
					<h2>
						<f:translate key="frontend.singleview.relatedArticles" />
					</h2>

					<ul>
						<f:for each="{newsMetaData.news.relatedNews}" as="relatedNewsEntry">
							<li>
								<a href="{f:uri.page(pageUid: '{relatedNewsEntry.uid}')}">
									{relatedNewsEntry.subtitleWithFallbackToTitle}
								</a>
							</li>
						</f:for>
					</ul>
				</div>
			</f:if>

			<f:alias map="{content: '{f:cObject(typoscriptObjectPath: \'lib.mainContent\')}'}">
				<div class="tx-sgnews-single-content">
					<p>
						<a href="#comments">{f:cObject(typoscriptObjectPath: "lib.pwCommentsGetCountWithLabel")}</a>
						<span>//</span>
						<f:translate key="frontend.singleview.readingTime" />
						<strong>
							<sg:getReadingTime content="{content}" />
						</strong>
					</p>

					{content -> f:format.raw()}
				</div>
			</f:alias>

			<rx:shariff services="facebook,twitter,googleplus,whatsapp" enableBackend="true" />
		</div>
	</div>

	<div class="tx-sgnews-single-footer">
		<sg:extendedIf condition="{previousNews}" or="{nextNews}">
			<div class="tx-sgnews-single-footer-browser">
				<f:if condition="{previousNews}">
					<a href="{f:uri.page(pageUid: '{previousNews.uid}')}" class="tx-sgnews-footer-browser-previous">
						<f:translate key="frontend.singleview.previousArticle" />
					</a>
				</f:if>

				<f:if condition="{nextNews}">
					<a href="{f:uri.page(pageUid: '{nextNews.uid}')}" class="tx-sgnews-footer-browser-next">
						<f:translate key="frontend.singleview.nextArticle" />
					</a>
				</f:if>
			</div>
		</sg:extendedIf>
	</div>

	<div class="tx-sgnews-single-comments">
		<div class="tx-sgnews-comments-inner">
			<f:cObject typoscriptObjectPath="lib.pwCommentsIndex" />
			<hr>
			<div class="tx-sgnews-single-comment-form">
				<f:flashMessages renderMode="div" />
				<f:cObject typoscriptObjectPath="lib.pwCommentsNew" />
			</div>

		</div>
	</div>
</f:section>