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

<f:layout name="Detail"/>

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

<f:section name="content">
    <f:if condition="{newsItem}">
        <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="{newsItem.mediaNonPreviews}">
            <f:then>
                <f:render section="headline" arguments="{_all}"/>
                <div class="row">
                    <div class="col-12">
                        <f:render section="inner-content" arguments="{_all}"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <f:comment>
                            <f:for each="{newsItem.mediaNonPreviews}" as="mediaElement">
                                <div class="thumbnail">
                                    <f:media file="{mediaElement}" class="img-fluid"/>
                                    <f:if condition="{mediaElement.description}">
                                        <div class="caption">
                                            {mediaElement.description}
                                        </div>
                                    </f:if>
                                </div>
                            </f:for>
                        </f:comment>
                        <div class="row news-media">
                            <f:render section="news-media" arguments="{_all}"/>
                        </div>
                    </div>
                </div>
            </f:then>
            <f:else>
                <f:render section="headline" arguments="{_all}"/>
                <f:render section="inner-content" arguments="{_all}"/>
            </f:else>
        </f:if>

        <f:if condition="{settings.detail.showPrevNext}">
            <f:render section="pager" arguments="{_all}"/>
        </f:if>
        <f:if condition="{settings.backPid}">
            <f:render section="backlink" arguments="{_all}"/>
        </f:if>

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

<f:section name="headline">
    <h1 itemprop="headline" class="text-center">{newsItem.title}</h1>
    <div class="text-center"><f:render partial="General/AdditionalInformation" arguments="{settings:settings,newsItem:newsItem}"/></div>
    <hr class="py-3 my-3"/>
</f:section>

<f:section name="inner-content">
    <n:renderMedia news="{newsItem}" imgClass="img-fluid" videoClass="video-wrapper" audioClass="audio-wrapper">
        <f:if condition="{newsItem.teaser}">
            <!-- teaser -->
            <div class="lead" 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>
    </n:renderMedia>



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


    <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.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>
</f:section>


<f:section name="news-media">
    <f:variable name="imgCount" value="{newsItem.mediaNonPreviews -> f:count()}"/>
    <f:variable name="imgCount" value="{imgCount - 1}"/>

    <f:variable name="modulo">{imgCount % 2}</f:variable>


    {f:variable(name: 'imgWidth', value: '1250')}
    {f:variable(name: 'colClass', value: 'col-12')}

    <f:if condition="{imgCount} > 0">
        <f:if condition="{modulo} == 0">
            <f:then>
                {f:variable(name: 'imgWidth', value: '396')}
                {f:variable(name: 'colClass', value: 'col-6 col-md-4')}
            </f:then>
            <f:else>
                {f:variable(name: 'imgWidth', value: '610')}
                {f:variable(name: 'colClass', value: 'col-6 col-md-6')}
            </f:else>
        </f:if>
    </f:if>
    <f:comment>
        <pre style="width: 100%">imgCount: {imgCount}; modulo: {modulo}; imgWidth: {imgWidth}</pre>
    </f:comment>
    <f:for each="{newsItem.mediaNonPreviews}" as="mediaElement" iteration="iterator">
        <f:if condition="{iterator.index} >= 0">
            <div class="{colClass}">
                <f:link.external uri="https://muehlherr.de{f:uri.image(image: mediaElement)}" target="_blank">
                <figure class="thumbnail">
                    <f:image image="{mediaElement}" class="img-fluid" width="{imgWidth}" cropVariant="default"/>

                    <f:if condition="{mediaElement.description}">
                        <figcaption class="caption">
                            {mediaElement.description}
                        </figcaption>
                    </f:if>
                </figure>
                </f:link.external>
            </div>
        </f:if>
    </f:for>
</f:section>

<f:section name="pager">
    <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:section>

<f:section name="backlink">
    <!-- Link Back -->
    <f:link.page class="btn btn-default" pageUid="{settings.backPid}">
        <f:translate key="back-link"/>
    </f:link.page>
</f:section>

</html>
