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

        {{!-- 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 productImageName}}
                        <img src="{{productImageName}}_1x1w320.{{productImageFileType}}" title="{{productName}}" alt="{{productName}}"/>
                    {{/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="{{productName}}">
                <a href="{{detailPageUrl}}" class="textlink">{{productName}}</a>
            </h3>

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

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

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

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

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