<!-- 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 = "fa-regular 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 = "fa-duotone 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 = "fa-solid 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}} · 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 = "fa-solid 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 = "fa-regular 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 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 >