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

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

    <common:slot.render slot="aboveTeaser" context="{ article: article }" />
    <vh:render section="content" arguments="{_all}" />
    <common:slot.render slot="belowTeaser" context="{ article: article }" />
</poi:link.article>

<f:section name="content">
    <vh:render section="Tracking" arguments="{_all}" />
    <span itemprop="image" itemscope itemtype="http://schema.org/ImageObject" class="{f:if(condition: '{teaserStyle} === "poster"', then: 'h-full')}">
        <vh:render partial="PointOfInterests/Teaser/Common/Image" arguments="{_all}"/>

        <div class="tb-teaser__text">
            <span itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
                <meta itemprop="name" content="topline">

                <common:slot.render slot="aboveTitle" context="{ article: article }" />
                <common:slot.render slot="aboveTeaserTitle" context="{ article: article }" />

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

                        </strong>
                        •
                    </f:if>
                    {article.categoriesSorted.0.title}
                </p>
            </span>
            <span itemprop="additionalProperty" itemscope itemtype="http://schema.org/PropertyValue">
                <meta itemprop="name" content="headline">
                <h3 class="tb-teaser__title" itemprop="value">
                    {article.name}
                </h3>
            </span>
            <common:slot.render slot="belowTitle" context="{ article: article }" />
            <common:slot.render slot="belowTeaserTitle" context="{ article: article }" />

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

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

                </f:then>
            </f:if>

            <vh:render partial="PointOfInterests/Teaser/Common/Awards" arguments="{_all}" />
        </div>
    </span>
</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>
