{{#each this.Restaurants}}
{{#ifCond @index "eq" 3}}
{{#if @root.CloOfferRestaurants}}
<div class="my-4 px-3 py-4 bg-sm-darkblue rounded-corners">
    <div class="row">
        <div class="col-12">
            <h3 class="text-white">Enjoy More Rewards</h3>
            <p class="small text-white">Collect more SquareMeal Reward Points at restaurants by simple dining. <a href="/rewards/" class="text-white">Find out more</a>.</p>
        </div>
        {{#each @root.CloOfferRestaurants}}
        {{#ifCond @index "lt" 3}}
        <div class="col-12 col-lg-4 mb-3 mb-lg-0">
            <div class="bg-white rounded-corners pb-3 h-100 position-relative">
                {{#ifCond TotalOfferCount "gt" 1}}
                <div class="listing-reward-offer" style="position:absolute; top:1rem; left:1rem;"><a href="{{ListingDetailPageURL}}" class="badge badge-featured mb-3 js-track-listing-click">more offers</a></div>
                {{/ifCond}}
                <a href="{{ListingDetailPageURL}}" class="js-track-listing-click"><img src="/images/placeholder-480x320.png" data-src="{{HeroImage}}?w=480&h=320&fit=crop" alt="{{Title}}" class="lazy" /></a>
                <div class="p-3">
                    <h4 class="mb-2"><a href="{{ListingDetailPageURL}}" class="js-track-listing-click">{{Title}}</a></h4>
                    {{#if SubTitle}}<div class="mb-4"><small><a href="{{ListingDetailPageURL}}" class="js-track-listing-click">{{SubTitle}}</a></small></div>{{/if}}
                    {{#if ExpiryDateText}}<small>{{ExpiryDateText}}</small><br />{{/if}}
                    {{#if UsedOnlyOnceText}}<small>{{UsedOnlyOnceText}}</small><br />{{/if}}
                    {{#if NewCustomerText}}<small>{{NewCustomerText}}</small>{{/if}}
                    <div class="mt-3"><a href="{{ListingDetailPageURL}}" class="js-track-listing-click"><strong>{{ListingName}}</strong></a></div>
                    <div class="small">{{#if Area}}{{Area}}, {{/if}}{{Postcode}}</div>
                </div>
            </div>
        </div>
        {{/ifCond}}
        {{/each}}
    </div>
</div>
{{/if}}
{{/ifCond}}
{{#ifCond @index "eq" 8}}
{{#if @root.CloOfferRestaurants}}
<!--IF there are only 2 restaurants show the second here-->
{{#ifCond @root.CloOfferRestaurants.Count "lt" 3}}
{{#each @root.CloOfferRestaurants}}
{{#ifCond @index "gteq" 1}}
{{#ifCond @index "lt" 2}}
<div class="bg-sm-darkblue text-white rounded-corners mb-3 position-relative">
    <div class="row align-items-center">
        <div class="col-md-4 col-lg-5">
            <div class="listing-image">
                <a href="{{ListingDetailPageURL}}" class="js-track-listing-click"><img src="/images/placeholder-480x320.png" data-src="{{HeroImage}}" alt="{{Title}}" class="rounded-corners lazy" /></a>
            </div>
        </div>
        <div class="col-md-8 col-lg-7">
            <div class="p-3">
                <div class="signpost text-white">REWARDS OFFER</div>
                <h4 class="mb-2"><a href="{{ListingDetailPageURL}}" class="js-track-listing-click text-white">{{Title}}</a></h4>
                {{#if SubTitle}}<div class="mb-4"><small><a href="{{ListingDetailPageURL}}" class="js-track-listing-click text-white">{{SubTitle}}</a></small></div>{{/if}}
                {{#if ExpiryDateText}}<small>{{ExpiryDateText}}</small><br />{{/if}}
                {{#if UsedOnlyOnceText}}<small>{{UsedOnlyOnceText}}</small><br />{{/if}}
                {{#if NewCustomerText}}<small>{{NewCustomerText}}</small>{{/if}}
                <div class="mt-3 "><a href="{{ListingDetailPageURL}}" class="js-track-listing-click text-white"><strong>{{ListingName}}</strong></a></div>
                <div class="small">{{#if Area}}{{Area}}, {{/if}}{{Postcode}}</div>
            </div>
        </div>
    </div>
</div>
{{/ifCond}}
{{/ifCond}}
{{/each}}
{{/ifCond}}
<!--IF there are at least 4 restaurants show the forth here -->
{{#ifCond @root.CloOfferRestaurants.Count "gt" 3}}
{{#each @root.CloOfferRestaurants}}
{{#ifCond @index "gteq" 3}}
{{#ifCond @index "lt" 4}}
<div class="bg-sm-darkblue text-white rounded-corners mb-3 position-relative">
    <div class="row align-items-center">
        <div class="col-md-4 col-lg-5">
            <div class="listing-image">
                <a href="{{ListingDetailPageURL}}" class="js-track-listing-click"><img src="/images/placeholder-480x320.png" data-src="{{HeroImage}}" alt="{{Title}}" class="rounded-corners lazy" /></a>
            </div>
        </div>
        <div class="col-md-8 col-lg-7">
            <div class="p-3">
                <div class="signpost text-white">REWARDS OFFER</div>
                <h4 class="mb-2"><a href="{{ListingDetailPageURL}}" class="js-track-listing-click text-white">{{Title}}</a></h4>
                {{#if SubTitle}}<div class="mb-4"><small><a href="{{ListingDetailPageURL}}" class="js-track-listing-click text-white">{{SubTitle}}</a></small></div>{{/if}}
                {{#if ExpiryDateText}}<small>{{ExpiryDateText}}</small><br />{{/if}}
                {{#if UsedOnlyOnceText}}<small>{{UsedOnlyOnceText}}</small><br />{{/if}}
                {{#if NewCustomerText}}<small>{{NewCustomerText}}</small>{{/if}}
                <div class="mt-3 "><a href="{{ListingDetailPageURL}}" class="js-track-listing-click text-white"><strong>{{ListingName}}</strong></a></div>
                <div class="small">{{#if Area}}{{Area}}, {{/if}}{{Postcode}}</div>
            </div>
        </div>
    </div>
</div>
{{/ifCond}}
{{/ifCond}}
{{/each}}
{{/ifCond}}
{{/if}}
{{/ifCond}}
{{#ifCond @index "eq" 12}}
{{#each @root.CloOfferRestaurants}}
{{#ifCond @index "gteq" 4}}
{{#ifCond @index "lt" 5}}
<div class="bg-sm-darkblue text-white rounded-corners mb-3 position-relative">
    <div class="row align-items-center">
        <div class="col-md-4 col-lg-5">
            <div class="listing-image">
                <a href="{{ListingDetailPageURL}}" class="js-track-listing-click"><img src="/images/placeholder-480x320.png" data-src="{{HeroImage}}" alt="{{Title}}" class="rounded-corners lazy" />></a>
            </div>
        </div>
        <div class="col-md-8 col-lg-7">
            <div class="p-3">
                <div class="signpost text-white">REWARDS OFFER</div>
                <h4 class="mb-2"><a href="{{ListingDetailPageURL}}" class="js-track-listing-click text-white">{{Title}}</a></h4>
                {{#if SubTitle}}<div class="mb-4"><small><a href="{{ListingDetailPageURL}}" class="js-track-listing-click text-white">{{SubTitle}}</a></small></div>{{/if}}
                {{#if ExpiryDateText}}<small>{{ExpiryDateText}}</small><br />{{/if}}
                {{#if UsedOnlyOnceText}}<small>{{UsedOnlyOnceText}}</small><br />{{/if}}
                {{#if NewCustomerText}}<small>{{NewCustomerText}}</small>{{/if}}
                <div class="mt-3 "><a href="{{ListingDetailPageURL}}" class="js-track-listing-click text-white"><strong>{{ListingName}}</strong></a></div>
                <div class="small">{{#if Area}}{{Area}}, {{/if}}{{Postcode}}</div>
            </div>
        </div>
    </div>
</div>
{{/ifCond}}
{{/ifCond}}
{{/each}}
{{/ifCond}}
{{#ifCond @index "eq" 7}}
<!-- /75272510/Leaderboard -->
<div id='div-gpt-ad-1547985195485-0' class="mb-3 text-center text-lg-left">
    <script>
        googletag.cmd.push(function () { googletag.display('div-gpt-ad-1547985195485-0'); });
    </script>
</div>
{{/ifCond}}
{{#ifCond @index "eq" 13}}
<!-- /75272510/Leaderboard -->
<div id='div-gpt-ad-1547985195485-1' class="mb-3 text-center text-lg-left">
    <script>
        googletag.cmd.push(function () { googletag.display('div-gpt-ad-1547985195485-1'); });
    </script>
</div>
{{/ifCond}}
<div class="listing-card mb-3 listing-{{toLowerCase ListingLevelName}}" data-position="{{getPositionIndex @index}}" data-restaurant-id="{{Id}}" data-lisiting-level="{{ListingLevelId}}">
    <div class="row">
        <div class="col-md-4 col-lg-5">
            <div class="listing-image">
                <a href="{{DetailPageURL}}" class="js-track-listing-click"><img src="/images/placeholder-518x345.png" data-src="{{getPrimaryImage Images}}?w=518&h=345&fit=crop" width="518" height="345" alt="{{Name}}" class="lazy" /></a>
                {{#ifCond ListingLevelName "eq" "Premium"}}
                <div class="row sm-gutters mt-1">
                    {{#each Images}}
                    {{#ifCond @index "gt" 0}}
                    <div class="col-4">
                        <a href="{{../../DetailPageURL}}" class="js-track-listing-click"><img src="/images/placeholder-200x133.png" data-src="{{Path}}?w=200&h=133&fit=crop" width="200" height="133" alt="{{../../Name}}" class="lazy" /></a>
                    </div>
                    {{/ifCond}}
                    {{/each}}
                </div>
                {{/ifCond}}
                {{#if IsCloSignedUp}}
                {{#if BestDealOfferTitle}}
                {{#ifCond BestDealOfferTitle.Title "nteq" ""}}<div class="listing-reward-offer btn btn-dark"><img data-src="/images/rewards/rewards-stars.png" alt="*" class="listing-reward-icon lazy" />{{BestDealOfferTitle.Title}}</div>{{/ifCond}}{{/if}}{{/if}}
                <div class="listing-save">{{#if IsShortlisted}}<a class="shortlisted lnkShortlist" data-id="{{Id}}"><i class="fa fa-heart" style="font-size:20px;"></i></a>{{else}}<a class="not-shortlisted lnkShortlist" data-id="{{Id}}"><i class="fa fa-heart-o" style="font-size:20px;"></i></a>{{/if}}</div>
            </div>
        </div>
        <div class="col-md-8 col-lg-7">
            <div class="d-flex flex-column h-100 p-3 py-md-3 pl-md-0 pr-md-3">
                <div class="flex-grow-1">
                    {{#ifCond ListingLevelName "eq" "Premium"}}
                    <a href="{{DetailPageURL}}" class="badge badge-featured mb-3 js-track-listing-click">{{ListingLevelName}} Listing</a>
                    {{/ifCond}}
                    <h3 class="h4 mb-1"><a class="js-track-listing-click" href="{{DetailPageURL}}">{{Name}}</a></h3>
                    {{#if Reviews.TotalRecord}}<div class="text-uppercase text-muted small mb-4">{{getReviewsStar Reviews.TotalRecord "review-star small" "span"}}</div>{{/if}}
                    {{#if City}}<div class="d-inline-block text-muted small mr-2 mb-2">{{City}}{{#if PostCode}}, {{PostCode}}{{/if}}</div>
                    {{else if Region}}<div class="d-inline-block text-muted small mr-2 mb-2">{{Region}}{{#if PostCode}}, {{PostCode}}{{/if}}</div>{{/if}}
                    {{#if Distance}}<span class="d-inline-block text-muted small mb-2 lblDistance hide">{{displayDistance Distance 1}} {{SearchedLocation}}</span>{{/if}}
                    <div class="tags mb-2">
                        {{#if SquareMealRating}}<a href="{{DetailPageURL}}" class="badge badge-pill mr-1 js-track-listing-click">{{getSquareMealRatings SquareMealRating}}</a>{{/if}}
                        {{#ifCond OfferCount "gt" 0}}<a href="{{DetailPageURL}}" class="badge badge-pill badge-active mr-1 js-track-listing-click" title="Offers available">Offers available</a>{{/ifCond}}
                        {{#each Facets }}<a href="{{../DetailPageURL}}" class="badge badge-pill mr-1 js-track-listing-click" title="{{this}}">{{this}}</a>{{/each}}
                    </div>
                    {{#if SquareMealReview}}
                    <div class="mb-0 font-weight-bold small">What we think</div>
                    <div class="restaurant-description small mb-4">"{{{trimString SquareMealReview 155}}}" <a href="{{DetailPageURL}}" class="js-track-listing-click">Read our full review</a></div>
                    {{else if Description}}
                    <div class="restaurant-description small mb-4">{{{trimString Description 160}}} <a href="{{DetailPageURL}}" class="js-track-listing-click">Find out more</a></div>
                    {{/if}}
                </div>
                <div>
                    <a class="btn btn-primary btn-sm d-block d-md-inline-block js-track-listing-click" href="{{DetailPageURL}}">Book now</a>
                </div>
            </div>
        </div>
    </div>
</div>
{{/each}}