<div class="row">
    <div class="col s12">
        {{#if pageCloseBtn}}
        <div class="row {{checkout}}">
            <div class="col l12 text-right">
                <button class="pushy-link btn waves-effect waves-light blue darken-3" type="button">X</button>
            </div>
        </div>
        {{/if}}
        <div class="card">
            <div class="card-content">
                <span class="card-title">Cart contents</span>
                {{#each session.cart}}
                <div class="row cart-row">
                    <div class="col s4 m2">
                        {{#if productImage}}
                        <img class="img-responsive" src="{{this.productImage}}" alt="{{this.title}} product image"> {{else}}
                        <img class="img-responsive" src="/uploads/placeholder.png" alt="{{this.title}} product image"> {{/if}}
                    </div>
                    <div class="cart-item-row col s12 m7 offset-m1">
                        <p>
                            <a class="cart-link" href="/product/{{this.link}}">{{this.title}}</a>
                        </p>
                        <p>
                            &nbsp;
                            {{#each this.options}} 
                                {{#if @last}} 
                                    {{@key}}: {{this}} 
                                    {{else}} 
                                    {{@key}}: {{this}} / 
                                {{/if}} 
                            {{/each}}
                        </p>
                        <p>
                            <div class="col s12 no-pad-left">
                                <span class="col s2">
                                    <button class="btn waves-effect waves-light blue darken-3 btn-qty-minus" type="button">-</button>
                                </span>
                                <div class="input-field col s5">
                                    <input type="number" class="cart-product-quantity text-center" data-id="{{this.productId}}" id="{{@key}}" maxlength="2" value="{{this.quantity}}">
                                </div>
                                <span class="col s3">
                                    <button class="btn waves-effect waves-light blue darken-3 btn-qty-add" type="button">+</button>
                                </span>
                                <span class="col s1">
                                    <button class="btn waves-effect waves-light red darken-3 btn-delete-from-cart" data-id="{{this.productId}}" type="button"><i class="fa fa-trash" data-id="{{this.productId}}" aria-hidden="true"></i></button>
                                </span>
                            </div>
                        </p>
                    </div>
                    <div class="col s12 l2 cart-item-row text-right no-pad-right">
                        <strong>{{currencySymbol ../config.currencySymbol}}{{formatAmount this.totalItemPrice}}</strong>
                    </div>
                </div>
                {{/each}}
                {{#if session.cart}}
                <div class="row">
                    <div class="cart-contents-shipping col s12 no-pad-right">
                        {{#ifCond session.shippingCostApplied '===' true}}
                        <div class="text-right">
                            Shipping:
                            <strong>{{currencySymbol config.currencySymbol}}{{formatAmount config.flatShipping}}</strong>
                        </div>
                        {{else}}
                        <div class="text-right">
                            Shipping:
                            <strong>FREE</strong>
                        </div>
                        {{/ifCond}}
                        <div class="text-right">
                            Total:
                            <strong>{{currencySymbol config.currencySymbol}}{{formatAmount session.totalCartAmount}}</strong>
                        </div>
                    </div>
                </div>
                {{else}}
                <div class="row">
                    <div class="cart-contents-shipping col m12 no-pad-right">
                        Cart empty
                    </div>
                </div>
                {{/if}}
            </div>
        </div>
        <div class="row">
            {{#if session.cart}}
            <div class="col s6 align-right">
                <button class="btn waves-effect waves-light red darken-3" id="empty-cart" type="button">Empty cart</button>
            </div>
            {{#ifCond page '!=' 'pay'}}
            <div class="text-right align-right col s6">
                {{#ifCond page '==' 'checkout'}}
                <a href="/pay" class="btn waves-effect waves-light blue darken-3">Pay now</a>
                {{else}}
                <a href="/checkout" class="btn waves-effect waves-light blue darken-3">Checkout</a>
                {{/ifCond}}
            </div>
            {{/ifCond}} {{/if}}
        </div>
    </div>
</div>