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

{{#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}}"} }'>
	<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="{{~var.url}}" data-gtm-click data-gtm-vars='{ "tCore" : { "action" : "{{~var.template}}_detail_image" }, "tClient_ga4" : {"eventName" : "link_to_detail", "linkObject" : "Image", "itemCategory" : "{{%%categories.0.categoryname}}", "interactionUrl" : "{{%%url}}"{{:region}}, "itemRegion" : "{{%%region}}"{{/}}{{:city}}, "itemCity" : "{{%%city}}"{{/}}{{: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" })}}" />
			</a>
		</div>
		<div class="content-section">
			<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", "itemCategory" : "{{%%categories.0.categoryname}}", "interactionUrl" : "{{%%url}}", "interactionText" : "{{%%title}}"{{:region}}, "itemRegion" : "{{%%region}}"{{/}}{{:city}}, "itemCity" : "{{%%city}}"{{/}}{{:recid}}, "itemId" : "{{%%recid}}"{{/}}{{:acctid}}, "acctId" : "{{%%acctid}}"{{/}} } }'>{{title}}</a></h4>
			<ul class="info-list">
				<li>
					<span>{{~var.translations.offers.valid}}:&nbsp;</span>
					{{!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>{{~var.translations.leo.locations}}:&nbsp;</span>
						{{#listings}}
							<a href="{{url}}" data-gtm-click data-gtm-vars='{ "tCore" : { "action" : "{{~var.template}}_venue_company" } }'>{{company}}</a>
							{{!@last}}, {{/@last}}
						{{/listings}}
					</li>
				{{/listings}}
				{{:categories}}
					<li>
						<span>{{~var.translations.leo.categories}}:&nbsp;</span>
						{{#categories}}
							{{categoryname}}{{!@last}}, {{/@last}}
						{{/categories}}
					</li>
				{{/categories}}
				{{:distance}}
					<li class="distance">{{distance}} {{~var.translations.leo.miles_from_you}}</li>
				{{/distance}}
			</ul>
			<div class="shared-action-items">
				{{:~plugins.sv_site.siteConfig.plugins.tripbuilder.active}}<div class="trip-builder" data-tb-button data-tb-recid="{{recid}}" data-tb-type="offers" data-gtm-vars='{ "tClient_ga4" : { "itemCategory" : "{{%%categories.0.categoryname}}"{{:region}}, "itemRegion" : "{{%%region}}"{{/}}{{:city}}, "itemCity" : "{{%%city}}"{{/}}{{:recid}}, "itemId" : "{{%%recid}}"{{/}}{{:acctid}}, "acctId" : "{{%%acctid}}"{{/}} } }'></div>{{/}}
			</div>
		</div>
	</div>
</div>

{{/offer}}