{namespace poi=Newland\Toubiz\Poi\Neos\ViewHelpers}

<a href="{poi:context.targetUri(article: article)}"
   class="tb-teaser"
   target="_blank">

    <f:if condition="{article.media.0}">
        <f:then>
            <div class="tb-teaser__image-wrapper">
                <img src="{article.media.0.sourceUri}"
                     alt="{article.media.0.title}"
                     class="tb-teaser__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>

    <div class="tb-teaser__text">
        <p class="tb-teaser__topline">
            <strong>
                {article.categories.0.title}
            </strong>
            • {article.city}
        </p>

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

        <f:if condition="{article.attributes.minimumBasePrice}">
            <p>
                <strong class="font-bold">
                    <f:translate id="price.word.todayFrom"
                                 package="Newland.Toubiz.Poi.Neos"
                                 source="Views/Teaser" />

                    <f:render section="Currency"
                              arguments="{
                                  currency: article.attributes.minimumBasePrice.currency,
                                  value: article.attributes.minimumBasePrice.value
                              }" />

                </strong>

                <f:translate id="price.word.per"
                             package="Newland.Toubiz.Poi.Neos"
                             source="Views/Teaser" />

                {article.attributes.minimumBasePrice.unit}
            </p>
        </f:if>
    </div>
</a>


<f:section name="Currency">
    <f:switch expression="{currency}">
        <f:case value="CHF">
            <f:format.currency currencySign="CHF" decimalSeparator="." thousandsSeparator="'" prependCurrency="TRUE">{value}</f:format.currency>
        </f:case>

        <f:case value="EUR">
            <f:format.currency currencySign="€">{value}</f:format.currency>
        </f:case>

        <f:defaultCase>
            <f:format.currency currencySign="{currency}">{value}</f:format.currency>
        </f:defaultCase>
    </f:switch>
</f:section>