<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:if condition="{settings.templateLayout}">
    <f:then>

        <f:if condition="{settings.templateLayout} == 10">
            <f:then>
                <div class="news-list-item-small{f:if(condition: newsItem.istopnews, then: ' topnews')}">
                    <n:excludeDisplayedNews newsItem="{newsItem}"/>
                    <h4>
                        <n:link newsItem="{newsItem}" settings="{settings}">
                            <f:format.raw>{newsItem.title}</f:format.raw>
                        </n:link>
                    </h4>
                    <span><f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date></span>
                </div>
            </f:then>
        </f:if>
    </f:then>
<!-- normale News -->


  <f:else>
    <div class="news-list-item{f:if(condition: newsItem.istopnews, then: ' topnews')}">
      <div class="article articletype-{newsItem.type}">
        <div class="article-inner">
          <n:excludeDisplayedNews newsItem="{newsItem}" />


          <div class="news-text">
            <!-- meta information -->
            <div class="meta">
              <p>
                <!-- date -->
                <span class="news-list-date">
                <f:format.date format="{f:translate(key:'dateFormat')}">{newsItem.datetime}</f:format.date>
              </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">
                <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>
              </p>
            </div>
            <!-- header -->
            <div class="news-title">
              <h2>
              <n:link newsItem="{newsItem}" settings="{settings}">
                <f:format.raw>{newsItem.title}</f:format.raw>
              </n:link>
            </h2>
            </div>
            <!-- teas=ser text -->
            <div class="teaser-text">
                <n:removeMediaTags>
                    <f:if condition="{newsItem.teaser}">
                        <f:then>
                            <div itemprop="description">{newsItem.teaser -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()}</div>
                        </f:then>
                        <f:else>
                            <div itemprop="description">{newsItem.bodytext -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()}</div>
                        </f:else>
                    </f:if>
                </n:removeMediaTags>
              <n:link newsItem="{newsItem}" settings="{settings}" class="btn btn-more">
                <f:translate key="more-link" /> <span class="icon icon-right-open"></span>
              </n:link>
            </div>
          </div>

          <div class="news-image">
              <f:if condition="{newsItem.mediaPreviews}">
                  <!-- media preview element -->
                  <f:then>
                      <div class="news-img-wrap">
                          <n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
                              <f:alias map="{mediaElement: '{newsItem.mediaPreviews.0}'}">
                                  <f:if condition="{mediaElement.originalResource.type} == 2">
                                      <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
                                  </f:if>
                                  <f:if condition="{mediaElement.originalResource.type} == 4">
                                      <f:render partial="Detail/MediaVideo" arguments="{mediaElement: mediaElement}"/>
                                  </f:if>
                                  <f:if condition="{mediaElement.originalResource.type} == 5">
                                      <f:image image="{mediaElement}" title="{mediaElement.originalResource.title}" alt="{mediaElement.originalResource.alternative}" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
                                  </f:if>
                              </f:alias>
                          </n:link>
                      </div>
                  </f:then>
                  <f:else>
                      <f:if condition="{settings.displayDummyIfNoMedia}">
                          <div class="news-img-wrap">
					<span class="no-media-element">
						<n:link newsItem="{newsItem}" settings="{settings}" title="{newsItem.title}">
							<f:image src="{settings.list.media.dummyImage}" title="" alt="" maxWidth="{f:if(condition: settings.media.maxWidth, then: settings.media.maxWidth, else: settings.list.media.image.maxWidth)}" maxHeight="{f:if(condition: settings.media.maxHeight, then: settings.media.maxHeight, else: settings.list.media.image.maxHeight)}"/>
						</n:link>
					</span>
                          </div>
                      </f:if>
                  </f:else>
              </f:if>
          </div>

        </div>
      </div>
    </div>
  </f:else>
</f:if>
