{{~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
		})
	};
	helpers.var.tbActive = helpers.plugins.sv_site.siteConfig.custom[helpers.plugins.sv_site.site].tripbuilder.active;
	if (data.custom.categorydates && data.custom.categorydates[0]) {

		helpers.var.redeemstart = data.custom.categorydates[0].redeemstart;
	} 
	// Format the dates
	if (data.custom.categorydates && data.custom.categorydates[0]) {
		const redeemstart = data.custom.categorydates[0].redeemstart;
		const redeemend = data.custom.categorydates[0].redeemend;
		helpers.var.redeemstartFormatted = helpers.plugins.moment(redeemstart).format("LL");
		helpers.var.redeemendFormatted = helpers.plugins.moment(redeemend).format("LL");
	}
})}}

<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">
			<!-- {{:~var.tbActive}}<div class="trip-builder" data-tb-button data-tb-recid="{{recid}}" data-tb-type="offers" data-gtm-vars='{ "tClient_ga4" : { "itemType" : "offers"{{:categories}}, "itemCategory" : "{{%%categories.0.categoryname}}"{{/}}{{:region}}, "itemRegion" : "{{%%region}}"{{/}}{{:city}}, "itemCity" : "{{%%city}}"{{/}}{{:recid}}, "itemId" : "{{%%recid}}"{{/}}{{:acctid}}, "acctId" : "{{%%acctid}}"{{/}} } }'></div>{{/}} -->
			
			{{!-- Pre-allocates height of image using padding-bottom to prevent height changes on load --}}
			{{~setVar("width", 342 )}}
			{{~setVar("height", 185)}}
			{{~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"{{:categories}}, "itemCategory" : "{{%%categories.0.categoryname}}"{{/}}, "interactionUrl" : "{{%%~var.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" })}}" loading="lazy" fetchpriority="low" />
			<!-- </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"{{:categories}}, "itemCategory" : "{{%%categories.0.categoryname}}"{{/}}, "interactionUrl" : "{{%%~var.url}}", "interactionText" : "{{%%title}}"{{:region}}, "itemRegion" : "{{%%region}}"{{/}}{{:city}}, "itemCity" : "{{%%city}}"{{/}}{{:recid}}, "itemId" : "{{%%recid}}"{{/}}{{:acctid}}, "acctId" : "{{%%acctid}}"{{/}} } }'>{{title}}</a></h4> -->
			<ul class="info-list">
				<li>
					{{:~var.redeemstart}}
					<span>{{~var.translations.offers.valid}}:&nbsp;</span>
					
						{{~var.redeemstartFormatted}} - {{~var.redeemendFormatted}}
					{{/}}
				</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" }, "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}}"{{/}}{{:rankname}}, "itemVariant" : "{{%%rankname}}"{{/}}{{:custom.price}}, "price" : "{{%%custom.price}}"{{?:price}}, "price" : "{{%%price}}"{{/}} } }'>{{company}}</a>
							{{!@last}}, {{/@last}}
						{{/listings}}
					</li>
				{{/listings}}
				{{:categories}}
					<li>
						<span>{{~var.translations.leo.categories}}:&nbsp;</span>
						{{#categories}}
							{{categoryname}}{{!@last}}, {{/@last}}
						{{/categories}}
					</li>
				{{/categories}}
				{{:description}}
                    <div class="offer-description core-styles">
                    	<span><strong>Details &nbsp;</strong></span>
                        {{description}}
                    </div>
                {{/description}}
				{{:distance}}
					<li class="distance">{{distance}} {{~var.translations.leo.miles_from_you}}</li>
				{{/distance}}
			</ul>
		</div>
	</div>
</div>

{{/offer}}