{{~exec(function() {
	helpers.var.translations = {
		events : data.translations.events,
		leo : data.translations.leo
	}
})}}

{{#event}}

{{~exec(function() {
	// listing detail events have data.startDateMoment as moment object
	// event layout items have startDate as moment object
	
	var startDate = data.startDateMoment || helpers.plugins.clientMoment(data.startDate);
	var endDate = data.endDate !== undefined ? data.endDateMoment || helpers.plugins.clientMoment(data.endDate) : undefined;

	// recurType 0 = one day, 1 = daily, 3 = weekly, 4 = monthly, 6 = yearly
	helpers.var.formattedDate = "";

	if (data.recurType == 99 && startDate !== undefined) {
		helpers.var.formattedDate = "Dates vary between " + startDate.format('LL') + ' - ' + endDate.format('LL');
	} else if (data.recurType == 0 && startDate !== undefined) {
		helpers.var.formattedDate = startDate.format('LL');
	} else if (data.recurType == 1 && startDate !== undefined && endDate !== undefined) {
		helpers.var.formattedDate = startDate.format('LL') + ' - ' + endDate.format('LL');
	} else if (data.recurType > 1 && data.recurrence !== undefined) {
		if (startDate !== undefined) {
			helpers.var.dateRange = startDate.format('LL');
			if (endDate !== undefined) {
				helpers.var.dateRange = helpers.var.dateRange + " - " + endDate.format('LL');
			}
		}
		helpers.var.formattedDate = data.recurrence + (endDate !== undefined ? " until " + endDate.format('LL') : "");
	}


	url;
	if (data.media_raw && data.media_raw[0]) {
		url = data.media_raw[0].mediaurl;
	} else {
		url = helpers.plugins.sv_site.siteConfig.custom[helpers.plugins.sv_site.site].defaultImageUrl
	}
	helpers.var.image = {
		resource : helpers.plugins.cloudinary.createResource({
			imageUrl : url
		})
	};

	helpers.var.primaryCat;
	if (data.categories && data.categories[0] && data.categories[0].catName) {
		helpers.var.primaryCat = data.categories[0].catName
	}
})}}

<div class="eventItem item {{:featured}}featured{{/featured}}" data-eventid="{{id}}" data-recid="{{recId}}" data-type="event" data-seo-event data-seo-title="{{:listing}}{{%listing.title}} | {{/listing}}{{%title}}" data-gtm-vars='{ "tClient_ga4": { "itemName": "{{%%title}}", "itemType": "events" } }'>
	<div class="inner">
		<div class="img-cont">
			{{!-- Pre-allocates height of image using padding-bottom to prevent height changes on load --}}
			{{~setVar("width", 209 )}}
			{{~setVar("height", 385)}}
			{{~setVar("tabletWidth", 438 )}}
			{{~setVar("tabletHeight", 247)}}
			{{~setVar("desktopWidth", 341 )}}
			{{~setVar("desktopHeight", 193)}}
			{{~setVar("paddingBottom", (helpers.var.height / helpers.var.width) * 100 + "%")}}

			<a class="thumb-holder" href="{{%url}}" data-seo-detail-image style="padding-bottom: {{~var.paddingBottom}}" data-gtm-click data-gtm-vars='{ "tClient_ga4": { "eventName": "link_to_detail", "linkObject": "Image", "itemCategory": "{{%%categories.0.catName}}", "interactionUrl": "{{%%url}}"{{:region}}, "itemRegion": "{{%%region}}"{{/}}{{:city}}, "itemCity": "{{%%city}}"{{/}}{{:recid}}, "itemId": "{{%%recid}}"{{/}}{{:accountId}}, "acctId": "{{%%accountId}}"{{/}}{{:admission}}, "price": "{{%%admission}}"{{/}} } }'>
				<picture>
					<source
						media="(min-width: 1024px)"
						srcset="{{~var.image.resource.getThumbnailUrl({ "height" : helpers.var.desktopHeight, "width" : helpers.var.desktopWidth, "crop" : "fill" })}}"
					>
					<source
						media="(min-width: 640px)"
						srcset="{{~var.image.resource.getThumbnailUrl({ "height" : helpers.var.tabletHeight, "width" : helpers.var.tabletWidth, "crop" : "fill" })}}"
					>
					<img class="thumb" src="{{~var.image.resource.getThumbnailUrl({ "height" : helpers.var.height, "width" : helpers.var.width, "crop" : "fill" })}}" />
				</picture>
			</a>
		</div>
		<div class="content-section">
			<div class="content-top">
				{{:~var.primaryCat}}<div class="category">{{~var.primaryCat}}</div>{{/}}
				<h4><a href="{{url}}" data-gtm-click data-gtm-vars='{ "tClient_ga4": { "eventName": "link_to_detail", "linkObject": "Title", "itemCategory": "{{%%categories.0.catName}}", "interactionUrl": "{{%%url}}", "interactionText": "{{%%title}}"{{:region}}, "itemRegion": "{{%%region}}"{{/}}{{:city}}, "itemCity": "{{%%city}}"{{/}}{{:recid}}, "itemId": "{{%%recid}}"{{/}}{{:accountId}}, "acctId": "{{%%accountId}}"{{/}}{{:admission}}, "price": "{{%%admission}}"{{/}} } }'>{{%title}}</a></h4>
				<ul class="info-list">
					{{!-- uses a partial mechanic to simplify HTML generation so it's consistent between the li's --}}
					{{~setVar("fields", [
						{
							name : "location",
							label :  "",
							value : data.location || helpers.plugins.miscLib.varLookup(data, "listing.title"),
							extra : {
								url : helpers.plugins.miscLib.varLookup(data, "listing.url"),
								gtmExtra : 'data-gtm-vars=\'{ "tClient_ga4" : { "eventName" : "link_to_detail", "linkObject" : "Link to Venue", "itemType": "listings" } }\''
							},
							valueTemplate : "link_or_label"
						}
					])}}

					<li class="dateInfo">{{~var.formattedDate}}</li>
					
					{{#~var.fields}}
						{{~fill(helpers.partial("custom_li_items"), data, {}, global)}}
					{{/}}
					
				</ul>
				<div class="shared-action-items">
					{{:~plugins.sv_site.siteConfig.plugins.tripbuilder.active}}<div class="trip-builder" data-tb-button data-tb-recid="{{recid}}" data-tb-type="events" data-gtm-vars='{ "tClient_ga4": { "itemCategory": "{{%%categories.0.catName}}"{{:region}}, "itemRegion": "{{%%region}}"{{/}}{{:city}}, "itemCity": "{{%%city}}"{{/}}{{:recid}}, "itemId": "{{%%recid}}"{{/}}{{:accountId}}, "acctId": "{{%%accountId}}"{{/}}{{:admission}}, "price": "{{%%admission}}"{{/}} } }'></div>{{/}}
				</div>
			</div>
			<div class="slide-footer">
				<a href="{{%absoluteUrl}}" class="read-more" data-gtm-click data-gtm-vars='{ "tClient_ga4": { "eventName": "link_to_detail", "linkObject": "Read More", "itemCategory": "{{%%categories.0.catName}}", "interactionUrl": "{{%%absoluteUrl}}", "interactionText": "Read More"{{:region}}, "itemRegion": "{{%%region}}"{{/}}{{:city}}, "itemCity": "{{%%city}}"{{/}}{{:recid}}, "itemId": "{{%%recid}}"{{/}}{{:accountId}}, "acctId": "{{%%accountId}}"{{/}}{{:admission}}, "price": "{{%%admission}}"{{/}} } }'>Read More</a>
			</div>
		</div>
	</div>
</div>

{{/event}}