{{!-- 
    List of product tiles in the used product finder
    
    Related JS module(s): productFinderModuleNew.js
--}}
{{#each this}}
    <div class="product-tile product-tile--used product-tile--lazyloaded" data-product-id="{{id}}">

        {{!-- WRAPPER FOR THE LHS IMAGE --}}
        <div class="product-tile__image-wrapper">
            <a class="product-image" href="{{detailPageUrl}}">
                <div class="image-wrapper image-wrapper-1x1">
                    {{#if productImageUrl}}
                        <img src="{{productImageUrl}}" title="{{productName}}" alt="{{productName}}"/>
                    {{/if}}
                    {{#if isApproved}}
                    <div class="product-tile__approved-wrapper">
                        <img src="{{approvedImgUrl}}" title="" alt=""/>
                    </div>
                    {{/if}}
                </div>
            </a>
        </div>
        {{!-- /WRAPPER FOR THE LHS IMAGE --}}

        {{!-- WRAPPER FOR THE LHS DETAILS --}}
        <div class="product-tile__details-wrapper">

            <a class="btn__link" href="#">
                <div class="btn btn--icon no-background"><span class="icon icon-LMHIconsaddpinblack"></span></div>
            </a>
            <h3 class="small" title="{{name}}">
                <a href="{{detailPageUrl}}" class="textlink">{{name}}</a>
            </h3>

            {{!-- Product details wrapper part for new/rental products --}}
            {{#if isUsed}}
            <div>
                {{#if loadCapacity}}
                    <div title="{{uiTexts.capacity}}: {{loadCapacity}}">
                        <span class="icon icon-LMHloadcapacityblack"></span>
                        <span>{{loadCapacity}}</span>
                    </div>
                {{/if}}

                {{#if liftHeight}}
                    <div title="{{uiTexts.liftHeight}}: {{liftHeight}}">
                        <span class="icon icon-LMHheightblack"></span>
                        <span>{{liftHeight}}</span>
                    </div>
                {{/if}}

                {{#if price}}
                    <div title="{{uiTexts.price}}: {{price}}">
                        <span class="icon icon-LMHpriceblack"></span>
                        <span class="usedproductPrice">{{price}}</span>
                    </div>
                {{/if}}

                {{#if qualityRating}}
                    <div class="product-tile__details-wrapper__qualityrating" title="{{uiTexts.qualityRating}}: {{qualityRating}}">
                        <span class="icon icon-LMHIcontaskslistblack"></span>
                        {{#if qualityRatingNotNull}}
                            <span>{{qualityRating}}</span>
                        {{/if}}
                    </div>
                {{/if}}

                {{#if icon}}
                    <div class="product-tile__details-wrapper__icon" data-tooltip="{{tooltip}}">
                        <span class="icon {{icon}}"></span>
                    </div>
                {{/if}}

            </div>
            {{/if}}
            {{!-- /Product details wrapper part for new/rental products --}}

        </div>
        {{!-- /WRAPPER FOR THE LHS DETAILS --}}
    </div>
{{/each}}