{{~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.endDateMoment || helpers.plugins.clientMoment(data.endDate);

	// 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') : "");
	}


	var 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
		})
	};
})}}

<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" : { "itemType" : "events", "itemName" : "{{%%title}}" } }'>
	<div class="inner">
		<div class="img-cont">
			{{!-- Pre-allocates height of image using padding-bottom to prevent height changes on load --}}
			{{~setVar("width", 414 )}}
			{{~setVar("height", 275)}}
			{{~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" : { "eventAction" : "Link to Event Detail", "eventLabel" : "{{:listing}}{{%%listing.title}} | {{/listing}}{{%%title}}", "nonInteraction" : 0 }, "tClient_ga4" : {"eventName" : "link_to_detail", "linkObject" : "Image", "crmCatSubcat" : "{{%%categories.0.catName}}"} }'>
				<img class="thumb" src="{{~var.image.resource.getThumbnailUrl({ "height" : helpers.var.height, "width" : helpers.var.width, "crop" : "fill" })}}" loading="lazy" fetchpriority="low" />
			</a>
		</div>
		<div class="content-section">
			<h4><a href="{{%url}}" data-gtm-click data-gtm-vars='{ "tClient" : { "eventAction" : "Link to Event Detail", "eventLabel" : "{{:listing}}{{%%listing.title}} | {{/listing}}{{%%title}}", "nonInteraction" : 0 }, "tClient_ga4": {"eventName": "link_to_detail", "linkObject": "Title", "crmCatSubcat": "{{%%categories.0.catName}}"} }'>{{%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 : "host", label : helpers.var.translations.events.presented_by, value : data.hostname || helpers.plugins.miscLib.varLookup(data, "host.title"), extra : { url : helpers.plugins.miscLib.varLookup(data, "host.url") }, valueTemplate : "host_or_location" },
					{ name : "location", label :  helpers.var.translations.leo.location, value : data.location || helpers.plugins.miscLib.varLookup(data, "listing.title"), extra : { url : helpers.plugins.miscLib.varLookup(data, "listing.url") }, valueTemplate : "host_or_location" }
				])}}


				
				{{#~var.fields}}
					{{~fill(helpers.partial("custom_li_items"), data, {}, global)}}
				{{/}}
				
				{{:~var.dateRange}}
					<li class="dateRange">{{~var.dateRange}}</li>
				{{/}}

				<li class="dateInfo">{{~var.formattedDate}}</li>

				{{:distance}}
					{{:~equal(global.searchQuery._currentQuery.sort, 'distance')}}
						<li class="distance">
							{{distance.format({ unit : "miles" })}} {{~var.translations.leo.miles_from_you}}
						</li>
					{{/}}
				{{/distance}}
			</ul>
			<div class="shared-action-items">
				{{:~plugins.sv_site.siteConfig.plugins.tripbuilder.active}}<span data-tb-button data-tb-recid="{{recid}}" data-tb-type="events" data-gtm-click data-gtm-vars='{ "tClient_ga4": {"eventName": "partner_referral", "linkObject": "Tripbuilder - Add", "crmCatSubcat": "{{%%categories.0.catName}}"} }'></span>{{/}}
			</div>
		</div>
	</div>
</div>

{{/event}}