{namespace sg=SGalinski\SgNews\ViewHelpers}

<f:comment>
	<!--
	Usage Example:

	<f:render partial="Teaser" arguments="{
		newsMetaData: newsMetaData,
		headerTag: '<h3>',
		closingHeaderTag: '</h3>',
		showCategory: 1
	}" />

	newsMetaData -> news element
	headerTag -> hierarchy type of the header tag
	showCategory -> defines if the category may be shown

	Use <f:debug>{_all}</f:debug> to see all parameters and fields.
	-->
</f:comment>

<f:alias map="{singleViewUri: '{f:uri.page(pageUid: \'{newsMetaData.news.uid}\')}'}">
	<a href="{singleViewUri}">
		<div class="tx-sgnews-single-header {f:if(condition: newsMetaData.imageObject, then: 'tx-sgnews-single-header-image')}">
			<f:if condition="{newsMetaData.imageObject}">
				<div class="tx-sgnews-single-image">
					<picture>
						<source media="(max-width: 1200px)"
								srcset="{f:uri.image(src: newsMetaData.imageObject.uid, treatIdAsReference: '1', width: '1200c', height: '403c', cropVariant: 'small')}">
						<f:image image="{newsMetaData.imageObject}" alt="" width="1845c"
								 height="619c" cropVariant="large"/>
					</picture>
				</div>
			</f:if>
			<div class="tx-sgnews-single-header-content">
				<div class="tx-sgnews-teaser-title">
					<h1>{newsMetaData.news.subtitleWithFallbackToTitle}</h1>
				</div>
				<div class="tx-sgnews-teaser">
					<div class="tx-sgnews-teaser-inner">
						<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>

							<f:if condition="{newsMetaData.news.location}">
								<span class="location">
									{newsMetaData.news.location}
								</span>
							</f:if>

							<span class="date">
								<f:format.date format="{f:translate(key:'frontend.dateformat')}">{newsMetaData.news.lastUpdated}</f:format.date>
							</span>

							<span class="category">
								{newsMetaData.category.subtitleWithFallbackToTitle}
							</span>
							<f:if condition="{newsMetaData.news.tags}">
								<br />
								<span class="tags">
										<f:for each="{newsMetaData.news.tags}" as="tag" iteration="it">
											{tag.title}<f:if condition="{it.isLast}"><f:else>, </f:else></f:if>
										</f:for>
									</span>
							</f:if>
						</div>
					</div>
				</div>
			</div>
		</div>
	</a>
</f:alias>