{namespace offer=Newland\Toubiz\Offer\Neos\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}

<offer:link.offer offer="{offer}" class="tb-teaser">

    <div class="tb-teaser__image-wrapper">
        <vh:render section="imageOrFallback" arguments="{_all}" />
    </div>

    <div class="tb-teaser__text">
        <h3 class="tb-teaser__title">{offer.name}</h3>

        <f:if condition="{offer.startingPrice} || {offer.durationMinutes}">
            <div class="tb-teaser__meta-wrapper">
                <f:if condition="{offer.startingPrice}">
                    <p class="tb-teaser-pricing">
                        <f:translate 
                            id="teaser.price.from"
                            package="Newland.Toubiz.Offer.Neos"
                            source="NodeTypes/Teaser" /> <strong class="font-bold">{offer.startingPrice -> offer:format.currency(currencyCode: offer.startingPriceCurrency)}</strong>
                    </p>
                </f:if>

                <f:if condition="{offer.durationMinutes}">
                    <p class="tb-teaser__tour-duration">
                        <f:translate 
                            id="teaser.tour.duration"
                            package="Newland.Toubiz.Offer.Neos"
                            source="NodeTypes/Teaser"
                            arguments="{ 0: '{offer.durationMinutes -> offer:format.durationToHours()}' }"/>

                    </p>
                </f:if>
            </div>
        </f:if>

        <f:comment>
            <!--
                Example markup for ratings.

                <div class="tb-teaser__rating">
                    <div class="tb-rating">
                        <div class="tb-rating__result">
                            <span aria-hidden="true">3.5</span>
                            <span class="sr-only">Average rating is 3.5 of 5.</span>
                        </div>

                        <ul class="tb-rating__list">
                            <li class="tb-rating__item tb-rating__item--full"></li>
                            <li class="tb-rating__item tb-rating__item--full"><li>
                            <li class="tb-rating__item tb-rating__item--full"><li>
                            <li class="tb-rating__item tb-rating__item--half"></li>
                            <li class="tb-rating__item"></li>
                        </ul>

                        <p class="tb-rating__votes">
                            (12 Bewertungen)
                        </p>
                    </div>
                </div>
            -->
        </f:comment>
    </div>
</offer:link.offer>

<f:section name="imageOrFallback">
    <f:if condition="{offer.previewImage}">
        <f:then>
            <img 
                data-src="{offer.previewImage}"
                alt="{offer.name}"
                class="tb-teaser__image lazyload" />
                
        </f:then>
        <f:else>
            <div class="tb-teaser__image-fallback">
                <svg class="c-icon" aria-hidden="true" focusable="false">
                    <use xlink:href="#icon-image" />
                </svg>
            </div>
        </f:else>
    </f:if>
</f:section>