<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
	  xmlns:n="http://typo3.org/ns/GeorgRinger/News/ViewHelpers"
	  xmlns:rx="http://typo3.org/ns/Reelworx/RxShariff/ViewHelper"
	  data-namespace-typo3-fluid="true">

<f:layout name="Detail" />

<!--
	=====================
		News/Detail.html
-->

<f:section name="content">
	<f:if condition="{newsItem}">
		<f:then>
			<n:format.nothing>
				<n:excludeDisplayedNews newsItem="{newsItem}" />
				<f:if condition="{settings.detail.showMetaTags}">
					<f:render partial="Detail/Opengraph" arguments="{newsItem: newsItem, settings:settings}" />
				</f:if>
                <f:if condition="{newsItem.alternativeTitle}">
                    <f:then>
                        <n:titleTag>
                            <f:format.htmlentitiesDecode>{newsItem.alternativeTitle}</f:format.htmlentitiesDecode>
                        </n:titleTag>
                    </f:then>
                    <f:else>
                        <n:titleTag>
                            <f:format.htmlentitiesDecode>{newsItem.title}</f:format.htmlentitiesDecode>
                        </n:titleTag>
                    </f:else>
                </f:if>
			</n:format.nothing>
			<f:if condition="{settings.detail.showPrevNext}">
				<n:simplePrevNext pidList="{newsItem.pid}" news="{newsItem}" as="paginated" sortField="datetime">
					<f:if condition="{paginated}">
						<ul class="pager">
							<f:if condition="{paginated.prev}">
								<li class="previous">
									<n:link newsItem="{paginated.prev}" settings="{settings}">
										<span aria-hidden="true">&larr; </span>{paginated.prev.title}
									</n:link>
								</li>
							</f:if>
							<f:if condition="{paginated.next}">
								<li class="next">
									<n:link newsItem="{paginated.next}" settings="{settings}" class="next">
										{paginated.next.title} <span aria-hidden="true"> &rarr;</span>
									</n:link>
								</li>
							</f:if>
						</ul>
					</f:if>
				</n:simplePrevNext>
			</f:if>
			<div class="header">
				<h1 itemprop="headline">{newsItem.title}</h1>
			</div>
			<div class="footer">
				<p>
					<!-- date -->
					<span class="news-list-date fw-bold">
						<time itemprop="datePublished" datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}">
							<f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date>
						</time>
					</span>

					<f:if condition="{newsItem.categories}">
						<f:render partial="Category/Items" arguments="{categories:newsItem.categories, settings:settings}" />
					</f:if>

					<f:if condition="{newsItem.tags}">
						<!-- Tags -->
						<span class="news-list-tags" itemprop="keywords">
						<f:for each="{newsItem.tags}" as="tag">
							{tag.title}
						</f:for>
						</span>
					</f:if>

					<f:if condition="{newsItem.author}">
						<!-- author -->
						<span class="news-list-author" itemprop="author" itemscope="itemscope" itemtype="http://schema.org/Person">
							<f:translate key="author_simple" /> <span itemprop="name">{newsItem.author}</span>
						</span>
					</f:if>
				</p>
			</div>
			<n:renderMedia news="{newsItem}" imgClass="img-responsive" videoClass="video-wrapper" audioClass="audio-wrapper">
				<f:if condition="{newsItem.teaser}">
					<!-- teaser -->
					<div class="teaser-text" itemprop="description">
						<f:format.html>{newsItem.teaser}</f:format.html>
					</div>
				</f:if>

				<f:if condition="{newsItem.contentElements}">
					<!-- content elements -->
					<f:cObject typoscriptObjectPath="lib.tx_news.contentElementRendering">{newsItem.contentElementIdList}</f:cObject>
				</f:if>

				<f:render partial="Detail/MediaContainer" arguments="{media: newsItem.mediaNonPreviews, settings:settings}" />

				<!-- main text -->
				<div class="news-text-wrap" itemprop="articleBody">
					<f:format.html>{newsItem.bodytext}</f:format.html>
				</div>
			</n:renderMedia>

			<f:if condition="{settings.backPid}">
				<!-- Link Back -->
				<div class="news-backlink-wrap">
					<f:link.page pageUid="{settings.backPid}" class="btn btn-outline-primary">
						<f:translate key="back-link" />
					</f:link.page>
				</div>
			</f:if>

			<f:if condition="{settings.detail.showSocialShareButtons}">
				<f:comment>
					Care about the privacy of your readers?
					Checkout https://typo3.org/extensions/repository/view/rx_shariff
					and it will be used automatically!
				</f:comment>
				<n:extensionLoaded extensionKey="rx_shariff">
					<f:render partial="Detail/Shariff" />
				</n:extensionLoaded>
			</f:if>

			<!-- related things -->
			<div class="news-related-wrap">
				<f:comment>
					Various options exist to fetch different related information:
					- {newsItem.allRelatedSorted}: all related news, related und related from, sorted by date
					- {newsItem.related}: all related
					- {newsItem.relatedSorted}: all related, sorted by date
					- {newsItem.relatedFrom}: all related from
					- {newsItem.relatedFromSortedByForeign}: all related from sorted by foreign sorting
					- {newsItem.relatedFromSorted}: all related from, sorted by date
				</f:comment>

				<f:if condition="{newsItem.allRelatedSorted}">
					<!-- Related news records -->
					<div class="news-related news-related-news">
						<h4>
							<f:translate key="related-news" />
						</h4>
						<ul>
							<f:for each="{newsItem.allRelatedSorted}" as="related">
								<li>
									<span class="news-related-news-date"><f:format.date format="{f:translate(key:'dateFormat')}">{related.datetime}</f:format.date></span>
									<n:link newsItem="{related}" settings="{settings}" title="{related.title}">
										{related.title}
									</n:link>
								</li>

							</f:for>
						</ul>
					</div>
				</f:if>

				<f:if condition="{newsItem.relatedFiles}">
					<!-- related files -->
					<div class="news-related news-related-files">
						<h4>
							<f:translate key="related-files" />
						</h4>
						<ul>
							<f:for each="{newsItem.relatedFiles}" as="relatedFile">
								<li>
									<span class="news-related-files-link">
										<a href="{relatedFile.originalResource.publicUrl -> f:format.htmlspecialchars()}" target="_blank">
											{f:if(condition:relatedFile.originalResource.title, then:relatedFile.originalResource.title, else:relatedFile.originalResource.name)}
										</a>
									</span>
									<span class="news-related-files-size">
										{relatedFile.originalResource.size -> f:format.bytes()}
									</span>
								</li>
							</f:for>
						</ul>
					</div>
				</f:if>

				<f:if condition="{newsItem.relatedLinks}">
					<!-- Related links -->
					<div class="news-related news-related-links">
						<h4>
							<f:translate key="related-links" />
						</h4>
						<ul>
							<f:for each="{newsItem.relatedLinks}" as="relatedLink">
								<li>
									<f:link.typolink parameter="{relatedLink.uri}" title="{relatedLink.title}" target="{n:targetLink(link:relatedLink.uri)}">{f:if(condition: relatedLink.title, then: relatedLink.title, else: relatedLink.uri)}</f:link.typolink>
									<f:if condition="{relatedLink.description}"><span>{relatedLink.description}</span></f:if>
								</li>
							</f:for>
						</ul>
					</div>
				</f:if>
			</div>
		</f:then>
		<f:else>

		</f:else>
	</f:if>
</f:section>
</html>
