{{~exec(function() {

	helpers.var.t = {
		listings : data.translations.listing,
		leo : data.translations.leo
	}
})}}

{{%relatedlistingids}}

{{~exec(function() {



	var url;

	if (data.media && data.media[0]) {
		url = data.media[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="relatedItem item {{:featured}}featured{{/featured}}" data-listingid="{{%recId}}" data-recid="{{%recId}}" data-type="{{:listings}}" data-seo-listing data-seo-title="{{:relatedlistingids}}{{%%relatedlistingids.0.title}} | {{/relatedlistingids}}{{%%title}}">
	<div class="inner">
		<div class="img-cont">
			{{!-- 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" : { "eventAction" : "Link to Event Detail", "eventLabel" : "{{:listings}}{{%%listings.title}} | {{/listings}}{{%%title}}", "nonInteraction" : 0 } }'>
				<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" : { "eventAction" : "Link to Event Detail", "eventLabel" : "{{:listings}}{{%%listings.title}} | {{/listings}}{{%%title}}", "nonInteraction" : 0 } }'>{{%title}}</a></h4>
		</div>

	</div>
</div>

{{/relatedlistingids}}