<div class="previewCartWrapper">
  <div class="previewCart">
    {{#if cart.items.length}}
        <ul class="previewCartList">
            {{#each (limit cart.items 4)}}
                <li class="previewCartItem">
                    <div class="previewCartItem-image">
                        {{#if type '==' 'GiftCertificate'}}
                            <img
                                alt="GiftCertificate"
                                title="GiftCertificate"
                                src="{{cdn ../theme_settings.default_image_gift_certificate}}"
                            >
                        {{else}}
                            {{> components/common/responsive-img
                                image=image
                                fallback_size=../theme_settings.productthumb_size
                                lazyload=../theme_settings.lazyload_mode
                                default_image=../theme_settings.default_image_product
                            }}
                        {{/if}}
                    </div>
                        <div class="previewCartItem-content">
                            <span class="previewCartItem-brand">
                                {{brand.name}}
                            </span>

                            <h6 class="previewCartItem-name">
                                <a href="{{url}}" alt="{{name}}" title="{{name}}">{{name}}</a>
                            </h6>

                            <span class="previewCartItem-price">
                                {{#if quantity '>' 1}}
                                    {{quantity}} &times;
                                {{/if}}
                                {{#or ../customer (unless ../settings.hide_price_from_guests) (if type '==' 'GiftCertificate')}}
                                    <span{{#if price_discounted}} class="price--discounted"{{/if}}>{{price.formatted}}</span>
                                    {{#if price_discounted}}
                                        {{price_discounted.formatted}}
                                    {{/if}}
                                {{else}}
                                    {{> components/common/login-for-pricing}}
                                {{/or}}
                            </span>
                        </div>
                    </li>
                {{/each}}
            </ul>
            {{{cart.preview_payment_widget}}}
            <div class="previewCartAction">
                {{#if cart.show_primary_checkout_button}}
                    <div class="previewCartAction-checkout">
                        <a
                                href="{{urls.checkout.single_address}}"
                                class="button button--small button--primary"
                                data-primary-checkout-now-action
                        >
                            {{lang 'cart.preview.checkout_now'}}
                        </a>
                    </div>
                {{/if}}

                <div class="previewCartAction-viewCart{{#unless cart.show_primary_checkout_button}} previewCartAction-viewCart--sole{{/unless}}">
                    <a href="{{urls.cart}}" class="button button--small button--action">
                        {{lang 'cart.preview.view_cart'}}
                    </a>
                </div>

                {{#if cart.show_multiple_address_shipping}}
                    <div class="previewCartAction-checkoutMultiple">
                        <a href="{{urls.checkout.multiple_address}}">
                            {{lang 'cart.preview.checkout_multiple'}}
                        </a>
                    </div>
                {{/if}}
            </div>
            {{#if cart.additional_checkout_buttons}}
                <div class="previewCart-additionalCheckoutButtons">
                    {{#each cart.additional_checkout_buttons}}
                        {{{this}}}
                    {{/each}}
                </div>
            {{/if}}
        {{else}}
            <div role="alert" aria-live="polite" aria-atomic="false" class="previewCart-emptyBody">
                {{lang 'cart.checkout.empty_cart'}}
            </div>
        {{/if}}
    </div>
</div>
