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

<div class="col">
    <div class="card card-news h-100 article articletype-{newsItem.type}{f:if(condition: newsItem.istopnews, then: ' topnews')}"
         itemscope="itemscope" itemtype="http://schema.org/Article">
        <n:excludeDisplayedNews newsItem="{newsItem}"/>
        <!-- header -->
        <f:if condition="{newsItem.mediaPreviews}">
            <!-- media preview element -->
            <f:then>
                <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
                    <f:alias map="{mediaElement: newsItem.mediaPreviews.0}">
                        <f:if condition="{mediaElement.originalResource.type} != 4">
                            <sms:image cropVariant="default" srcset="384, 768"
                                       width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}c"
                                       height="200"
                                       class="card-img-top" image="{mediaElement}"
                                       title="{mediaElement.originalResource.title}"
                                       alt="{mediaElement.originalResource.alternative}"/>
                        </f:if>
                        <f:if condition="{mediaElement.originalResource.type} == 4">
                            <f:render partial="Detail/MediaVideo" arguments="{mediaElement: mediaElement}"/>
                        </f:if>

                    </f:alias>
                </n:link>
            </f:then>
            <f:else>
                <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
                    <sms:image cropVariant="default" srcset="384, 768"
                               width="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}"
                               class="card-img-top" src="{settings.list.media.dummyImage}"
                               title="{mediaElement.originalResource.title}"
                               alt="{mediaElement.originalResource.alternative}"/>
                </n:link>
            </f:else>
        </f:if>


        <!-- teaser -->
        <div class="card-body">
            <h3 class="card-title">
                <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}" class="text-decoration-none">
                    <span itemprop="headline">{newsItem.title}</span>
                </n:link>
            </h3>
            <div class="card-meta">
                <!-- date -->
                <span class="news-list-date">
						<time itemprop="datePublished"
                              datetime="{f:format.date(date:newsItem.datetime, format:'Y-m-d')}">
							<f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date>
						</time>
					</span>

                <f:if condition="{newsItem.firstCategory}">
                    <!-- first category -->
                    <span class="news-list-category">{newsItem.firstCategory.title}</span>
                </f:if>

                <f:if condition="{newsItem.tags}">
                    <!-- Tags -->
                    <span class="news-list-tags" itemprop="keywords">
							<f:for each="{newsItem.tags}" as="tag">
								{tag.title}
							</f:for>
						</span>
                </f:if>

                <!-- author -->
                <f:if condition="{newsItem.author}">
						<span class="news-list-author">
							<f:translate key="author" arguments="{0:newsItem.author}"/>
						</span>
                </f:if>
            </div>
            <n:removeMediaTags>
                <f:if condition="{newsItem.teaser}">
                    <f:then>
                        <div itemprop="description">{newsItem.teaser -> f:format.crop(maxCharacters:
                            '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.stripTags()}
                        </div>
                    </f:then>
                    <f:else>
                        <div itemprop="description">{newsItem.bodytext -> f:format.crop(maxCharacters:
                            '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.stripTags()}
                        </div>
                    </f:else>
                </f:if>
            </n:removeMediaTags>


        </div>


        <!-- footer information -->
        <div class="card-footer">
            <n:link newsItem="{newsItem}" settings="{settings}" class="more text-decoration-none" title="{newsItem.title}">
                <f:translate key="more-link"/>
            </n:link>
        </div>
    </div>
</div>
</html>
