{namespace n=GeorgRinger\News\ViewHelpers}

<f:layout name="Detail.html" />

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

<f:section name="content">
	<f:if condition="{newsItem}">
		<f:then>
			<n:format.nothing>
				<f:if condition="{newsItem.alternativeTitle}">
					<f:then>
						<n:titleTag>
							<n:format.htmlentitiesDecode>{newsItem.alternativeTitle}</n:format.htmlentitiesDecode>
						</n:titleTag>
					</f:then>
					<f:else>
						<n:titleTag>
							<n:format.htmlentitiesDecode>{newsItem.title}</n:format.htmlentitiesDecode>
						</n:titleTag>
					</f:else>
				</f:if>
				<f:render partial="Detail/Opengraph" arguments="{newsItem: newsItem, settings:settings}" />
			</n:format.nothing>

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

			<div class="header">
				<h1 itemprop="headline">{newsItem.title}</h1>
			</div>

			<f:if condition="{newsItem.isEvent}">
				<div class="event-info">
					<f:if condition="{f:format.date(date:newsItem.eventEnd, format: 'Ymd')} == {f:format.date(date:newsItem.eventStart, format: 'Ymd')}">
						<span class="event-date">Le {f:format.date(date:newsItem.eventStart.date,format:'%e %B %Y')}</span>
					</f:if>
					<f:if condition="{f:format.date(date:newsItem.eventEnd, format: 'Ymd')} != {f:format.date(date:newsItem.eventStart, format: 'Ymd')}">
						<f:if condition="{f:format.date(date:newsItem.eventEnd, format: 'Ym')} != {f:format.date(date:newsItem.eventStart, format: 'Ym')}">
							<f:then>
								<f:if condition="{f:format.date(date:newsItem.eventEnd, format: 'Y')} != {f:format.date(date:newsItem.eventStart, format: 'Y')}">
									<f:then>
										<span class="event-date">Du {f:format.date(date:newsItem.eventStart.date,format:'%e %B %Y')} au {f:format.date(date:newsItem.eventEnd.date,format:'%e %B %Y')}</span>
									</f:then>
									<f:else>
										<span class="event-date">Du {f:format.date(date:newsItem.eventStart.date,format:'%e %B')} au {f:format.date(date:newsItem.eventEnd.date,format:'%e %B %Y')}</span>
									</f:else>
								</f:if>
							</f:then>
							<f:else>
								<span class="event-date">Du {f:format.date(date:newsItem.eventStart.date,format:'%e')} au {f:format.date(date:newsItem.eventEnd.date,format:'%e %B %Y')}</span>
							</f:else>
						</f:if>
					</f:if>
					<f:if condition="{newsItem.locationSimple}">
						<span class="event-place">{newsItem.locationSimple}</span>
					</f:if>
				</div>
			</f:if>

			<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>

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

			<f:if condition="{newsItem.falRelatedFiles}">
					<!-- FAL related files -->
					<div class="files">
						<f:for each="{newsItem.falRelatedFiles}" as="relatedFile">
							<div class="file-line">
								<i class="ti-file"></i>
								<a href="{relatedFile.originalResource.publicUrl -> f:format.htmlspecialchars()}" target="_blank" title="Visualiser le fichier">
									{relatedFile.originalResource.name}
								</a>
								<p class="tailleFichier">
									{relatedFile.originalResource.size -> f:format.bytes()}
								</p>
							</div>
						</f:for>
					</div>
				</f:if>

			<div class="footer">
				<div class="row">
					<div class="col-md-4">
						<div class="news-category-container">
							<f:if condition="{newsItem.categories}">
								<div class="category-parent-container">
									<f:if condition="{newsItem.isEvent}">
										<f:then>
											<i class="event-picto icon-if-calendar"></i>
										</f:then>
										<f:else>
											<i class="news-picto icon-if cat-{newsItem.categories.0.parentcategory.uid}"></i>
										</f:else>
									</f:if>
								</div>
								<div class="category-list-container">
									<f:for each="{newsItem.categories}" as="category">
										<span class="category-{category.parentcategory.uid}">{category.title}</span>
									</f:for>
									<f:if condition="{newsItem.keywords}">
										<span class="keywords">{newsItem.keywords}</span>
									</f:if>
								</div>
							</f:if>
						</div>
					</div>

					<div class="col-md-4"></div>

					<div class="col-md-4 txt-r">
						<div class="user-info-container">
							<f:if condition="{newsItem.author}">
								<f:then>
									<div class="user-avatar-container">
										<i class="ion-person-stalker user-group"></i>
									</div>
									<div class="name-date-info">
										<span class="news-info-author">
											Publié par <span class="author-name">{newsItem.author}</span>
										</span>
										<span class="news-info-date">
											le {f:format.date(date:newsItem.datetime.date,format:'%e %B %Y')}
										</span>
									</div>
								</f:then>
								<f:else>
									<f:if condition="{newsItem.user}">
										<f:then>
											<div class="user-avatar-container">
												<f:cObject typoscriptObjectPath="lib.userAvatar" data="{newsItem.user}" />
											</div>
											<div class="name-date-info">
												<span class="news-info-author">
													Publié par <f:cObject typoscriptObjectPath="lib.userName" data="{newsItem.user}" />
												</span>
												<span class="news-info-date">
													le {f:format.date(date:newsItem.datetime.date,format:'%e %B %Y')}
												</span>
											</div>
										</f:then>
										<f:else>
											<span class="news-info-date">
												Publié le {f:format.date(date:newsItem.datetime.date,format:'%e %B %Y')}
											</span>
										</f:else>
									</f:if>
								</f:else>
							</f:if>
						</div>
					</div>
				</div>
			</div>

			<f:if condition="{settings.detail.disqusShortname}">
				<div id="disqus_thread"></div>
				<n:social.disqus newsItem="{newsItem}"
								 shortName="{settings.detail.disqusShortname}"
								 link="{n:link(newsItem:newsItem, settings:settings, uriOnly:1, configuration:'{forceAbsoluteUrl:1}')}" />
			</f:if>
		</f:then>
		<f:else>

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