{{#partial "page"}}
{{inject 'comparisons' comparisons}}
{{inject 'compareRemoveMessage' (lang 'compare.no_remove')}}
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
<h1 class="page-heading">{{lang 'compare.header' products=comparisons.length}}</h1>
<main class="page">
    <div class="page-content">

        <table class="compareTable">
            <tr class="compareTable-row">
                <th class="compareTable-heading"></th>
                {{#each comparisons}}
                <th class="compareTable-product">
                    <article class="card">
                        <figure class="card-figure">
                            <a class="card-figure__link" aria-label="{{name}}" href="{{url}}" data-event-type="product-click">
                                <div class="card-img-container">
                                    {{> components/common/responsive-img
                                        image=image
                                        class="card-image"
                                        fallback_size=../theme_settings.product_size
                                        lazyload=../theme_settings.lazyload_mode
                                        default_image=../theme_settings.default_image_product
                                    }}
                                </div>
                            </a>
                            <a class="compareTable-removeProduct" data-comparison-remove href="{{#if remove_url}}{{remove_url}}{{else}}#{{/if}}">
                                <svg class="icon">
                                    <use href="#icon-close"></use>
                                </svg>
                            </a>
                        </figure>
                        <div class="card-body">
                            {{#if brand.name}}
                                <p class="card-text"><a href="{{brand.url}}">{{ brand.name }}</a></p>
                            {{/if}}
                            <h3 class="card-title">
                                <a href="{{url}}">{{ name }}</a>
                            </h3>
                            {{#or ../customer (unless ../settings.hide_price_from_guests)}}
                                {{#if price_range}}
                                    {{> components/products/price-range}}
                                {{else}}
                                    {{> components/products/price price=price}}
                                {{/if}}
                            {{else}}
                                {{> components/common/login-for-pricing}}
                            {{/or}}
                        </div>
                    </article>
                </th>
                {{/each}}
            </tr>
            <tr class="compareTable-row">
                <th class="compareTable-heading"></th>
                {{#each comparisons}}
                    <td class="compareTable-action">
                        {{#if show_cart_action}}
                            {{#if has_options}}
                                <a href="{{url}}" data-event-type="product-click" class="button button--primary" data-product-id="{{id}}">{{lang 'products.choose_options'}}</a>
                            {{/if}}
                            {{#if pre_order}}
                                <a href="{{url}}" data-event-type="product-click" class="button button--primary" data-product-id="{{id}}">
                                    {{lang 'products.pre_order'}}
                                </a>
                            {{/if}}
                            {{#if add_to_cart_url}}
                                <a href="{{add_to_cart_url}}" data-event-type="product-click" class="button button--primary" data-product-id="{{id}}">
                                    {{lang 'products.add_to_cart'}}
                                </a>
                            {{/if}}
                            {{#if out_of_stock_message}}
                                <a href="{{url}}" class="button button--primary" data-product-id="{{id}}">{{out_of_stock_message}}</a>
                            {{/if}}
                        {{/if}}
                    </td>
                {{/each}}
            </tr>
            <tr class="compareTable-row">
                <th class="compareTable-heading">
                    <span class="compareTable-headingText">{{lang 'products.description'}}</span>
                </th>
                {{#each comparisons}}
                <td class="compareTable-item">{{{ summary }}}</td>
                {{/each}}
            </tr>
            {{#if settings.show_product_rating}}
                <tr class="compareTable-row">
                    <th class="compareTable-heading">
                        <span class="compareTable-headingText">{{lang 'products.reviews.rating_label'}}</span>
                    </th>
                    {{#each comparisons}}
                    <td class="compareTable-item">
                        {{#if rating}}
                            {{> components/products/ratings rating=rating}}
                        {{else}}
                            {{lang 'products.reviews.no_reviews'}}
                    {{/if}}
                    </td>
                    {{/each}}
                </tr>
            {{/if}}
            <tr class="compareTable-row">
                <th class="compareTable-heading">
                    <span class="compareTable-headingText">{{lang 'products.availability'}}</span>
                </th>
                {{#each comparisons}}
                <td class="compareTable-item">
                    {{#if availability}}
                        {{ availability }}
                    {{else}}
                        {{lang 'common.not_applicable'}}
                    {{/if}}
                </td>
                {{/each}}
            </tr>
            <tr class="compareTable-row">
                <th class="compareTable-heading">
                    <span class="compareTable-headingText">{{lang 'common.other_details'}}</span>
                </th>
                {{#each comparisons}}
                    <td class="compareTable-item">
                        {{#if custom_fields}}
                            <ul>
                                {{#each custom_fields}}
                                    <li>{{name}}: {{{value}}}</li>
                                {{/each}}
                            </ul>
                        {{else}}
                            {{lang 'common.not_applicable'}}
                        {{/if}}
                    </td>
                {{/each}}
            </tr>
        </table>

    </div>
</main>

{{/partial}}
{{> layout/base}}
