<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}}">
            {{> @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>
        {{/each}}
    </div>
</div>