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


<!--TYPO3SEARCH_end-->
<f:variable name="newsCount" value="{news -> f:count()}"/>

<div class="card-deck" data-items="{newsCount}">
    <f:for each="{news}" as="newsItem" iteration="iterator">
        <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}" class="card card-newsteaser card-horizontal">
            <f:if condition="{newsItem.mediaPreviews}">
                <f:then>
                    <div class="card-img">
                        <sms:media file="{newsItem.mediaPreviews.0}" class="img-cover" cropVariant="teaser" srcset="1x, 2x" placeholderSize="100" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.width)}" height="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else:'')}"/>
                    </div>
                </f:then>
                <f:else>
                    <f:if condition="{settings.displayDummyIfNoMedia}">
                        <div class="card-img">
                            <f:image class="img-dummy" src="{settings.list.media.dummyImage}" title="" alt="" maxWidth="{settings.list.media.image.maxWidth}" maxHeight="{settings.list.media.image.maxHeight}"/>
                        </div>
                    </f:if>
                </f:else>
            </f:if>

            <div class="card-body" itemscope="itemscope" itemtype="http://schema.org/Article">
                <div class="card-title" itemprop="headline">{newsItem.title}</div>
                <n:removeMediaTags>
                    <f:if condition="{newsItem.teaser}">
                        <f:then>
                            <div class="card-text" itemprop="description">
                                {newsItem.teaser -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()}
                            </div>
                        </f:then>
                    </f:if>
                </n:removeMediaTags>
            </div>
        </n:link>
    </f:for>
</div>
<f:if condition="{settings.listPid}">
    <!-- Link Back -->
    <div class="text-right">
        <f:link.page class="btn btn-outline-primary" pageUid="{settings.listPid}">Weitere Nachrichten lesen → </f:link.page>
    </div>
</f:if>

<!--TYPO3SEARCH_begin-->
</html>
