<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<div class="page" data-name="shop">

    <div class="navbar">
        <div class="navbar-bg"></div>
        <div class="navbar-inner">
            <div class="left">
                <a class="link back hapticbtn" href="#">
                    <i class="icon icon-back"></i>
                    <span class="if-not-md">Back</span>
                </a>
            </div>
            <div class="title">Shop</div>
            <div class="right">
                <a href="#" class="link hapticbtn popup-open" data-popup="#shoppingCartPopup">
                    <span class="chip"><span class="chip-label" id="shopping-cart-items-chip-label">0</span></span>
                    <i class="far fa-shopping-cart"></i>
                    <span>Cart</span>
                </a>
            </div>
        </div>
    </div>


    <div class="page-content noselect">
        <div class="row justify-content-center margin-top">
            <div class="col-100 medium-90 xlarge-75">
                <div class="row justify-content-left">
                    <div class="col-100 no-margin" id="addPaymentMethodNag" style="display: none;">
                        <div class="card">
                            <div class="card-content text-align-center padding-half">
                                <i class="fad fa-exclamation-circle fa-2x text-color-orange"></i><br>
                                You need an account with a linked credit card to use the shop. <span class="taptext">Tap</span><span class="clicktext">Click</span> the button to update your account.
                                <a class="button hapticbtn button-fill margin" href="/account"><i class="fas fa-user-circle"></i> My Account</a>
                            </div>
                        </div>
                    </div>
                    {{#each items}}
                    <div class="col-100">
                        <div class="block-title no-margin-bottom margin-half-top">{{category_name}}</div>
                    </div>
                    {{#each items}}
                    <div class="col-100 small-50 large-33 no-margin">
                        <div class="card card-expandable card-expandable-animate-width margin-half hapticbtn shop-item-card" id="shop-item-card-{{sku}}" data-sku="{{sku}}">
                            <div class="card-content card-content-padding">
                                <div class="pointercursor card-close">
                                    <div class="pointercursor" style="max-width: calc(100% - 2.5em);">{{name}}<br />
                                        <small style="opacity: 0.7">
                                            {{#js_if "this.price == '0.00'"}}Free{{else}}${{price}}{{/js_if}}
                                            {{#if instock}}{{else}} &middot; Out of Stock{{/if}}
                                        </small>
                                    </div>
                                    <a href="#" class="link card-opened-fade-in pointercursor"
                                       style="position: absolute; right: 2em; top: calc(var(--f7-navbar-height) * 1.5);">
                                        <i class="fas fa-times"></i>
                                    </a>
                                </div>
                                {{#js_if "this.images.length > 0"}}
                                <div style="text-align: center;" class="card-opened-fade-out card-opened-display-none">
                                    <img src="{{js 'this.images[0]'}}" style="max-width: 100%; max-height: 200px;"/>
                                </div>
                                {{/js_if}}
                                <div class="card-opened-fade-in card-closed-display-none">
                                    {{#if instock}}
                                    <div class="button button-fill margin-top card-close" onclick="addToCart('{{sku}}', 1)">
                                        <i class="far fa-cart-plus"></i> Add to Cart
                                    </div>
                                    {{else}}
                                    <div class="button button-fill margin-top color-gray color-theme-gray">
                                        Out of Stock
                                    </div>
                                    {{/if}}
                                    {{#js_if "this.images.length > 0"}}
                                    <div class="swiper-container shop-images-swiper" data-sku="{{sku}}" id="swiper-{{sku}}">
                                        <div class="swiper-wrapper">
                                            {{#each images}}
                                            <div class="swiper-slide" style="display: flex; justify-content: center; align-items: center;">
                                                <img src="{{this}}" style="max-height: 400px; max-width: 90%;"/>
                                            </div>
                                            {{/each}}
                                        </div>
                                        <div id="swiper-pagination-{{sku}}" class="swiper-pagination"></div>
                                    </div>
                                    <br />
                                    {{/js_if}}
                                    {{description}}
                                </div>
                            </div>
                        </div>
                    </div>
                    {{/each}}
                    {{/each}}
                </div>
            </div>
        </div>
    </div>

    <div class="popup" id="shoppingCartPopup">
        <div class="navbar">
            <div class="navbar-bg"></div>
            <div class="navbar-inner">
                <div class="left">
                    <a class="link popup-close" href="#">
                        <i class="icon icon-back"></i>
                        <span class="if-not-md">Close</span>
                    </a>
                </div>
                <div class="title">Cart</div>
            </div>
        </div>
        <div id="shoppingCartContainer">
        </div>
    </div>
</div>