<div class="featured-trip-ideas-card" data-module="card" data-card-id="{{cardId}}" {{#each wayPoints}}{{#if @last}}data-longitude="{{longitude}}" data-latitude="{{latitude}}"{{/if}}{{/each}} data-item-count="{{wayPointsCount}}">
    <div class="featured-trip-ideas-card__image-container">
        {{#if responsiveImage}}
        {{> @cp-medium-image lowResolutionUrl=responsiveImage.lowResolutionUrl
        fallbackImageUrl=responsiveImage.fallbackImageUrl sources=responsiveImage.sources
        caption=responsiveImage.caption dynamicImage=dynamicImage forceLoad=responsiveImage.forceLoad
        additionalCssClasses="featured-trip-ideas-card__image"}}
        {{/if}}
        {{#if webAppMode}}
            {{> @cp-like-button text=likeText}}
        {{/if}}
        {{> @cp-featured-trip-ideas-map wayPoints=wayPoints secondaryLocations=secondaryLocations }}
    </div>
    <div class="featured-trip-ideas-card__text-container">
        <div>
            {{#if pageType}}<p class="featured-trip-ideas-card__page-type js-page-type">{{pageType}}</p>{{/if}}
            {{#if title}}
                <h2 class="featured-trip-ideas-card__title featured-trip-ideas-card__title--first js-title">{{{title}}}</h2>
            {{/if}}
            <p class="featured-trip-ideas-card__travel-details featured-trip-ideas-card__travel-details--{{travelMethod}}">
                {{#if travelTime}}
                <span class="featured-trip-ideas-card__travel-details--bold">{{travelTime.number}}</span>
                <span>{{travelTime.text}}</span>
                {{/if}}
                {{#if travelDistance}}
                <span class="featured-trip-ideas-card__travel-details--bold">{{travelDistance.number}}</span>
                <span>{{travelDistance.text}}</span>
                {{/if}}
            </p>
            {{#if title}}
                <h2 class="featured-trip-ideas-card__title featured-trip-ideas-card__title--second">{{{title}}}</h2>
            {{/if}}
            <p class="featured-trip-ideas-card__description js-subtitle">
                {{#if description}}
                {{{description}}}
                {{/if}}
            </p>
        </div>
        <div>
            {{#ifEquals wayPointsCount 1}}
                <p class="featured-trip-ideas-card__location featured-trip-ideas-card__location--second js-location-name"><span class="featured-trip-ideas-card__location--bold">{{#each wayPoints}}{{#if @last}}{{name}}{{/if}}{{/each}}</span></p>
            {{/ifEquals}}
            {{#ifNotEquals wayPointsCount 1}}
                <p class="featured-trip-ideas-card__location featured-trip-ideas-card__location--first">From <span class="featured-trip-ideas-card__location--bold">{{#each wayPoints}}{{#if @first}}{{name}}{{/if}}{{/each}}</span> To <span class="featured-trip-ideas-card__location--bold">{{#each wayPoints}}{{#if @last}}{{name}}{{/if}}{{/each}}</span></p> 
            {{/ifNotEquals}}
            {{#if tags}}
                {{> @cp-hashtags tags}}
            {{/if}}
            {{#if button}}
                <a href="{{#if button.url}}{{button.url}}{{else}}#{{/if}}" class="featured-trip-ideas-card__button button-p1 button-p1--with-icon js-link" role="button">{{button.text}}</a>
            {{/if}}
        </div>
    </div>
    <a href="{{#if button.url}}{{button.url}}{{else}}#{{/if}}" class="featured-trip-ideas-card__link"></a>
</div>