{{~exec(function() {
	helpers.var.translations = {
		offers : data.translations.offers,
		leo : data.translations.leo
	}
	helpers.var.city = data.city;
	helpers.var.region = data.region;
})}}

{{#offer}}

{{~setVar("template", "offers_custom_offer_list_item")}}
{{~setVar("mainColumnClass", "large-9 medium-9")}}
{{~setVar("url", data.url)}}

{{~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="offerItem item" data-recid="{{recid}}" data-type="offer" data-qualityscore="{{qualityScore}}" data-gtm-vars='{ "tCore" : { "label" : "{{:listings}}{{%%listings.0.title}} - {{/listings}}{{%%title}}", "recid" : "{{recid}}", "row" : "{{@row}}", "globalRow" : "{{globalRow}}" }, "tClient_ga4" : { "itemType" : "offers", "itemName" : "{{%%title}}"{{:~var.city}}, "itemCity" : "{{%%~var.city}}"{{/}}{{:~var.region}}, "itemRegion" : "{{%%~var.region}}"{{/}} } }'>
	<div class="inner">
		<div class="img-cont">
			{{!-- Pre-allocates height of image using padding-bottom to prevent height changes on load --}}
			{{~setVar("width", 583 )}}
			{{~setVar("height", 367)}}
			<a class="thumb-holder" href="{{~var.url}}" data-gtm-click data-gtm-vars='{ "tCore" : { "action" : "{{~var.template}}_detail_image" }, "tClient_ga4" : { "eventName" : "link_to_detail", "linkObject" : "Image"{{:categories}}, "itemCategory" : "{{%%categories.0.categoryname}}"{{/}}, "interactionUrl" : "{{%%~var.url}}"{{:city}}, "itemCity" : "{{%%city}}"{{?:listings}}, "itemCity" : "{{%%listings.0.city}}"{{/}}{{:region}}, "itemRegion" : "{{%%region}}"{{?:listings}}, "itemRegion" : "{{%%listings.0.region}}"{{/}}{{:recid}}, "itemId" : "{{%%recid}}"{{/}}{{:acctid}}, "acctId" : "{{%%acctid}}"{{/}} } }' style="padding-bottom: {{~var.paddingBottom}}">
				<img
					class="thumb"
					src="{{~var.image.resource.getThumbnailUrl({ "height" : helpers.var.height, "width" : helpers.var.width, "crop" : "fill" })}}"
					loading="lazy"
					fetchpriority="low"
					width="512"
					height="322"
				/>
			</a>
		</div>
		<div class="content-section">
			<div class="content-section-inner">
				<ul class="tags">
					{{:udfs_object.1093.value}}
						<li class="tag">{{udfs_object.1093.value}}</li>
					{{/}}
				</ul>
				<h4><a class="listingDetail" href="{{~var.url}}" data-gtm-click data-gtm-vars='{ "tCore" : { "action" : "{{~var.template}}_detail_title" }, "tClient_ga4" : { "eventName" : "link_to_detail", "linkObject" : "Title"{{:categories}}, "itemCategory" : "{{%%categories.0.categoryname}}"{{/}}, "interactionUrl" : "{{%%~var.url}}", "interactionText" : "{{%%udfs_object.1097.value}}"{{:city}}, "itemCity" : "{{%%city}}"{{?:listings}}, "itemCity" : "{{%%listings.0.city}}"{{/}}{{:region}}, "itemRegion" : "{{%%region}}"{{?:listings}}, "itemRegion" : "{{%%listings.0.region}}"{{/}}{{:recid}}, "itemId" : "{{%%recid}}"{{/}}{{:acctid}}, "acctId" : "{{%%acctid}}"{{/}} } }'>{{udfs_object.1097.value}}</a></h4>
				<ul class="info-list">
					<li class="notranslate">
						<img
							src="/includes/client_public/assets/shared/icons/calendar-md-blue.svg"
							aria-hidden="true"
							alt=""
							fetchpriority="low"
							loading="lazy"
							width="24"
							height="24"
						/>
						{{!redeemstart}}{{!redeemend}}{{~var.translations.offers.always}}{{/redeemend}}{{/redeemstart}}
						{{:redeemstart}}{{:redeemend}}{{~plugins.clientMoment(data.redeemstart).format("LL")}} - {{~plugins.clientMoment(data.redeemend).format("LL")}}{{/redeemend}}{{/redeemstart}}
						{{:redeemstart}}{{!redeemend}}{{~var.translations.offers.starting}} {{~plugins.clientMoment(data.redeemstart).format("LL")}}{{/redeemend}}{{/redeemstart}}
						{{:redeemend}}{{!redeemstart}}{{~var.translations.offers.ending}} {{~plugins.clientMoment(data.redeemend).format("LL")}}{{/redeemstart}}{{/redeemend}}
					</li>
					{{:listings}}
						<li>
							<span class="notranslate">{{~var.translations.leo.locations}}:&nbsp;</span>
							{{#listings}}
								<a href="{{url}}" data-gtm-click data-gtm-vars='{ "tCore" : { "action" : "{{~var.template}}_venue_company" }, "tClient_ga4" : { "eventName" : "link_to_detail", "itemType" : "listings", "itemName" : "{{%%company}}", "linkObject" : "Link to Venue", "itemCategory" : "{{%%primary_category.catname}}", "itemSubcategory" : "{{%%primary_category.subcatname}}", "interactionUrl" : "{{%%url}}", "interactionText" : "{{%%company}}"{{:region}}, "itemRegion" : "{{%%region}}"{{/}}{{:city}}, "itemCity" : "{{%%city}}"{{/}}{{:recid}}, "itemId" : "{{%%recid}}"{{/}}{{:acctid}}, "acctId" : "{{%%acctid}}"{{/}} } }'>{{company}}</a>
								{{!@last}}, {{/@last}}
							{{/listings}}
						</li>
					{{/listings}}
					{{:distance}}
						<li class="distance notranslate">{{distance}} {{~var.translations.leo.miles_from_you}}</li>
					{{/distance}}
				</ul>
			</div>
			<footer class="slide-footer">
				<a href="{{~var.url}}" class="button-arrow translate" data-gtm-click data-gtm-vars='{ "tCore" : { "action" : "{{~var.template}}_detail_title" }, "tClient_ga4" : { "eventName" : "link_to_detail", "linkObject" : "Learn More"{{:categories}}, "itemCategory" : "{{%%categories.0.categoryname}}"{{/}}, "interactionUrl" : "{{%%~var.url}}", "interactionText" : "{{%%~var.translations.leo.read_more}}"{{:city}}, "itemCity" : "{{%%city}}"{{?:listings}}, "itemCity" : "{{%%listings.0.city}}"{{/}}{{:region}}, "itemRegion" : "{{%%region}}"{{?:listings}}, "itemRegion" : "{{%%listings.0.region}}"{{/}}{{:recid}}, "itemId" : "{{%%recid}}"{{/}}{{:acctid}}, "acctId" : "{{%%acctid}}"{{/}} } }'>{{~var.translations.leo.read_more}}</a>
			</footer>
		</div>
	</div>
</div>

{{/offer}}