{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<f:if condition="{article.flatAttributes.dataSource} == 'outdooractive'">
        <span
            data-oa-tracking
            data-oa-tracking-id="{article.flatAttributes.dataSourceId}"
            data-oa-tracking-type="teaser"></span>

</f:if>

<div class="tb-teaser__text">
    <p class="tb-teaser__topline">
        <f:if condition="{article.flatAttributes.difficultyRating.intValue} != 0">
            <strong>
                <vh:translate
                    id="property.attribute.difficultyRating.values.{article.flatAttributes.difficultyRating}"
                    package="Newland.Toubiz.Poi.Neos"
                    source="Models/Article" />

            </strong>
            •
        </f:if>
        {article.categoriesSorted.0.title}
    </p>

    <h3 class="tb-teaser__title" itemprop="name">{article.name}</h3>

    <f:if condition="{article.abstract}">
        <div class="tb-teaser__description" itemprop="description">
            {article.abstract -> f:format.stripTags()}
        </div>
    </f:if>

    <ul class="tb-teaser__facets">
        <f:if condition="{article.flatAttributes.tourLength.0}">
            <li class="tb-teaser-facet">
                <svg class="c-icon" aria-hidden="true">
                    <use xlink:href="#icon-distance"></use>
                </svg>
                <span class="tb-teaser-facet__label">
                    {article.flatAttributes.tourLength.0 -> vh:math.divide(by: 1000) -> vh:math.round(precision: 1)}
                </span>
            </li>
        </f:if>
        <li class="tb-teaser-facet">
            <svg class="c-icon" aria-hidden="true">
                <use xlink:href="#icon-duration"></use>
            </svg>
            <span class="tb-teaser-facet__label">
                    {article.flatAttributes.tourDuration.intValue -> vh:math.toHours()} h
                </span>
        </li>
        <li class="tb-teaser-facet">
            <svg class="c-icon" aria-hidden="true">
                <use xlink:href="#icon-ascend"></use>
            </svg>
            <span class="tb-teaser-facet__label">
                    {article.flatAttributes.ascentElevation} m
                </span>
        </li>
    </ul>
</div>