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

{{#tour}}
    {{~exec(() => {
        helpers.var.imageUrl = helpers.plugins.cloudinary.createResource({imageUrl : data.images[0].url}).getThumbnailUrl({width : 414, height : 275, crop : 'fill', sv : {gravity : 'focalPoint'}});
        if (data.description) {
            let formattedDesc = helpers.plugins.stringLib.stripHtml(data.description);
            helpers.var.formattedDesc = helpers.plugins.stringLib.substringOnWord(formattedDesc, 180, {ellipsis : true});
        }
        if (data.rating) {
            let roundedRating = parseFloat(data.rating.toFixed(1));
            let totalStars = Math.floor(roundedRating);
            let partialStars = parseFloat(roundedRating - totalStars).toFixed(1);
            if (partialStars > 0.5) totalStars += 1;
            let fullStar = `<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="starIcon__1q2X md__RYCy"><path clip-rule="evenodd" d="M7.5 0a.77.77 0 00-.701.456L5.087 4.083a.785.785 0 01-.588.448l-3.827.582a.828.828 0 00-.433 1.395L3.008 9.33c.185.192.269.46.225.724l-.654 3.987a.809.809 0 00.77.958.751.751 0 00.364-.096l3.423-1.882a.752.752 0 01.728 0l3.423 1.882a.75.75 0 00.363.096.809.809 0 00.771-.958l-.654-3.987a.841.841 0 01.225-.724l2.77-2.823a.828.828 0 00-.434-1.396l-3.827-.581a.785.785 0 01-.589-.448L8.201.456A.77.77 0 007.5 0z"></path></svg>`;
            let emptyStar = `<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="starIcon__1q2X md__RYCy"><path clip-rule="evenodd" d="M7.5 1.167l1.565 3.317c.242.52.728.885 1.295.974l3.583.544-2.62 2.673a1.782 1.782 0 00-.48 1.532l.609 3.718L8.315 12.2a1.689 1.689 0 00-1.63 0l-3.137 1.725.61-3.718a1.782 1.782 0 00-.481-1.532L1.056 6.002l3.583-.544a1.72 1.72 0 001.296-.974L7.5 1.167zM7.5 0a.77.77 0 00-.701.456L5.087 4.083a.785.785 0 01-.588.448l-3.827.582a.828.828 0 00-.434 1.395l2.77 2.823c.185.192.269.46.224.724l-.653 3.987a.809.809 0 00.77.958.751.751 0 00.364-.096l3.423-1.882a.752.752 0 01.728 0l3.422 1.882a.75.75 0 00.364.096.809.809 0 00.77-.958l-.653-3.987a.841.841 0 01.225-.724l2.769-2.823a.828.828 0 00-.433-1.396L10.5 4.531a.785.785 0 01-.589-.448L8.201.456A.77.77 0 007.5 0z"></path></svg>`;
            let halfStar = `<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="starIcon__1q2X md__RYCy"><path clip-rule="evenodd" d="M14.761 6.507a.828.828 0 00-.433-1.395L10.5 4.53a.785.785 0 01-.589-.447L8.201.456a.767.767 0 00-1.402 0L5.087 4.083a.785.785 0 01-.588.447l-.582.089-3.245.493a.828.828 0 00-.433 1.395l2.769 2.824c.185.192.269.46.225.724l-.654 3.987a.808.808 0 00.77.958.752.752 0 00.364-.096l3.423-1.883a.752.752 0 01.728 0l3.423 1.883a.75.75 0 00.363.096.808.808 0 00.771-.958l-.654-3.987a.841.841 0 01.225-.724l2.77-2.824zm-3.438 2.167a1.782 1.782 0 00-.48 1.532l.609 3.719L8.315 12.2c-.25-.138-.53-.21-.815-.21V1.166l1.565 3.317c.242.52.728.886 1.295.974l3.584.545-2.621 2.672z"></path></svg>`;
            let totalStarsArr = [];
            for (let i = 0; i < totalStars; i++) {
                totalStarsArr.push(fullStar);
            }
            let testArr = [];
            for (let i = 0; i < 3; i++) {
                testArr.push(fullStar);
            }
            if (totalStars < 5) {
                if (partialStars === 0.5) totalStarsArr.push(halfStar);
                let emptyStars = 5 - totalStarsArr.length;
                for (let i = 0; i < emptyStars; i++) {
                    totalStarsArr.push(emptyStar);
                }
            }
            helpers.var.totalStarsArr = totalStarsArr.join('');
        }
    })}}
    <div class="tourItem item" data-type="listing" data-gtm-vars='{ "tCore" : { "label" : "{{%%name}}" }, "tClient_viator" : { "eventName" : "partner_referral", "referralType" : "tickets", "value" : 5, "tourName" : "{{%%name}}"{{:product_id}}, "tourId" : "{{%%product_id}}"{{/}}{{:price_from}}, "tourPrice" : "{{%%price_from}}"{{/}}{{:supplier_name}}, "tourSupplier" : "{{%%supplier_name}}"{{/}}{{:rating}}, "tourRating" : "{{%%rating}}"{{/}} } }'>
        <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="{{url}}" style="padding-bottom: {{~var.paddingBottom}}" data-gtm-click data-gtm-vars='{ "tClient_viator" : { "linkObject" : "Image", "interactionUrl" : "{{:rawUrl}}{{%%rawUrl}}{{?}}{{%%url}}{{/}}" } }'>
                    <img class="thumb" src="{{~var.imageUrl}}" loading="lazy" fetchpriority="low" />
                </a>
            </div>
            <div class="content-section">
                <h4><a class="listingDetail" href="{{url}}" data-gtm-click data-gtm-vars='{ "tClient_viator" : { "linkObject" : "Title", "interactionUrl" : "{{:rawUrl}}{{%%rawUrl}}{{?}}{{%%url}}{{/}}", "interactionText" : "{{%%name}}" } }'>{{name}}</a></h4>
                <ul class="info-list">
                    {{:price_from}}
                        <li>
                            <span>From: ${{price_from}}</span>
                        </li>
                    {{/}}
                    {{:rating}}
                        <li class="rating">
                            {{~var.totalStarsArr}}
                        </li>
                    {{/}}
                    {{:description}}
                        <li>
                            <p class="desc">{{~var.formattedDesc}}</p>
                        </li>
                    {{/}}
                </ul>
                <div class="shared-action-items">
                    {{:url}}
                        <a href="{{url}}" target="_blank" data-gtm-click data-gtm-vars='{ "tClient_viator" : { "linkObject" : "Buy Tickets", "interactionUrl" : "{{:rawUrl}}{{%%rawUrl}}{{?}}{{%%url}}{{/}}", "interactionText" : "{{%%~var.translations.leo.buy_tickets}}" } }'>{{~var.translations.leo.buy_tickets}}</a>
                    {{/}}
                </div>
            </div>
        </div>
    </div>

{{/tour}}