{{#js_if "this.cartitems.length > 0"}}
<div class="block">
    <div class="button button-fill" onclick="openShopCheckout()">
        <i class="fa-regular fa-cash-register"></i> Go to Checkout
    </div>
</div>
<div class="list media-list">
    <ul>
        {{#each cartitems}}
        <li>
            <div class="item-content">
                <div class="item-media popup-close" onclick="app.card.open('#shop-item-card-{{sku}}');">
                    {{#js_if "this.images.length > 0"}}
                    <img src="{{js 'this.images[0]'}}" style="width: 80px;" />
                    {{else}}
                    <div style="width: 80px; height: 60px;"></div>
                    {{/js_if}}</div>
                <div class="item-inner">
                    <div class="item-title-row">
                        <div class="item-title">{{name}}</div>
                        <div class="item-after">{{#js_if "this.linetotal == '0.00'"}}Free{{else}}${{linetotal}}{{/js_if}}</div>
                    </div>
                    <div class="item-subtitle">{{#js_if "this.linetotal == '0.00'"}}Free{{else}}${{price}}{{/js_if}} x {{qty}} <div class="button button-small button-outline display-inline-block" onclick='removeFromCart("{{sku}}")'><i class="fa-solid fa-minus-circle"></i> Remove</div></div>
                    <div class="item-text">{{description}}</div>
                </div>
            </div>
        </li>
        {{/each}}
    </ul>
</div>
{{else}}
<div class="block text-align-center">
    <img src="assets/images/empty-cart.svg" class="margin" style="max-height: 25vh; max-width: 80%; height: 15rem;" />
    <p class="margin">
        Your cart is empty!
    </p>
</div>
{{/js_if}}