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

{{#listing}}

{{~exec(function() {
	helpers.var.image = helpers.plugins.cloudinary.createResource({
		imageUrl:
			data.primary_image_url ||
			helpers.plugins.sv_site.siteConfig.custom[helpers.plugins.sv_site.site].defaultImageUrl,
	});

	const PUNCT_EOL_RX = new RegExp(/(&[#\w]+?;|[ ;\:\/,\.\-–—])+$/);
	let nohtml = helpers.plugins.stringLib.stripHtml(data.description);
	let newDesc = helpers.plugins.stringLib.substringOnWord(nohtml, 216);
	if (newDesc.length < nohtml.length) {
		newDesc	= newDesc.replace(PUNCT_EOL_RX, '') + '&hellip;'
	}
	helpers.var.plainDescription = newDesc;
})}}


<div class="listingItem item" data-recid="{{recId}}" data-type="event"  data-seo-title="{{:listing}}{{%listing.title}} | {{/listing}}{{%title}}" data-gtm-vars='{ "tClient_ga4": {"itemName": "{{%%title}}", "itemType": "listings", "itemCategory": "{{%%primary_category.catname}}", "itemSubcategory": "{{%%primary_category.subcatname}}"{{:recid}}, "itemId": "{{%%recid}}"{{/}}{{:acctid}}, "acctId": "{{%%acctid}}"{{/}}{{:city}}, "itemCity": "{{%%city}}"{{/}}{{:region}}, "itemRegion": "{{%%region}}"{{/}}} }'>
	<div class="inner">
		<div class="img-cont">
			{{~setVar("width", 640 )}}
			{{~setVar("height", 421)}}
			{{~setVar("aspectRatio", `${helpers.var.width} / ${helpers.var.height}`)}}
			<style>
				.listingItem .thumb-holder {
					aspect-ratio: 640 / 421;

					@media (min-width: 40em) {
						aspect-ratio: 240 / 180;
					}
				}
			</style>

			<a class="thumb-holder" href="{{%url}}" data-seo-detail-image style="aspect-ratio: {{~var.aspectRatio}};" data-gtm-click data-gtm-vars='{"tClient_ga4": {"eventName": "link_to_detail", "linkObject": "Image", "interactionUrl": "{{%%url}}"}}'>
				<picture>
					<source
						media="(min-width: 640px)"
						srcset="{{~var.image.getThumbnailUrl({ "height" : 180, "width" : 240, "crop" : "fill" })}}"
					/>
					<img class="thumb" src="{{~var.image.getThumbnailUrl({ "height" : 421, "width" : 640, "crop" : "fill" })}}" loading="lazy" fetchpriority="low" />
				</picture>
			</a>
		</div>
		<div class="content-section">
			<h4 class="item-title"><a href="{{%url}}" data-gtm-click data-gtm-vars='{"tClient_ga4": {"eventName": "link_to_detail", "linkObject": "Title", "interactionUrl": "{{%%url}}", "interactionText": "{{%%title}}"}}'>{{%title}}</a></h4>
			{{:~var.plainDescription}}
				<p class="item-desc">
					{{~var.plainDescription}}
				</p>
			{{/}}

			{{~fill(helpers.partial('listing_ta_snippet'), data)}}
		</div>
	</div>
</div>

{{/}}