<a class="card destination-card" title="{{content.name}}" href="{{dpUrlResolver content}}" data-type="{{content.type}}" data-lowestprice data-location-id="{{content.id}}">
  {{#if content.newsPush}}
  {{>news_label newsLabel=(getResource resourceObject 'newsPush') type='newsPush' extraCss='small'}}
  {{/if}}
  <div class="content">
    {{#if content.mainImage}}
      <div class="image-container">
        {{#if showLoadingImage}}
        <picture class="loading-image">
          <img src="/cdn/img/loaders/loader-tui-blue.gif" alt="{{content.name}}" />
        </picture>
        {{else}}
        <picture class="ratio-fixed">
          <source
            data-src="{{fixImageUrl content.mainImage.url}}{{imageSize "destinationCard" numberOfCards}}&q=65&fm=webp"
            type="image/webp">
          <img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
            data-src="{{fixImageUrl content.mainImage.url}}{{imageSize "destinationCard" numberOfCards}}&q=65&fm=jpg"
            data-sizes="auto" class="lazyload" alt="{{content.name}}" />
          <noscript>
            <img src="{{fixImageUrl content.mainImage.url}}{{imageSize "destinationCard" numberOfCards}}&q=65&fm=jpg"
              alt="{{content.name}}">
          </noscript>
        </picture>
        {{/if}}
      </div>
    {{/if}}
    <div class="destination-card__body">
      <span class="flag-icon">{{>icon_flags_svg name=content.countryCode}}</span>
      <div class="body">
        <span class="body__text">{{getResource resourceObject 'cardPreText'}}</span>
        <h3 class="body__name">{{content.name}}</h3>
      </div>
      <div class="destination-card__info--large">
        <span>{{getResource resourceObject 'cardNumberOfResorts' locations.length}}</span>
        <span>{{getResource resourceObject 'cardNumberOfHotels' content.numberOfHotels}}</span>
      </div>
    </div>
    <div class="image-fade"></div>
  </div>
  <div class="destination-card__info--small">
    <div>
      <span class="no-of-location">{{getResource resourceObject 'cardNumberOfResorts' locations.length}}</span>
      <span class="no-of-hotels">{{getResource resourceObject 'cardNumberOfHotels' content.numberOfHotels}}</span>
    </div>
    <div>
      <span class="offer-text-from">{{getResource resourceObject 'pricePrefixFrom'}}</span>
      <span class="offer-text-fr">{{getResource resourceObject 'pricePrefixFr'}}</span>
      <span class="price-text">
        {{#if content.price}}
          {{content.price}}
        {{/if}}
      </span>
    </div>
  </div>
</a>
