<div class="editorial-map-and-card-grid {{#ifEquals type "sharedBoard"}}shared-board card-view{{/ifEquals}} {{#ifEquals type "map"}}map-view{{/ifEquals}} {{#ifEquals type "mapAndCards"}}map-view{{/ifEquals}} {{#ifEquals type "cards"}}card-view{{/ifEquals}} {{#if filters}}editorial-map-and-card-grid--with-filters{{/if}}" {{#if mapSettings}} data-maxzoom="{{mapSettings.maxZoom}}" data-minzoom="{{mapSettings.minZoom}}" data-scrollzoom="{{mapSettings.scrollZoom}}" data-interactive="{{mapSettings.interactive}}" data-zoom="{{mapSettings.zoom}}" data-pitch="{{mapSettings.pitch}}" data-bearing="{{mapSettings.bearing}}" data-centerlat="{{mapSettings.center.lat}}" data-centerlong="{{mapSettings.center.long}}" {{/if}} data-module="editorialMapAndCardGrid" data-map-key="{{mapKey}}">
    <div class="editorial-map-and-card-grid__inner grid-layout__full-width">
        <div class="grid-x grid-margin-x">
            {{#if title}}
                <div class="cell medium-7 large-9">
                    <h2 class="editorial-map-and-card-grid__title">{{{title}}}</h2>
                </div>
            {{/if}}
            {{#if subtitle}}
                <div class="cell">
                    <p class="editorial-map-and-card-grid__subtitle">{{{subtitle}}}</p>
                </div>
            {{/if}}
            {{#ifEquals type "mapAndCards" }}
                <div class="cell">
                    <div class="editorial-map-and-card-grid-toggle">
                        <a href="#" class="editorial-map-and-card-grid-toggle__map-toggle js-show-map" aria-label="Switch to Map View">Map View</a>
                        <a href="#" class="editorial-map-and-card-grid-toggle__card-toggle js-show-cards" aria-label="Switch to Card View">Card View</a>
                    </div>
                </div> 
            {{/ifEquals}}
        </div>
        {{#if filters}}
        <div class="js-carousel-slider">
            <div class="carousel__slider grid-x gird-margin-x editorial-map-and-card-grid__filters-container" role="region">
                {{#each filters}}
                    <div class="carousel__slide">
                        {{> @cp-filters this}}
                    </div>
                {{/each}}
            </div>
        </div>
        {{/if}}
        {{#ifEquals type "sharedBoard"}}
            <div class="grid-x editorial-map-and-card-grid__button-container">
                <div class="editorial-map-and-card-grid__share">
                    <button class="editorial-map-and-card-grid-toggle__button js-share-board-button" aria-label="Click Share Board">{{{shareIcon}}}</button>
                </div>
                <div class="editorial-map-and-card-grid-toggle">
                    <a href="#" class="editorial-map-and-card-grid-toggle__card-toggle js-show-cards" aria-label="Toggle to show cards"></a>
                    <a href="#" class="editorial-map-and-card-grid-toggle__map-toggle js-show-map" aria-label="Toggle to show map"></a>
                </div>
            </div>
            <div class="overlay-card-modal-container js-shared-board-card-modal" data-back-button-text="{{ modalCardButtonText.backButtonText }}" data-visit-website-text="{{ modalCardButtonText.visitWebsiteText }}" data-tell-me-more-text="{{ modalCardButtonText.tellMeMoreText }}" data-view-on-map="{{ modalCardButtonText.viewOnMapText }}">
                <div class="overlay-card-modal-container__inner">
                    <button class="overlay-card-modal-container__back js-card-modal-close" aria-label="{{modalCardButtonText.backButtonText}}">{{modalCardButtonText.backButtonText}}</button>
                    <button class="overlay-card-modal-container__close js-card-modal-close" aria-label="Close Modal"></button>
                    <div class="js-card-modal-inner"></div>
                </div>
            </div>
            {{> @cp-share-board-modal shareMyBoard }}
        {{/ifEquals}}
        {{> @cp-card-view }}
        {{> @cp-map-view }}
    </div>
</div>