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


	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": {"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", 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_ga4": { "eventName": "link_to_detail", "linkObject": "Image"{{:categories}}, "itemCategory" : "{{%%categories.0.catName}}"{{/}}, "interactionUrl" : "{{%%url}}"{{:region}}, "itemRegion" : "{{%%region}}"{{/}}{{:city}}, "itemCity" : "{{%%city}}"{{/}}{{:recid}}, "itemId" : "{{%%recid}}"{{/}}{{:accountId}}, "acctId" : "{{%%accountId}}"{{/}}{{:custom.rankname}}, "itemVariant" : "{{%%custom.rankname}}"{{?:rankname}}, "itemVariant" : "{{%%rankname}}"{{/}}{{:custom.price}}, "price" : "{{%%custom.price}}"{{?:admission}}, "price" : "{{%%admission}}"{{/}} } }'>
				<img class="thumb" src="{{~var.image.resource.getThumbnailUrl({ "height" : helpers.var.height, "width" : helpers.var.width, "crop" : "fill" })}}" loading="lazy" fetchpriority="low" />
			</a>
			{{:~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" : { "itemType" : "events"{{:categories}}, "itemCategory" : "{{%%categories.0.catName}}"{{/}}{{:region}}, "itemRegion" : "{{%%region}}"{{/}}{{:city}}, "itemCity" : "{{%%city}}"{{/}}{{:recid}}, "itemId" : "{{%%recid}}"{{/}}{{:accountId}}, "acctId" : "{{%%accountId}}"{{/}}{{:custom.rankname}}, "itemVariant" : "{{%%custom.rankname}}"{{?:rankname}}, "itemVariant" : "{{%%rankname}}"{{/}}{{:custom.price}}, "price" : "{{%%custom.price}}"{{?:admission}}, "price" : "{{%%admission}}"{{/}} } }'></div>{{/}}
		</div>
		<div class="content-section">
			<h4><a href="{{%url}}" data-gtm-click data-gtm-vars='{ "tClient_ga4": { "eventName": "link_to_detail", "linkObject": "Title"{{:categories}}, "itemCategory" : "{{%%categories.0.catName}}"{{/}}, "interactionUrl" : "{{%%url}}", "interactionText" : "{{%%title}}"{{:region}}, "itemRegion" : "{{%%region}}"{{/}}{{:city}}, "itemCity" : "{{%%city}}"{{/}}{{:recid}}, "itemId" : "{{%%recid}}"{{/}}{{:accountId}}, "acctId" : "{{%%accountId}}"{{/}}{{:custom.rankname}}, "itemVariant" : "{{%%custom.rankname}}"{{?:rankname}}, "itemVariant" : "{{%%rankname}}"{{/}}{{:custom.price}}, "price" : "{{%%custom.price}}"{{?: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 : "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"), gtmExtra : 'data-gtm-vars=\'{ "tClient_ga4" : { "eventName" : "link_to_detail", "linkObject" : "Link to Venue", "itemType": "listings" } }\'' }, valueTemplate : "link_or_label" },
					{ 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"), gtmExtra : 'data-gtm-vars=\'{ "tClient_ga4" : { "eventName" : "link_to_detail", "linkObject" : "Link to Venue", "itemType": "listings" } }\'' }, valueTemplate : "link_or_label" }
				])}}
				
				{{#~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>
	</div>
</div>

{{/event}}