{{~exec(function() {
	helpers.var.t = {
		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);
	var nextDate = data.nextDateMoment || helpers.plugins.clientMoment(data.nextDate);

	// 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('MMM DD, YYYY') + ' - ' + endDate.format('MMM DD, YYYY');
	} else if (data.recurType == 0 && startDate !== undefined) {
		helpers.var.formattedDate = startDate.format('MMM DD, YYYY');
	} else if (data.recurType == 1 && startDate !== undefined && endDate !== undefined) {
		helpers.var.formattedDate = startDate.format('MMM DD, YYYY') + ' - ' + endDate.format('MMM DD, YYYY');
	} else if (data.recurType > 1 && data.recurrence != undefined) {
		if (startDate !== undefined) {
			helpers.var.formattedDate = startDate.format('MMM DD, YYYY');
			if (endDate !== undefined) {
				helpers.var.formattedDate = helpers.var.formattedDate + " - " + endDate.format('MMM DD, YYYY');
			}
		}
		helpers.var.formattedDate = data.recurrence + (endDate !== undefined ? " until " + endDate.format('MMM DD, YYYY') : "");
	}

	// Semi messy, we will overwrite the above formatted date logic if we have a nextdate per comps
	if(nextDate) {
		helpers.var.nextDay = nextDate.format('DD');
		helpers.var.nextMonth = nextDate.format('MMM');
		helpers.var.formattedDate = nextDate.format('MMM DD, YYYY');
	}

	helpers.var.recurrence = data.recurrence !== undefined ?  `${data.recurrence} until ${endDate.format("MMM DD YYYY")}`  : undefined;

	if (startDate && endDate && startDate.format("MMM DD YYY") == endDate.format("MMM DD YYY")) {
		helpers.var.recurrence = "One day only";
	} else if (helpers.var.recurrence === undefined && startDate && endDate) {
		helpers.var.recurrence = `Dates vary between ${startDate.format("MMM DD YYYY")} and ${endDate.format("MMM DD YYYY")}`;
	}

	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}}">
	<div class="inner">
		<div class="img-cont">
			{{:~var.nextDay}}
				<span v-if="doc.dateMoment" class="mini-date-container">
					<span class="day">{{~var.nextMonth}}</span>
					<span class="month">{{~var.nextDay}}</span>
				</span>
			{{/}}

			{{!-- Pre-allocates height of image using padding-bottom to prevent height changes on load --}}
			{{~setVar("width", 328)}}
			{{~setVar("height", 218)}}
			{{~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", "itemType": "events", "itemCategory": "{{%%categories.0.catName}}", "interactionUrl": "{{%%url}}"{{:region}}, "itemRegion": "{{%%region}}"{{/}}{{:city}}, "itemCity": "{{%%city}}"{{/}}{{:recid}}, "itemId": "{{%%recid}}"{{/}}{{:accountId}}, "acctId": "{{%%accountId}}"{{/}}, "itemName": "{{:listing}}{{%%listing.title}} | {{/listing}}{{%%title}}", "linkObject": "Image"} }'>
				<img class="thumb" src="{{~var.image.resource.getThumbnailUrl({ "height" : helpers.var.height, "width" : helpers.var.width, "crop" : "fill" })}}" />
			</a>
		</div>
		<div class="content-section">
			<h4><a href="{{%url}}" data-gtm-click data-gtm-vars='{ "tClient_ga4": { "eventName": "link_to_detail", "itemType": "events", "itemCategory": "{{%%categories.0.catName}}", "interactionUrl": "{{%%url}}", "interactionText": "{{%%title}}"{{:region}}, "itemRegion": "{{%%region}}"{{/}}{{:city}}, "itemCity": "{{%%city}}"{{/}}{{:recid}}, "itemId": "{{%%recid}}"{{/}}{{:accountId}}, "acctId": "{{%%accountId}}"{{/}}, "itemName": "{{:listing}}{{%%listing.title}} | {{/listing}}{{%%title}}", "linkObject": "Title"} }'>{{%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", [
				])}}

				{{#~var.fields}}
					{{~fill(helpers.partial("custom_li_items"), data, {}, global)}}
				{{/}}
				
				{{:~var.formattedDate}}
					<li class="dateRange"><i class="fas fa-calendar-alt" aria-hidden="true"></i> {{~var.formattedDate}}</li>
				{{/}}
				
				{{:~var.recurrence}}
					<li class="recurrence"> {{~var.recurrence}}</li>
				{{/}}

				{{:distance}}
					{{:~equal(global.searchQuery._currentQuery.sort, 'distance')}}
						<li class="distance">
							{{distance.format({ unit : "miles" })}} {{~var.t.leo.miles_from_you}}
						</li>
					{{/}}
				{{/distance}}
			</ul>
			<a href="{{%url}}" data-gtm-click data-gtm-vars='{ "tClient_ga4": { "eventName": "link_to_detail", "itemType": "events", "itemCategory": "{{%%categories.0.catName}}", "interactionUrl": "{{%%url}}", "interactionText": "{{%%title}}"{{:region}}, "itemRegion": "{{%%region}}"{{/}}{{:city}}, "itemCity": "{{%%city}}"{{/}}{{:recid}}, "itemId": "{{%%recid}}"{{/}}{{:accountId}}, "acctId": "{{%%accountId}}"{{/}}, "itemName": "{{:listing}}{{%%listing.title}} | {{/listing}}{{%%title}}", "linkObject": "View Event"} }'>View Event <i class="fas fa-long-arrow-alt-right" aria-hidden="true"></i></a>
			<div class="shared-action-items">
				{{:~plugins.sv_site.siteConfig.plugins.tripbuilder.active}}<span data-tb-button data-tb-recid="{{recid}}" data-tb-type="events"></span>{{/}}
			</div>
		</div>
	</div>
</div>

{{/event}}