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

<f:comment>
    <!--
        This partial is reponsible for rendering an article as list item,
        e.g. in a search result list.
    -->
</f:comment>

<f:if condition="{article.isAttraction}">
    <li class="tb-results-list__item" itemscope itemtype="http://schema.org/TouristAttraction">
        <f:render section="ListItem" arguments="{_all}" />
    </li>
</f:if>

<f:if condition="{article.isGastronomy}">
    <li class="tb-results-list__item" itemscope itemtype="http://schema.org/Restaurant">
        <f:render section="ListItem" arguments="{_all}" />
    </li>
</f:if>

<f:if condition="{article.isTour}">
    <li class="tb-results-list__item">
        <f:render section="ListItem" arguments="{_all}" />
    </li>
</f:if>

<f:section name="ListItem">
    <poi:link.article article="{article}" class="tb-teaser tb-teaser--layout-horizontal">
        <f:render section="ListItemContent" arguments="{_all}" />
    </poi:link.article>
</f:section>

<f:section name="ListItemContent">
    <f:if condition="{article.mediaSorted.0}">
        <f:then>
            <div class="tb-teaser__image-wrapper">
                <img 
                    src="{article.mediaSorted.0.sourceUri}"
                    alt="{article.mediaSorted.0.title}"
                    class="tb-teaser__image"
                    itemprop="image" />
            </div>
        </f:then>
        <f:else>
            <div class="tb-teaser__image-wrapper">
                <div class="tb-teaser__image-fallback">
                    <svg class="c-icon">
                        <use xlink:href="#icon-image"></use>
                    </svg>
                </div>
            </div>
        </f:else>
    </f:if>

    <f:if condition="{article.isAttraction}">
        <f:render section="attractionContent" arguments="{article: article}" />
    </f:if>

    <f:if condition="{article.isGastronomy}">
        <f:render section="gastronomyContent" arguments="{article: article}" />
    </f:if>

    <f:if condition="{article.isTour}">
        <f:render section="tourContent" arguments="{article: article}" />
    </f:if>
</f:section>

<f:section name="attractionContent">
    <div class="tb-teaser__text">
        <p class="tb-teaser__topline">
            <strong>{article.categories.0.title}</strong>
            <f:if condition="{article.mainAddress.city}">
                • <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="addressLocality">{article.mainAddress.city}</span></span>
            </f:if>
        </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>
    </div>
</f:section>

<f:section name="gastronomyContent">
    <div class="tb-teaser__text">
        <p class="tb-teaser__topline">
            <strong>{article.categories.0.title}</strong>
            <f:if condition="{article.mainAddress.city}">
                • <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"><span itemprop="addressLocality">{article.mainAddress.city}</span></span>
            </f:if>
        </p>

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

        <ul class="tb-teaser__characteristics">
            <f:for each="{vh:collection.slice(collection: article.flatAttributes.gastronomyStyle, offset: 0, length: 2)}"
                   as="item">

                <li class="tb-teaser__characteristics-item" itemprop="servesCuisine">{item}</li>
            </f:for>
        </ul>

        <div class="tb-teaser__description">
            <f:if condition="{article.addresses.0.phoneNumber}">
                <p>
                    {f:translate(id: 'property.phoneNumber', package: 'Newland.Toubiz.Poi.Neos', source: 'Models/Address')}
                    <span itemprop="telephone">{article.addresses.0.phoneNumber}</span>
                </p>
            </f:if>

            {article.abstract -> f:format.stripTags()}
        </div>
    </div>
</f:section>

<f:section name="tourContent">
    <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} !== 0">
                <strong>
                    <f: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>

        <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>
</f:section>