{namespace neos=Neos\Neos\ViewHelpers}
{namespace newland=Newland\NeosViewHelpers\ViewHelpers}
{namespace packages=Newland\Toubiz\Packages\Neos\ViewHelpers}

<packages:link.package package="{package}" class="tb-teaser">
    <f:if condition="{package.media.0}">
        <div class="tb-teaser__image-wrapper">
            <img class="tb-teaser__image lazyload" data-src="{package.media.0.sourceUri}"/>
        </div>
    </f:if>

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

        <ul class="list-reset mt-2">
            <f:for each="{package.benefits}" as="benefit">
                <li class="tb-checklist-item flex items-start">
                    <svg class="c-icon mr-2 pin-t text-positive mt-1" xmlns="http://www.w3.org/2000/svg"
                         viewBox="0 0 512 512">
                        <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 condition="{package.startingPrice}">
            <div class="tb-price-duration-wrapper flex flex-wrap mt-2">
                <p class="tb-teaser-pricing">
                    ab
                    <strong class="font-bold">
                        {package.startingPrice -> newland:format.currency(currencyCode: package.startingPriceCurrency)}
                    </strong>
                </p>
            </div>
        </f:if>
    </div>
</packages:link.package>