{namespace service=Newland\Toubiz\Services\Neos\ViewHelpers}
{namespace vh=Newland\NeosViewHelpers\ViewHelpers}
{namespace common=Newland\Toubiz\Common\Neos\ViewHelpers}

<service:link.service service="{service}" class="tb-teaser">
    <common:slot.render slot="aboveTeaser" context="{service: service}" />

    <common:slot.render slot="aboveImage" context="{service: service}" />
    <common:slot.render slot="aboveTeaserImage" context="{service: service}" />
    <div class="tb-teaser__image-wrapper">
        <vh:render section="imageOrFallback" arguments="{_all}" />

        <common:slot.render slot="onImage" context="{service: service}" />
        <common:slot.render slot="onTeaserImage" context="{service: service}" />
    </div>
    <common:slot.render slot="belowImage" context="{service: service}" />
    <common:slot.render slot="belowTeaserImage" context="{service: service}" />

    <div class="tb-teaser__text">
        <common:slot.render slot="aboveTitle" context="{service: service}" />
        <common:slot.render slot="aboveTeaserTitle" context="{service: service}" />
        <h3 class="tb-teaser__title">{service.name}</h3>
        <common:slot.render slot="belowTeaserTitle" context="{service: service}" />
        <common:slot.render slot="belowTitle" context="{service: service}" />

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

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

                    </p>
                </f:if>

                <f:if condition="{service.benefits}">
                    <ul class="list-reset mt-2">
                        <f:for each="{service.benefits}" as="benefit">
                            <li class="tb-checklist-item flex items-start">
                                <svg
                                    class="c-icon mr-2 pin-t text-positive mt-1"
                                    viewBox="0 0 512 512"
                                    aria-hidden="true"
                                    focusable="false">

                                    <path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"/>
                                </svg>
                                <span class="tb-checklist-item__text">{benefit -> f:format.raw()}</span>
                            </li>
                        </f:for>
                    </ul>
                </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>
    <common:slot.render slot="belowTeaser" context="{service: service}" />
</service:link.service>

<f:section name="imageOrFallback">
    <f:if condition="{service.media.0}">
        <f:then>
            <img
                data-src="{service.media.0.uri}"
                alt="{service.name}"
                class="tb-teaser__image lazyload" />

        </f:then>
        <f:else>
            <div class="tb-teaser__image-fallback">
                <svg
                    class="c-icon"
                    viewBox="0 0 512 512"
                    aria-hidden="true"
                    focusable="false">

                    <path fill="currentColor" d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm16 336c0 8.822-7.178 16-16 16H48c-8.822 0-16-7.178-16-16V112c0-8.822 7.178-16 16-16h416c8.822 0 16 7.178 16 16v288zM112 232c30.928 0 56-25.072 56-56s-25.072-56-56-56-56 25.072-56 56 25.072 56 56 56zm0-80c13.234 0 24 10.766 24 24s-10.766 24-24 24-24-10.766-24-24 10.766-24 24-24zm207.029 23.029L224 270.059l-31.029-31.029c-9.373-9.373-24.569-9.373-33.941 0l-88 88A23.998 23.998 0 0 0 64 344v28c0 6.627 5.373 12 12 12h360c6.627 0 12-5.373 12-12v-92c0-6.365-2.529-12.47-7.029-16.971l-88-88c-9.373-9.372-24.569-9.372-33.942 0zM416 352H96v-4.686l80-80 48 48 112-112 80 80V352z"></path>
                </svg>
            </div>
        </f:else>
    </f:if>
</f:section>