{{!-- 
    Represents a single product detail row in the modal product compare dialouge (product finder)

    Is embedded in productfinder-compare-modal.hbs
    
    Related JS module(s): productFinderModuleNew.js
--}}
<div class="comparemodal__verticalscrollwrapper">
    <div class="comparemodal__cutwrapper">
         {{!-- Fixed scrollwrapper displays the first column with the product's property names + icons (as they should be also visible when scrolled) 
        and serves as "shadow" table for width and height calculation purposes. Cells with property values and product images are set invisible--}}
        <div class="comparemodal__scrollwrapper comparemodal__scrollwrapper--fixed">
            <table data-compare-items="{{sliderItemsCount}}">

                <tr>
                    <th><!-- Empty placeholder cell --></th>
                    {{#each products}}
                        <td data-product-id="{{productGroupId}}">
                            <a href="#123" class="btn__link comparemodal__remove-product-button" data-product-id="{{productGroupId}}"><div class="btn btn--icon"><span class="icon icon-LMHIconclosecancelblack"></span></div></a>
                            {{#if productImageName}}
                            <img src="{{productImageName}}_1x1w320.{{productImageFileType}}" title="{{productName}}" alt="{{productName}}"/>{{/if}}
                            {{#if productName}}
                                <div>{{productName}}</div>{{/if}}
                        </td>
                    {{/each}}
                </tr>
                <tr title="{{uiTexts.productType}}">
                    <th>
                        <span class="icon icon-LMHproducttypeblack"></span><span>{{uiTexts.productType}}</span>
                    </th>
                    {{#each products}}
                        <td data-product-id="{{productGroupId}}">{{#if productType}}{{productType}}{{/if}}</td>
                    {{/each}}
                </tr>
                <tr title="{{uiTexts.capacity}}">
                    <th>
                        <span class="icon icon-LMHloadcapacityblack"></span><span>{{uiTexts.capacity}}</span>
                    </th>
                    {{#each products}}
                        <td data-product-id="{{productGroupId}}">{{#if capacity}}{{capacity}}{{/if}}</td>
                    {{/each}}
                </tr>
                <tr title="{{uiTexts.liftHeight}}">
                    <th>
                        <span class="icon icon-LMHheightblack"></span><span>{{uiTexts.liftHeight}}</span>
                    </th>
                    {{#each products}}
                        <td data-product-id="{{productGroupId}}">{{#if liftHeight}}{{liftHeight}}{{/if}}</td>
                    {{/each}}
                </tr>
                <tr title="{{uiTexts.serviceWeight}}">
                    <th>
                        <span class="icon icon-LMHIconforkliftblack"></span><span>{{uiTexts.serviceWeight}}</span>
                    </th>
                    {{#each products}}
                        <td data-product-id="{{productGroupId}}">{{#if serviceWeight}}{{serviceWeight}}{{/if}}</td>
                    {{/each}}
                </tr>
                <tr title="{{uiTexts.dimensions}}">
                    <th>
                        <span class="icon icon-LMHIconvnakblack"></span><span>{{uiTexts.dimensions}}</span>
                    </th>
                    {{#each products}}
                        <td data-product-id="{{productGroupId}}">
                                <ul>
                                    {{#if dimensions_width}}<li>{{dimensions_width}}</li>{{/if}}
                                    {{#if dimensions_length}}<li>{{dimensions_length}}</li>{{/if}}
                                </ul>
                        </td>
                    {{/each}}
                </tr>
                <tr title="{{uiTexts.features}}">
                    <th>
                        <span class="icon icon-LMHIconvnakblack"></span><span>{{uiTexts.features}}</span>
                    </th>
                    {{#each products}}
                        <td data-product-id="{{productGroupId}}">
                            <ul>
                                {{#each feature}}
                                    <li>{{this}}</li>
                                {{/each}}
                            </ul>
                        </td>
                    {{/each}}
                </tr>
            </table>
        </div>
        {{!-- Scrolled scrollwrapper displays the table data (product image and property values) --}}
        <div class="comparemodal__scrollwrapper comparemodal__scrollwrapper--scrolled">
            <table data-compare-items="{{sliderItemsCount}}">

                <tr>
                    <th><!-- Empty placeholder cell --></th>
                    {{#each products}}
                        <td data-product-id="{{productGroupId}}">
                            <a href="#123" class="btn__link comparemodal__remove-product-button" data-product-id="{{productGroupId}}"><div class="btn btn--icon"><span class="icon icon-LMHIconclosecancelblack"></span></div></a>
                            {{#if productImageName}}
                            <img src="{{productImageName}}_1x1w320.{{productImageFileType}}" title="{{productName}}" alt="{{productName}}"/>{{/if}}
                            {{#if productName}}
                                <div>{{productName}}</div>{{/if}}
                        </td>
                    {{/each}}
                </tr>
                <tr title="{{uiTexts.productType}}">
                    <th>
                        <span class="icon icon-LMHproducttypeblack"></span><span>{{uiTexts.productType}}</span>
                    </th>
                    {{#each products}}
                        <td data-product-id="{{productGroupId}}">{{#if productType}}{{productType}}{{/if}}</td>
                    {{/each}}
                </tr>
                <tr title="{{uiTexts.capacity}}">
                    <th>
                        <span class="icon icon-LMHloadcapacityblack"></span><span>{{uiTexts.capacity}}</span>
                    </th>
                    {{#each products}}
                        <td data-product-id="{{productGroupId}}">{{#if capacity}}{{capacity}}{{/if}}</td>
                    {{/each}}
                </tr>
                <tr title="{{uiTexts.liftHeight}}">
                    <th>
                        <span class="icon icon-LMHheightblack"></span><span>{{uiTexts.liftHeight}}</span>
                    </th>
                    {{#each products}}
                        <td data-product-id="{{productGroupId}}">{{#if liftHeight}}{{liftHeight}}{{/if}}</td>
                    {{/each}}
                </tr>
                <tr title="{{uiTexts.serviceWeight}}">
                    <th>
                        <span class="icon icon-LMHIconforkliftblack"></span><span>{{uiTexts.serviceWeight}}</span>
                    </th>
                    {{#each products}}
                        <td data-product-id="{{productGroupId}}">{{#if serviceWeight}}{{serviceWeight}}{{/if}}</td>
                    {{/each}}
                </tr>
                <tr title="{{uiTexts.dimensions}}">
                    <th>
                        <span class="icon icon-LMHIconvnakblack"></span><span>{{uiTexts.dimensions}}</span>
                    </th>
                    {{#each products}}
                        <td data-product-id="{{productGroupId}}">
                                <ul>
                                    {{#if dimensions_width}}<li>{{dimensions_width}}</li>{{/if}}
                                    {{#if dimensions_length}}<li>{{dimensions_length}}</li>{{/if}}
                                </ul>
                        </td>
                    {{/each}}
                </tr>
                <tr title="{{uiTexts.features}}">
                    <th>
                        <span class="icon icon-LMHIconvnakblack"></span><span>{{uiTexts.features}}</span>
                    </th>
                    {{#each products}}
                        <td data-product-id="{{productGroupId}}">
                            <ul>
                                {{#each feature}}
                                    <li>{{this}}</li>
                                {{/each}}
                            </ul>
                        </td>
                    {{/each}}
                </tr>
            </table>
        </div>
    </div>
</div>
{{!-- Scroll buttons --}}
<div class="comparemodal__scrollbuttons">
    <button type="button"
            class="btn btn--carousel-prev btn--icon"><span class="icon icon-LMHIconleftblack"></span>
    </button>
    <button type="button"
            class="btn btn--carousel-next btn--icon"><span class="icon icon-LMHIconrightblack"></span>
    </button>
</div>