<div class="editorial-map-and-card-grid__map-view">
    <div data-default-overlay-button-text="{{ overlayButtonText }}" class="editorial-map-and-card-grid__map-result-overlay js-overlay">
        {{#if webAppMode}}
            {{> @cp-card-standard-generic dynamicImage=true webAppMode=true }}
        {{else}}
            {{> @cp-card-standard-generic dynamicImage=true }}
        {{/if}}
        <a href="#" class="editorial-map-and-card-grid__map-result-overlay-close js-overlay-close">{{overlayCloseText}}</a>
        {{> @cp-button-secondary text=overlayButtonText url="#" cssClasses="editorial-map-and-card-grid__map-result-overlay-button js-overlay-button"}}
    </div>
    <div class="editorial-map-and-card-grid__map-results-container">
        <div class="overlay-card-modal-container js-overlay-map-card-modal">
            <div class="overlay-card-modal-container__inner">
                <button class="overlay-card-modal-container__back js-card-modal-close">{{cardDetail.backButtonText}}</button>
                <div class="overlay-card-modal-container__card-wrapper js-card-modal-inner">
                    {{!-- Card detail Appends here --}}
                </div>
                <div class="overlay-card-modal-container__button-wrapper">
                    <a class="button-p1 button-p1--with-icon js-button-link">{{cardDetail.tellMeMoreText}}</a>
                    <button class="button-p2 button-p2--with-icon button-p2--with-icon-map js-button-map">{{cardDetail.viewOnMapText}}</button>
                </div>
            </div>
        </div>
        <div class="editorial-map-and-card-grid__map-results js-map-results">
            <div class="editorial-map-and-card-grid__map-api-results">
                {{#each cards}}
					{{#if location}}
						<div data-overlay-button-text="{{ link.text }}" class="js-card editorial-map-and-card-grid__horizontal-card-wrapper" {{#if location.longitude}}data-longitude="{{location.longitude}}"{{/if}} {{#if location.latitude}}data-latitude="{{location.latitude}}"{{/if}} data-card-id="{{cardId}}" data-card-index="{{@index}}" {{#if filterType}}data-category="{{filterType}}"{{/if}} {{#if isEditorialCard}}data-editorial-card="true"{{/if}}>
							{{> @cp-card-horizontal }}
						</div>
					{{/if}}
					{{#if html}}
						<div data-overlay-button-text="{{ link.text }}" class="js-card editorial-map-and-card-grid__horizontal-card-wrapper">
							{{> @cp-card-horizontal }}
						</div>
					{{/if}}
                    {{#ifEquals wayPointsCount 1}}
						<div data-overlay-button-text="{{ link.text }}" class="js-card editorial-map-and-card-grid__horizontal-card-wrapper" data-longitude="{{#each wayPoints}}{{longitude}}{{/each}}" data-latitude="{{#each wayPoints}}{{latitude}}{{/each}}" data-card-id="{{cardId}}" data-card-index="{{@index}}" {{#if filterType}}data-category="{{filterType}}"{{/if}} {{#if isEditorialCard}}data-editorial-card="true"{{/if}}>
							{{> @cp-card-horizontal }}
						</div>
					{{/ifEquals}}
                {{/each}}
            </div>
        </div>
    </div>
    <div class="editorial-map-and-card-grid__map-container">
        <link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
        <div class="editorial-map-and-card-grid__map js-editorial-map-card-grid-map" id="map"></div>
        {{#if mapSubText}}
            <p class="editorial-map-and-card-grid__map-sub-text">{{mapSubText}}</p>
        {{/if}}
    </div>
</div>