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

<n:excludeDisplayedNews newsItem="{newsItem}"/>

<div class="text-bg-light p-4 mb-3">
    <f:comment>
        <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
            <f:if condition="{newsItem.mediaPreviews}">
                <f:then>
                    <f:media class="img-responsive" file="{newsItem.mediaPreviews.0}" 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:'')}"/>
                </f:then>
                <f:else>
                    <f:if condition="{settings.displayDummyIfNoMedia}">
                        <f:image class="img-dummy img-responsive" src="{settings.list.media.dummyImage}" title="" alt="" maxWidth="{settings.list.media.image.maxWidth}" maxHeight="{settings.list.media.image.maxHeight}"/>
                    </f:if>
                </f:else>
            </f:if>
        </n:link>
    </f:comment>

    <div itemprop="headline" class="fs-4 fw-bold">
        {newsItem.title}
    </div>
    <div class="fs-xs text-dark-emphasis d-flex flex-row flex-wrap gap-2">
        <f:if condition="{newsItem.eventEnd}">
            <f:then>
                <div class="text-nowrap">
                    <i class="icon-calendar-empty text-body-tertiary"></i>
                    <f:format.date date="{newsItem.datetime}" format="{f:translate(key:'dateFormat')}"/>&nbsp;&mdash;&nbsp;<f:format.date date="{newsItem.eventEnd}" format="{f:translate(key:'dateFormat')}"/>
                </div>
            </f:then>
            <f:else>
                <div class="text-nowrap">
                    <i class="icon-calendar-empty text-body-tertiary"></i>
                    <f:format.date date="{newsItem.datetime}" format="{f:translate(key:'dateFormat')}"/>
                </div>
            </f:else>
        </f:if>
        <f:if condition="{newsItem.locationSimple}">
            <div class="text-nowrap"><i class="icon-location text-body-tertiary"></i> {newsItem.locationSimple}</div>
        </f:if>
        <f:if condition="{newsItem.organizerSimple}">
            <div class="text-nowrap"><i class="icon-users text-body-tertiary"></i>{newsItem.organizerSimple}</div>
        </f:if>
    </div>


    <!-- teaser -->
    <n:removeMediaTags>
        <f:if condition="{newsItem.teaser}">
            <div itemprop="description" class="mt-2">
                {newsItem.teaser -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()}
            </div>
        </f:if>
    </n:removeMediaTags>
    <f:if condition="{newsItem.bodytext}">
        <div class="mt-2">
            <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}" class="fs-sm">
                <f:translate key="more-link"/>
            </n:link>
        </div>
    </f:if>
</div>
</html>
