{namespace n=GeorgRinger\News\ViewHelpers}

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

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

<f:section name="content">
	<f:if condition="{newsItem}">
		<f:if condition="{newsItem.categories}">
			<f:variable name="categoryGood" value="0" />
			<f:for each="{newsItem.categories}" as="category">
				<f:if condition="{categoryGood} == 0 && {category.uid} != {f:cObject(typoscriptObjectPath: 'lib.systemDisplayCats')} && {category.parentcategory.uid} != {f:cObject(typoscriptObjectPath: 'lib.systemDisplayCats')}">
					<f:variable name="color">{f:cObject(typoscriptObjectPath:'lib.getColorByCat', data:'{category.uid}')}</f:variable>
					<f:variable name="categoryGood" value="1" />
				</f:if>
			</f:for>
		</f:if>
		<div class="{color}">
			<n:format.nothing>
				<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>
				<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="!{newsItem.eventEnd} || {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,format:'%e %B %Y')}</span>
					</f:if>
					<f:if condition="{newsItem.eventEnd} && {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,format:'%e %B %Y')} au {f:format.date(date:newsItem.eventEnd,format:'%e %B %Y')}</span>
									</f:then>
									<f:else>
										<span class="event-date">Du {f:format.date(date:newsItem.eventStart,format:'%e %B')} au {f:format.date(date:newsItem.eventEnd,format:'%e %B %Y')}</span>
									</f:else>
								</f:if>
							</f:then>
							<f:else>
								<span class="event-date">Du {f:format.date(date:newsItem.eventStart,format:'%e')} au {f:format.date(date:newsItem.eventEnd,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-8">
						<div class="news-category-container">
							<f:if condition="{newsItem.categories}">
								<div class="category-parent-container">
									<f:if condition="{newsItem.isEvent}">
										<f:then>
											<p><i class="event-picto icon-agenda"></i></p>
										</f:then>
										<f:else>
											<f:for each="{newsItem.categories}" as="category" iteration="indice">
												<f:if condition="{indice.index} == 0">
													<f:then>
														<f:if condition="{settings.newsCatRoot} == {newsItem.categories.0.parentcategory.uid}">
															<f:then>
																<p><i class="{category.seoTitle} {category.seoDescription}"></i></p>
															</f:then>
															<f:else>
																<p><i class="{newsItem.categories.0.parentcategory.seoTitle} {category.parentcategory.seoDescription}"></i></p>
															</f:else>
														</f:if>
													</f:then>
												</f:if>
											</f:for>
										</f:else>
									</f:if>
								</div>
								<div class="category-list-container">
									<f:for each="{newsItem.categories}" as="category">	
									<f:if condition="{category.parentcategory.uid} != <f:cObject typoscriptObjectPath='sysDisplayUID' />">						
										<f:if condition="{settings.newsCatRoot} == {newsItem.categories.0.parentcategory.uid}">
											<f:then>
												<span class="{f:cObject(typoscriptObjectPath:'lib.getColorByCat', data:'{category.parentcategory.uid}')}">{category.title}</span>
											</f:then>
											<f:else>
												<span class="{category.parentcategory.seoTitle} {f:cObject(typoscriptObjectPath:'lib.getColorByCat', data:'{category.parentcategory.uid}')}">{category.title}</span>
											</f:else>
										</f:if>
									</f:if>
									</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 txt-r">
						<f:if condition="{newsItem.author}">
							<f:then>
								<div class="anonyme-auteur">
									<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,format:'%e %B %Y')}
									</span>
									</div>
								</div>
							</f:then>
							<f:else>
								<div class="user-info-container">
									<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,format:'%e %B %Y')}
												</span>
											</div>
										</f:then>
										<f:else>
											<span class="news-info-date">
												Publié le {f:format.date(date:newsItem.datetime,format:'%e %B %Y')}
											</span>
										</f:else>
									</f:if>
								</div>
							</f:else>
						</f:if>

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