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

<f:layout name="Detail"/>


<f:section name="hero">

    <div class="section section-hero bg-dark transition-after transition-type-2">
        <div class="hero hero-news hero-news--show is-normal">
            <div class="container-fluid hero-text">
                <f:render section="headline" arguments="{_all}"/>

            </div>
            <f:if condition="{newsItem.mediaNonPreviews.0}">
                <div class="hero-bg hero-bg--image">
                    <sms:media width="1920"
                               file="{newsItem.mediaNonPreviews.0}"
                               breakpoints="{
                              0: {'cropVariant': 'desktop', 'media': '(min-width: 1024px) and (orientation:landscape)', 'srcset': '1024,1280,1440,1920,2048,2560,3840,5120', 'sizes': '100vw'},
                              1: {'cropVariant': 'mobile', 'media': '(orientation:portrait)','srcset': '375,750,1125', 'sizes': '100vw'}
                            }"
                               title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}"
                    />
                </div>
            </f:if>

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


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

        </n:format.nothing>
        <div class="row news-body">
            <div class="col-md-8 offset-md-2">
                <f:render section="inner-content" arguments="{_all}"/>
            </div>
        </div>

        <f:if condition="{newsItem.mediaNonPreviews -> f:count()} > 1 }">
            <div class="row news-media">
                <f:render section="news-media" arguments="{_all}"/>
            </div>
        </f:if>

        <f:if condition="{settings.detail.showSocialShareButtons}">
            <div class="row news-sharebuttons">
                <div class="col-md-8 offset-md-2">
                    <f:render section="showSocialShareButtons" arguments="{_all}"/>
                </div>
            </div>
        </f:if>

        <f:if condition="{newsItem.allRelatedSorted}">
            <div class="row news-allRelatedSorted">
                <div class="col-md-8 offset-md-2">
                    <f:render section="allRelatedSorted" arguments="{_all}"/>
                </div>
            </div>
        </f:if>

        <f:if condition="{newsItem.relatedLinks}">
            <div class="row news-relatedLinks">
                <div class="col-md-8 offset-md-2">
                    <f:render section="relatedLinks" arguments="{_all}"/>
                </div>
            </div>
        </f:if>

        <f:if condition="{newsItem.relatedFiles}">
            <div class="row news-relatedFiles">
                <div class="col-md-8 offset-md-2">
                    <f:render section="relatedFiles" arguments="{_all}"/>
                </div>
            </div>
        </f:if>


        <f:if condition="{settings.detail.showPrevNext}">
            <n:simplePrevNext pidList="{newsItem.pid}" news="{newsItem}" as="paginated" sortField="datetime">
                <f:if condition="{paginated}">
                    <div class="row news-pager">
                        <div class="col-md-8 offset-md-2">
                            <f:if condition="{paginated.prev}">
                                <n:link newsItem="{paginated.prev}" settings="{settings}" class="btn btn-outline-primary"><span aria-hidden="true">&larr; </span>{paginated.prev.title}</n:link>&nbsp;
                            </f:if>
                            <f:if condition="{settings.backPid}">
                                <!-- Link Back -->
                                <f:link.page class="btn btn-outline-primary" pageUid="{settings.backPid}">
                                    <f:translate key="back-link"/>
                                </f:link.page>
                            </f:if>
                            <f:if condition="{paginated.next}">
                                &nbsp;<n:link newsItem="{paginated.next}" settings="{settings}" class="next btn btn-outline-primary">{paginated.next.title} <span aria-hidden="true"> &rarr;</span></n:link>
                            </f:if>
                        </div>
                    </div>
                </f:if>
            </n:simplePrevNext>
        </f:if>
    </f:if>
</f:section>


<f:section name="headline">
    <h1 itemprop="headline" class="hero-header">
        <f:if condition="{newsItem.alternativeTitle}" then="{newsItem.alternativeTitle}" else="{newsItem.title}"/>
    </h1>
    <f:comment>
        <f:render partial="General/AdditionalInformation" arguments="{settings:settings,newsItem:newsItem}"/>
    </f:comment>
</f:section>


<f:section name="inner-content">
    <n:renderMedia news="{newsItem}" imgClass="img-responsive" 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: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} > 1">
        <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} >= 1">
            <div class="{colClass}">
                <figure class="thumbnail">
                    <sms:image image="{mediaElement}" class="img-fluid" width="{imgWidth}" cropVariant="default" srcset="1x, 2x"/>

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

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


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

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

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