{namespace neos=Neos\Neos\ViewHelpers}
{namespace poi=Newland\Toubiz\Poi\Neos\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<poi:link.article
    article="{article}"
    class="tb-teaser"
    additionalAttributes="{
        itemscope: 'itemscope',
        itemtype: 'http://schema.org/TravelAction',
        itemid: 'urn:uuid:{article.persistenceObjectIdentifier}'
    }">

    <f:render section="content" arguments="{_all}" />
</poi:link.article>


<f:section name="content">
    <f:render section="Tracking" arguments="{_all}" />
    <f:render partial="PointOfInterests/Teaser/Common/Image" arguments="{_all}"/>

    <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.categories.0.title}
        </p>
        <h3 class="tb-teaser__title" itemprop="name">
            {article.name}
        </h3>
        <ul class="tb-teaser__facets">
            <f:if condition="{article.flatAttributes.tourLength.0}">
                <li class="tb-teaser-facet">
                    <span class="tb-teaser-facet__label" itemprop="distance">
                    {article.flatAttributes.tourLength.0 -> vh:math.divide(by: 1000) -> vh:math.round(precision: 1)} km
                </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>

        <f:if condition="{article.starClassification} > 0 || {article.averageRating} > 0">
            <f:then>
                <f:render
                    partial="PointOfInterests/Attribute"
                    arguments="{
                        type: 'teaserRating',
                        name: 'teaserRating',
                        starClassification: article.starClassification,
                        averageRating: article.averageRating,
                        numberOfRatings: article.numberOfRatings
                    }" />

            </f:then>
        </f:if>
    </div>
</f:section>


<f:comment>
    <!--
        Outdooractive tours require tracking.
    -->
</f:comment>
<f:section name="Tracking">
    <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>
</f:section>
