<link href="https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css" rel="stylesheet" />
<div class="trip-ideas-map" data-module="tripIdeasMap" data-map-key="{{key}}">
    {{> @cp-trip-ideas-sidebar}}
    <div class="trip-ideas-map__map" id="map"></div>
    <div class="trip-ideas-map-days-container">
        <a href="#" class="js-day-items-close-trigger trip-ideas-map-days-container__close-items"></a>
        {{#each days}}
        <div class="trip-ideas-map-day" id="day{{@index}}" data-longitude="{{location.longitude}}" data-latitude="{{location.latitude}}">
            <div class="trip-ideas-map-day-shadow">
                {{> @cp-medium-image responsiveImage}}
                <div class="trip-ideas-map-day__eyebrow">
                    <span class="trip-ideas-map-day__day-name">{{dayName}}</span><span class="trip-ideas-map-day__from-location">{{fromLocation}}</span>
                </div>
                <div class="trip-ideas-map-day__content">
                    <h2 class="trip-ideas-map-day__title">{{title}}</h2>
                    <p class="trip-ideas-map-day__subtitle">{{subtitle}}</p>
                    {{#if dayItems.length}}
                    {{> @cp-button-primary text=ctaText url="#" modifier="with-arrow" cssClasses="js-day-items-open-trigger trip-ideas-map-day__cta"}}
                    {{/if}}
                </div>
                {{#if dayItems.length}}
                <div class="trip-ideas-map-day-items">
                    {{#each dayItems}}
                    <div class="trip-ideas-map-day-item" data-longitude="{{location.longitude}}"
                        data-latitude="{{location.latitude}}">
                        <div class="trip-ideas-map-day-item__caption">
                            {{#if caption.location}}<span class="trip-ideas-map-day-item__location-icon"></span>
                            <p class="trip-ideas-map-day-item__location">{{caption.location}}</p>{{/if}}
                            {{#if caption.description}}<p class="trip-ideas-map-day-item__description">
                                {{caption.description}}
                            </p>{{/if}}
                        </div>
                        <h3 class="trip-ideas-map-day-item__title">{{title}}</h3>
                        <div class="trip-ideas-map-day-item__image">
                            {{> @cp-medium-image responsiveImage}}
                        </div>
                        <p class="trip-ideas-map-day-item__subtitle">{{{subtitle}}}</p>
                    </div>
                    {{/each}}
                </div>
                {{/if}}
            </div>
        </div>
        {{/each}}
    </div>
</div>