Default theme reference

<div>
<overridable name="address-fields" section="top"></overridable>
<fieldset class="snipcart-form__set">
  <template v-if="useAutocomplete">
    <div class="snipcart-form__row">
      <div class="snipcart-form__field snipcart-form__cell--large">
        <snipcart-address-autocomplete :label="`${type}.address`"></snipcart-address-autocomplete>
        <snipcart-error-message name="address"></snipcart-error-message>
      </div>
    </div>
    <div class="snipcart-form__row">
      <div class="snipcart-form__field snipcart-form__cell--tidy">
        <snipcart-label for="address2">{{ $localize('address_form.address2') }}</snipcart-label>
        <snipcart-input name="address2" />
      </div>
      <div class="snipcart-form__field snipcart-form__cell--large snipcart-form__cell--input-aligned">
        <snipcart-checkbox name="addressNotFound"></snipcart-checkbox>
        <snipcart-label
          for="addressNotFound"
          class="snipcart-form__label--checkbox"
        >{{$localize('address_form.dont_see_address')}}</snipcart-label>
      </div>
    </div>
  </template>
  <template v-else>
    <div class="snipcart-form__row">
      <div class="snipcart-form__field snipcart-form__cell--large">
        <snipcart-label
          class="snipcart__font--tiny"
          for="address1"
        >{{ $localize('address_form.address1') }}</snipcart-label>
        <snipcart-input name="address1"></snipcart-input>
        <snipcart-error-message name="address1"></snipcart-error-message>
      </div>

      <div class="snipcart-form__field snipcart-form__cell--tidy">
        <snipcart-label
          class="snipcart__font--tiny"
          for="address2"
        >{{ $localize('address_form.address2') }}</snipcart-label>
        <snipcart-input name="address2"></snipcart-input>
        <snipcart-error-message name="address2"></snipcart-error-message>
      </div>
    </div>

    <div class="snipcart-form__field">
      <snipcart-label
        class="snipcart__font--tiny"
        for="city"
      >{{ $localize('address_form.city') }}</snipcart-label>
      <snipcart-input name="city"></snipcart-input>
      <snipcart-error-message name="city"></snipcart-error-message>
    </div>

    <div class="snipcart-form__field">
      <snipcart-label
        class="snipcart__font--tiny"
        for="country"
      >{{ $localize('address_form.country') }}</snipcart-label>
      <snipcart-typeahead type="dropdown" name="country" autocomplete="country"></snipcart-typeahead>
      <snipcart-error-message name="country"></snipcart-error-message>
    </div>

    <div class="snipcart-form__row">
      <div class="snipcart-form__field snipcart-form__cell--large">
        <snipcart-label
          class="snipcart__font--tiny"
          for="province"
        >{{ $localize('address_form.province') }}</snipcart-label>
        <snipcart-typeahead type="dropdown" name="province" autocomplete="province state"></snipcart-typeahead>
        <snipcart-error-message name="province"></snipcart-error-message>
      </div>

      <div class="snipcart-form__field snipcart-form__cell--tidy">
        <snipcart-label
          class="snipcart__font--tiny"
          for="postalCode"
        >{{ $localize('address_form.postalCode') }}</snipcart-label>
        <snipcart-input name="postalCode"></snipcart-input>
        <snipcart-error-message name="postalCode"></snipcart-error-message>
      </div>
    </div>
  </template>
</fieldset>
  </div>

<layout class="snipcart-layout--large">
  <div class="snipcart-layout__header">
    <overridable name="signin" section="header">
      <cart-header :back-button-title="$localize('signin_form.close_form')"></cart-header>
    </overridable>
  </div>
  <slot></slot>
</layout>

<snipcart-form @submit="save" id="snipcart-billing-form">
    <overridable name="billing">
        <div class="snipcart__box">
            <div class="snipcart__box--header">
                <div class="snipcart__box--title">
                    <div class="snipcart__box--badge snipcart__box--badge snipcart__box--badge-highlight snipcart__font--bold snipcart__font--secondary">{{ number }}</div>
                    <h1 class="snipcart__font--subtitle">
                        {{ $localize('billing.title') }}
                    </h1>
                </div>
            </div>

            <snipcart-error-message :show-fields-errors="false"></snipcart-error-message>

            <overridable name="billing" section="top"></overridable>
            
            <fieldset class="snipcart-form__set">
                <div class="snipcart-form__field">
                    <snipcart-label class="snipcart__font--tiny" for="name">
                        {{ $localize('address_form.name') }}
                    </snipcart-label>
                    
                    <snipcart-input name="name"></snipcart-input>
                    <snipcart-error-message name="name"></snipcart-error-message>
                </div>

                <div class="snipcart-form__field">
                    <snipcart-label class="snipcart__font--tiny" for="email">
                        {{ $localize('address_form.email' )}}
                    </snipcart-label>

                    <snipcart-input name="email" v-if="!emailIsReadonly"></snipcart-input>
                    <span class="snipcart__font--secondary snipcart__font--bold" v-else>{{ customer.email }}</span>
                    <snipcart-error-message name="email"></snipcart-error-message>
                </div>
            </fieldset>

            <address-fields type="billing"></address-fields>

            <hr class="snipcart-form__separator" v-if="shippingEnabled" />

            <fieldset class="snipcart-form__set snipcart-form__set--different-shipping" v-if="shippingEnabled && !hasOnlyNonShippableGoods">
                <div class="snipcart-form__field">
                    <div class="snipcart-form__field-checkbox">
                        <snipcart-checkbox name="useDifferentShippingAddress" />

                        <snipcart-label class="snipcart__font--tiny snipcart-form__label--checkbox" for="useDifferentShippingAddress">
                            {{ $localize('billing.use_different_shipping_address') }}
                        </snipcart-label>
                    </div>
                </div>
            </fieldset>

            <overridable name="billing" section="bottom"></overridable>

            <div class="snipcart-form__footer">
                <snipcart-submit class="snipcart-cart-button--highlight snipcart__font--large">
                    {{ hasShippingStep ? $localize('billing.continue_to_shipping') : $localize('payment.continue_to_payment') }}
                </snipcart-submit>
            </div>
        </div>
    </overridable>
</snipcart-form>

<transition name="snipcart-billing-completed__slide-transition">
    <overridable name="billing-completed" :class="cssClasses">
        <div class="snipcart__box snipcart-billing-completed">
            <div class="snipcart-billing-completed__header snipcart__box--header">
                <div class="snipcart__box--title">
                    <div class="snipcart__box--badge snipcart__font--bold snipcart__font--secondary" v-if="checkout"><icon name="checkmark" class="snipcart__icon--large snipcart__icon--blue-dark"></icon></div>
                    <h1 class="snipcart-billing-completed__title snipcart__font--subtitle">
                        <icon name="user" class="snipcart__icon--left snipcart__icon--blue-dark" v-if="!checkout"></icon>
                        {{ $localize('billing.title') }}
                    </h1>
                </div>

                <a href="#" @click="edit" v-if="checkout" class="snipcart__actions--link">{{ $localize('actions.edit')}}</a>
            </div>
            
            <div class="snipcart-checkout-step__cols snipcart__font--std">
                <div class="snipcart-checkout-step__col">
                    <div class="snipcart-checkout-step__icon snipcart-billing-completed__step-icon">
                        <icon name="user" class="snipcart__icon--blue-dark"></icon>
                    </div>
                    <div>
                        <h3 class="snipcart-billing-completed__step-title snipcart__font--secondary snipcart__font--bold">{{ $localize('customer.information') }}</h3>
                        <span class="snipcart-billing-completed__information snipcart__font--std">{{ cart.billingAddress.name }}<br />{{ cart.email }}</span>
                    </div>
                </div>

                <div class="snipcart-checkout-step__col">
                    <div class="snipcart-checkout-step__icon snipcart-billing-completed__step-icon">
                        <icon name="location" class="snipcart__icon--blue-dark"></icon>
                    </div>
                    <div>
                        <h3 class="snipcart-billing-completed__step-title snipcart__font--secondary snipcart__font--bold">{{ $localize('billing.address') }}</h3>
                        <span class="snipcart-billing-completed__information snipcart__font--std">{{ cart.billingAddress | address }}</span>
                    </div>
                </div>
            </div>
        </div>
    </overridable>
</transition>

<layout v-click-outside="clickedOutside">
    <overridable
        name="cart"
        section="header"
    >
        <cart-header
            title="header.title_cart_summary"
            :show-items-count="true"
            :show-account-menu="true"
            v-if="!editingCart"
        ></cart-header>
    </overridable>
    <loading-screen
        message="cart.loading"
        class="snipcart-layout__content"
        :class="layoutContentCssClasses"
    >
        <div
            class="snipcart-cart__secondary-header"
            v-if="editingCart"
        >
            <h1 class="snipcart__font--secondary snipcart-cart__secondary-header-title snipcart__font--bold snipcart__font--xlarge">
                {{ $localize("header.title_cart_summary") }}
            </h1>
            <close-side-cart-action :isCartSummary="!isSideCart">
                <icon
                    name="plus"
                    class="snipcart__icon--darker snipcart__icon--medium snipcart__icon--angled"
                    alt="item.remove_item"
                ></icon>
            </close-side-cart-action>
        </div>
        <overridable
            name="cart"
            v-if="hasItems"
        >
            <section class="snipcart-cart__content">
                <item-list
                    item-template="item-line"
                    class="snipcart-item-list--no-shadow"
                    :showDescription="!isSideCart"
                >
                    <template
                        v-slot:footer
                        v-if="isSideCart && hasActiveDiscountsTriggerableByCode"
                    >
                        <li class="snipcart-item-line snipcart-item-line--cart-edit">
                            <div class="snipcart-item-line__container">
                                <discount-box
                                    class="snipcart-cart__discount-box"
                                ></discount-box>
                            </div>
                        </li>
                    </template>
                </item-list>
                <div class="snipcart-cart__footer">
                    <div class="snipcart-cart__footer-col cart__footer-discount-box snipcart-cart__actions">
                        <discount-box
                            v-if="!isSideCart && hasActiveDiscountsTriggerableByCode"
                            class="snipcart-cart__discount-box"
                        ></discount-box>
                    </div>

                    <div class="snipcart-cart__footer-col">
                        <cart-summary-fees class="snipcart-cart-summary-fees--reverse">
                            {{ $localize('cart.shipping_taxes_calculated_at_checkout')}}
                        </cart-summary-fees>

                        <footer v-if="!editingCart || isSideCart">
                            <flash-message
                                type="error"
                                v-if="errors != null"
                                :title="$localize('errors.order_validation.custom_fields_validation.title')"
                            >
                                {{$localize('errors.order_validation.custom_fields_validation.description')}}
                            </flash-message>
                            <cart-button
                                class="snipcart-cart__checkout-button snipcart-cart-button--highlight snipcart__font--large"
                                icon-right="continue-arrow"
                                :disabled="checkoutDisabled"
                                @click="checkout"
                            >
                                {{ $localize('actions.checkout') }}
                            </cart-button>
                            <div
                                v-if="isSideCart"
                                class="snipcart__actions--link"
                                @click="viewDetailedCart"
                            >{{$localize("cart.view_detailed_cart")}}</div>
                        </footer>

                        <div class="snipcart-cart__featured-payment-methods-container">
                            <featured-payment-methods v-if="!editingCart"></featured-payment-methods>
                        </div>
                    </div>
                </div>
            </section>
        </overridable>
        <empty-cart v-else></empty-cart>
    </loading-screen>
    <transition name="snipcart-transition--slide-in">
        <router-view />
    </transition>
</layout>

<header class="snipcart-cart-header" v-if="!loading">
    <close-cart-action class="snipcart-cart-header__close-button snipcart-modal__close">
        <icon class="snipcart-modal__close-icon snipcart__icon--blue-light" name="back-arrow" />
        <span class="snipcart-modal__close-title snipcart__font--std">
            {{ backButtonTitle || $localize('actions.continue_shopping') }}
        </span>
    </close-cart-action>

    <media name="tablet, large" v-if="title">
        <h3 class="snipcart-cart-header__title snipcart__font--black snipcart__font--secondary">
            {{ $localize(title) }}
        </h3>
    </media>

    <div class="snipcart-cart-header__options">
        <sign-in-action tag="a" href="#/dashboard" class="snipcart-cart-header__option snipcart-cart-header__sign-in" v-if="showAccountMenu">
            <icon name="user" class="snipcart-cart-header__icon snipcart__icon--blue-dark"></icon>
            {{ $localize('signin_form.signin')}}
        </sign-in-action>

        <sign-out-action class="snipcart-cart-header__option snipcart-cart-header__sign-out" v-if="showAccountMenu">
            <icon name="sign-out" class="snipcart-cart-header__icon snipcart__icon--blue-dark"></icon>
            {{ $localize('customer_dashboard.sign_out')}}
        </sign-out-action>

        <customer-account-link tag="a" href="#/dashboard" class="snipcart-cart-header__option snipcart-cart-header__customer-account" v-if="showAccountMenu && showAccountLink">
            <icon name="user" class="snipcart-cart-header__icon snipcart__icon--blue-dark"></icon>
            {{ $localize('customer_dashboard.my_account') }}
        </customer-account-link>

        <show-cart-action class="snipcart-cart-header__option snipcart-cart-header__count snipcart__font--secondary snipcart__font--bold" v-if="showItemsCount">
            <icon name="cart" class="snipcart-cart-header__icon snipcart__icon--blue-dark" />
            <template v-if="!hasSubscription">
                {{ itemsCount }}
            </template>
        </show-cart-action>
    </div>

    <media name="mobile, tablet" class="snipcart-modal__header-summary" v-if="showSummary && !loading">
        <div class="snipcart-modal__header-summary-title snipcart__font--large snipcart__font--secondary snipcart__font--bold" @click.prevent="toggleSummary">
            <icon name="cart" class="snipcart__icon--blue-dark"></icon>
            <span>
                {{ cart.total | money(cart.currency) }}
            </span>
            <icon :name="summaryIcon" class="snipcart__icon--blue-dark snipcart__icon--medium"></icon>
        </div>

        <cart-summary class="snipcart-cart-summary--small" v-if="summaryVisible" @close="closeSummary">
        </cart-summary>
    </media>
</header>
<header class="snipcart-cart-header" v-else>
    <close-cart-action class="snipcart-modal__close">
        <icon class="snipcart-modal__close-icon snipcart__icon--blue-light" name="back-arrow" />
        <span class="snipcart-modal__close-title snipcart__font--std">
            {{ $localize('actions.continue_shopping') }}
        </span>
    </close-cart-action>
</header>

<div>
    <overridable name="cart-summary">
        <div class="snipcart-cart-summary">
            <section class="snipcart-cart-summary__content">
                <div class="snipcart-cart-summary__actions snipcart__box--header">
                    <h1 class="snipcart-cart-summary__title snipcart__font--subtitle">{{ $localize('cart.summary') }}</h1>
                    <open-side-cart-action class="snipcart__actions--link">{{ $localize('actions.edit') }}</open-side-cart-action>
                </div>

                <overridable
                    name="cart-summary"
                    section="items"
                >
                    <cart-summary-items-list class="snipcart-cart-summary__items"></cart-summary-items-list>
                </overridable>

                <hr class="snipcart-cart-summary__separator" />

                <loading-overlay>
                    <div class="snipcart-cart-summary__totals">
                        <cart-summary-fees></cart-summary-fees>
                    </div>
                </loading-overlay>
            </section>

            <footer class="snipcart-cart-summary__footer">
                <featured-payment-methods class="snipcart-featured-payment-methods--no-background" />
            </footer>
        </div>
    </overridable>

    <transition name="snipcart-cart-summary__overlay-transition">
        <div
            class="snipcart-cart-summary__overlay"
            v-if="editing"
        ></div>
    </transition>

    <transition name="snipcart-transition--slide-in">
        <cart
            :editingCart="true"
            class="snipcart-cart-summary--edit"
            v-if="editing || isSideCart"
            :isSideCart="isSideCart"
        ></cart>
    </transition>
</div>

<li class="snipcart-cart-summary-expanded-item">
    <div>
        <span class="snipcart-cart-summary-expanded-item__name snipcart__font--secondary snipcart__font--regular">{{ item.name }}</span>
        <ul class="snipcart-cart-summary-expanded-item__custom-fields">
            <li
                v-for="(customField, i) in visibleCustomFields"
                :key="i"
            >{{ customField.name }}: {{ customField.value }}</li>
        </ul>
    </div>
    <div class="snipcart-cart-summary-expanded-item--secondary snipcart-cart-summary-expanded-item__quantity">
        {{ $localize('item.quantity_short') }}: {{ item.quantity }}
    </div>
    <div class="snipcart-cart-summary-expanded-item--secondary snipcart-cart-summary-expanded-item__price snipcart__font--secondary snipcart__font--bold">
        {{ item.unitPrice | money(cart.currency) }}
    </div>
</li>

<div class="snipcart-cart-summary-fees">
    <div
        class="snipcart-cart-summary-fees__notice snipcart__font--regular"
        v-if="!hasShippingAddress"
    >
        <slot>
            {{ $localize('checkout.shipping_taxes_calculated_when_address_provided') }}
        </slot>
    </div>

    <div class="snipcart-cart-summary-fees">
        <div
            class="snipcart-cart-summary-fees__item snipcart-cart-summary-fees__discounts snipcart__font--slim"
            v-if="hasDiscounts"
        >
            <span class="snipcart-cart-summary-fees__title">
                {{ $localize('cart_summary.discount') }}
                <div class="snipcart-cart-summary-fees__discounts-icon">
                    <icon
                        name="question-mark"
                        @mouseover.native="displayDiscounts = true"
                        @mouseleave.native="displayDiscounts = false"
                    ></icon>
                    <tool-tip
                        v-show="displayDiscounts"
                        class="snipcart-tool-tip--bordered snipcart-cart-summary-fees__tool-tip"
                    >
                        <div
                            class="snipcart-cart-summary-fees__discount-container"
                            v-for="discount in discounts"
                            :key="discount.id"
                        >
                            <div class="snipcart-cart-summary-fees__discount-name">{{ discount.name }}</div>
                            <div
                                class="snipcart-cart-summary-fees__discount-amount-saved"
                                v-if="!displayDiscount(discount)"
                            > -{{ discount.amountSaved | money(cart.currency)}}</div>
                        </div>
                    </tool-tip>
                </div>
            </span>
            <span
                class="snipcart-cart-summary-fees__amount"
                v-if="discountsTotal"
            >{{ discountsTotal | money(cart.currency) }}</span>
        </div>

        <div
            class="snipcart-cart-summary-fees__item snipcart__font--slim"
            v-if="subtotal"
        >
            <span class="snipcart-cart-summary-fees__title">{{ $localize('cart_summary.subtotal') }}</span>
            <span class="snipcart-cart-summary-fees__amount">{{ subtotal | money(cart.currency) }}</span>
        </div>

        <div
            class="snipcart-cart-summary-fees__item snipcart__font--slim"
            v-if="hasShipping"
        >
            <span class="snipcart-cart-summary-fees__title">{{ $localize('cart_summary.shipping') }}</span>
            <span class="snipcart-cart-summary-fees__amount">{{ shipping.cost | money(cart.currency) }}</span>
        </div>

        <div
            class="snipcart-cart-summary-fees__item snipcart__font--slim"
            v-if="hasTaxes"
        >
            <span class="snipcart-cart-summary-fees__title">
                {{ $localize('cart_summary.taxes') }}
                <icon
                    name="question-mark"
                    class="snipcart-cart-summary-fees__tax-notice"
                    v-if="someTaxesIncludedInPrice"
                    @mouseover.native="displayTaxesIncludedInPriceNotice = true"
                    @mouseleave.native="displayTaxesIncludedInPriceNotice = false"
                ></icon>
                <tool-tip
                    v-show="displayTaxesIncludedInPriceNotice"
                    class="snipcart-tool-tip--bordered snipcart-cart-summary-fees__tool-tip"
                >
                    {{ $localize('cart_summary.taxes_included_in_price') }}
                </tool-tip>
            </span>
            <span class="snipcart-cart-summary-fees__amount">{{ totalTaxAmount | money(cart.currency) }}</span>
        </div>

        <div class="snipcart-cart-summary-fees__item snipcart-cart-summary-fees__total snipcart__font--bold snipcart__font--secondary">
            <span class="snipcart-cart-summary-fees__title snipcart-cart-summary-fees__title--highlight snipcart__font--large">{{ $localize('cart_summary.total')}}</span>
            <span class="snipcart-cart-summary-fees__amount snipcart-cart-summary-fees__amount--highlight snipcart__font--large">{{ total| money(cart.currency) }}</span>
        </div>
    </div>
</div>

<slot v-bind="item">
    <li class="snipcart-cart-summary-item">
        <span class="snipcart-cart-summary-item__name snipcart__font--slim">
            {{ item.name }}
        </span>

        <span class="snipcart-cart-summary-item__quantity snipcart__font--slim">
            {{ $localize('cart_summary.quantity') }}{{ item.quantity }}
        </span>

        <span class="snipcart-cart-summary-item__price snipcart__font--slim">
            {{ item.totalPrice | money(currency) }}
        </span>
    </li>
</slot>

<div class="snipcart-change-password__box">
    <button
        @click="$actions.goToDashboard"
        class="snipcart-modal__close snipcart-orders-link"
    >
        <icon
            class="snipcart__icon--blue-light"
            name="back-arrow"
        />
        <span class="snipcart__font--std">
            {{  $localize('actions.back_to_orders') }}
        </span>
    </button>
    <overridable name="change-password">

        <div class="snipcart__box">
            <div class="snipcart__box--title">
                <h1 class="snipcart-change-password__title snipcart__font--subtitle">
                    {{ $localize('change_password_form.title') }}
                </h1>
            </div>
            <snipcart-form @submit="save"
                class="snipcart-change-password__form"
            >
                <snipcart-error-message class="snipcart-error-message--global-form" />
                <div class="snipcart-form__field">
                    <snipcart-label for="currentPassword">{{ $localize('change_password_form.current_password')}}</snipcart-label>
                    <snipcart-password
                        name="currentPassword"
                        icon="password"
                    ></snipcart-password>
                    <snipcart-error-message name="currentPassword"></snipcart-error-message>
                </div>
                <div class="snipcart-form__field">
                    <snipcart-label for="password">{{ $localize('change_password_form.password')}}</snipcart-label>
                    <snipcart-password
                        name="password"
                        icon="password"
                    ></snipcart-password>
                    <snipcart-error-message name="password"></snipcart-error-message>
                </div>
                <div class="snipcart-form__field">
                    <snipcart-label for="confirmationPassword">{{ $localize('change_password_form.confirmation_password')}}</snipcart-label>
                    <snipcart-password
                        name="confirmationPassword"
                        icon="password"
                    ></snipcart-password>
                    <snipcart-error-message name="confirmationPassword"></snipcart-error-message>
                </div>

                <snipcart-submit
                    class="snipcart-cart-button--highlight snipcart__font--large"
                    icon-right="continue-arrow"
                >
                    {{ $localize('actions.save_changes')}}
                </snipcart-submit>
            </snipcart-form>
        </div>
    </overridable>
</div>

<layout class="snipcart-layout--large">
    <overridable name="checkout" section="header" :class="layoutHeaderCssClasses">
        <cart-header class="snipcart-checkout__header" :show-items-count="false" :show-summary="true" :show-account-menu="showAccountMenu" @summaryOpened="summaryOpened" @summaryClosed="summaryClosed">
        </cart-header>
    </overridable>
    <loading-screen message="cart.loading">
        <overridable name="checkout" :class="layoutCssClasses" class="snipcart-layout__content">
            <div class="snipcart-checkout__content">
                <div class="snipcart-layout__cols">
                    <div class="snipcart-layout__col snipcart-layout__col--large" v-if="stepsReady">
                        <checkout-step
                            v-for="(step, key, index) in steps"
                            :key="key"
                            :name="step.components.edit"
                            @scrollTo="scrollTo"
                            :title="`${step.components.edit}.title`"
                            :number="index+1" />
                    </div>
                    <media name="large" class="snipcart-layout__col">
                        <cart-summary />
                    </media>
                </div>
            </div>
        </overridable>
    </loading-screen>
    <transition name="snipcart-transition--slide-in">
        <router-view />
    </transition>
</layout>

<div class="snipcart__box snipcart-customer-details__box">
    <div class="snipcart-customer-details__header snipcart__box--header">
        <div class="snipcart__box--title">
            <h1 class="snipcart-customer-details__title snipcart__font--subtitle">
                {{ $localize('customer_details.title') }}
            </h1>
        </div>
        <a
            @click="editPassword"
            class="snipcart__actions--link"
        >{{ $localize('actions.change_password')}}</a>
    </div>

    <div class="snipcart-customer-details__line">
        <div class="snipcart-customer-details__icon">
            <icon
                name="user"
                class="snipcart__icon--blue-dark"
            ></icon>
        </div>
        <div>
            <span class="snipcart-customer-details__information snipcart__font--std">{{ customer.billingAddress.name  }}<br v-if="customer.billingAddress.name" />{{ customer.email }}</span>
        </div>
    </div>

    <div class="snipcart-customer-details__header snipcart__box--header">
        <div class="snipcart__box--title">
            <h1 class="snipcart__font--subtitle">

                {{ $localize('billing.address')  }}
            </h1>
        </div>
        <a
            @click="editBillingAddress"
            class="snipcart__actions--link"
        >{{ customer.billingAddress.hasMinimalRequiredInfo ? 
                $localize('actions.edit') : 
                $localize('actions.add')}}
        </a>
    </div>
    <div
        v-if='customer.billingAddress.hasMinimalRequiredInfo'
        class="snipcart-customer-details__line"
    >

        <div class="snipcart-customer-details__icon">
            <icon
                name="location"
                class="snipcart__icon--blue-dark"
            ></icon>
        </div>
        <div>
            <span class="snipcart-customer-details__information snipcart__font--std">{{ customer.billingAddress | address }}</span>
        </div>

    </div>

    <div class="snipcart-customer-details__header snipcart__box--header">
        <div class="snipcart__box--title">
            <h1 class="snipcart__font--subtitle">
                {{ $localize('shipping.address') }}
            </h1>
        </div>
        <a
            @click="editShippingAddress"
            class="snipcart__actions--link"
        >{{ customer.shippingAddress.hasMinimalRequiredInfo ? 
                $localize('actions.edit') : 
                $localize('actions.add')}}
        </a>
    </div>
    <div
        v-if='customer.shippingAddress.hasMinimalRequiredInfo'
        class="snipcart-customer-details__line"
    >
        <div class="snipcart-customer-details__icon">
            <icon
                name="location"
                class="snipcart__icon--blue-dark"
            ></icon>
        </div>
        <div>
            <span class="snipcart-customer-details__information snipcart__font--std">{{ customer.shippingAddress | address }}</span>
        </div>

    </div>
    <payment-info :customerDetails="customerDetails"></payment-info>
</div>

<layout>
    <overridable
        name="dashboard"
        section="header"
    >
        <cart-header
            title="customer_dashboard.my_account"
            :show-items-count="true"
            :show-account-menu="true"
            :show-account-link="false"
        ></cart-header>
    </overridable>
    <router-view></router-view>
</layout>

<div class="snipcart-dashboard__containter">

    <overridable name="customer-details">

        <customer-details class="snipcart-dashboard__customer-details"></customer-details>

    </overridable>

    <overridable name="dashboard">
        <div class="snipcart-dashboard__content">
            <tabs v-if="subscriptionsIsEnabled">
                <tab :name="togglableOptions.Orders">
                    <orders-list></orders-list>
                </tab>
                <tab :name="togglableOptions.Subscriptions">
                    <subscriptions-list></subscriptions-list>
                </tab>
            </tabs>
            <template v-if="!subscriptionsIsEnabled">
                <h2 class="snipcart__font--subtitle snipcart-orders__title snipcart-dashboard__order">{{ $localize('customer_dashboard.orders')}}</h2>
                <orders-list></orders-list>
            </template>

        </div>
    </overridable>
</div>

<div class="snipcart-edit-customer-address__box">
    <button
        @click="$actions.goToDashboard"
        class="snipcart-modal__close snipcart-orders-link"
    >
        <icon
            class="snipcart__icon--blue-light"
            name="back-arrow"
        />
        <span class="snipcart__font--std">
            {{  $localize('actions.back_to_orders') }}
        </span>
    </button>

    <overridable name="edit-address">

        <div class="snipcart__box">

                <div class="snipcart__box--title">
                    <h1 v-if="addressType === 'billing'" class="snipcart-edit-customer-address__title snipcart__font--subtitle">
                        {{ $localize('billing.address') }}
                    </h1>
                    <h1 v-if="addressType === 'shipping'" class="snipcart-edit-customer-address__title snipcart__font--subtitle">
                        {{ $localize('shipping.address') }}
                    </h1>
                </div>

            <snipcart-form @submit="save"
                class="snipcart-edit-customer-address__form"
            >
                <snipcart-error-message class="snipcart-error-message--global-form" />
                <fieldset class="snipcart-form__set">
                    <div class="snipcart-form__field">
                        <snipcart-label
                            class="snipcart__font--tiny"
                            for="name"
                        >
                            {{ $localize('address_form.name') }}
                        </snipcart-label>

                        <snipcart-input name="name"></snipcart-input>
                        <snipcart-error-message name="name"></snipcart-error-message>
                    </div>
                </fieldset>
                <address-fields
                    :type="addressType"
                    :initialAddress="initialAddress"
                ></address-fields>

                <overridable
                    name="edit-address"
                    section="bottom"
                ></overridable>

                <snipcart-submit
                    class="snipcart-edit-customer-address__submit-button snipcart-cart-button--highlight snipcart__font--large"
                    icon-right="continue-arrow"
                >
                    {{ $localize('actions.save_changes')}}
                </snipcart-submit>
            </snipcart-form>
        </div>
    </overridable>
</div>

<section class="snipcart-empty-cart">
    <h1 class="snipcart-empty-cart__title snipcart__font--secondary snipcart__font--xlarge snipcart__font--bold">
        {{ $localize('cart.empty') }}
    </h1>

    <cart-button 
        class="snipcart-cart-button--secondary snipcart-cart-button--fit"
        icon="back-arrow"
        @click="$actions.goBack">
        {{ $localize('actions.back_to_store') }}
    </cart-button>
</section>

<div class="snipcart-featured-payment-methods">
    <h3 class="snipcart__font--secondary snipcart__font--bold  snipcart-featured-payment-methods__title">
        <a :href="securedByUrl" class="snipcart-featured-payment-methods__link" target="_blank" rel="nofollow noopener">
            <icon name="lock" class="snipcart-featured-payment-methods__title-icon"></icon>
            {{ $localize('cart.secured_by') }}
        </a>
    </h3>
    <ul class="snipcart-featured-payment-methods__list">
        <li class="snipcart-featured-payment-methods__list-item">
            <icon name="visa" alt="Visa" class="snipcart__icon--brand"></icon>
        </li>
        <li class="snipcart-featured-payment-methods__list-item">
            <icon name="mastercard" alt="Mastercard" class="snipcart__icon--brand"></icon>
        </li>
    </ul>
</div>

<div class="snipcart-flash-message" :class="(`snipcart-flash-message--${type}`)">
<icon :name="icon" class="snipcart-flash-message__icon" v-if="icon"></icon>
<div class="snipcart-flash-message__content">
  <h2
    class="snipcart-flash-message__title snipcart__font--secondary snipcart__font--black snipcart__font--large"
    v-if="title"
  >{{ title }}</h2>
  <p
    class="snipcart-flash-message__description snipcart__font--std"
    v-if="description"
    v-html="description"
  ></p>
  <div class="snipcart-flash-message__action-container snipcart__font--std snipcart__font--black" v-if="hasAction">
    <slot></slot>
  </div>
</div>
  </div>

<authentication-view>
    <overridable name="forgot-password">
        <div class="snipcart__box snipcart-forgot-password snipcart-forgot-password__box">
            <template v-if="!emailSent">
                <h2 class="snipcart__font--subtitle snipcart-forgot-password__title">
                    {{ $localize('forgot_password_form.title')}}
                </h2>

                <p class="snipcart-forgot-password__instructions">
                    {{ $localize('forgot_password_form.instructions') }}
                </p>

                <snipcart-form @submit="save" class="snipcart-forgot-password__form">
                    <snipcart-error-message class="snipcart-error-message--global-form" />

                    <div class="snipcart-form__field">
                        <snipcart-label for="email">{{ $localize('forgot_password_form.email')}}</snipcart-label>
                        <snipcart-input name="email" type="email"></snipcart-input>
                        <snipcart-error-message name="email"></snipcart-error-message>
                    </div>
                    
                    <snipcart-submit
                        class="snipcart-forgot-password__submit-button snipcart-cart-button--highlight snipcart__font--large"
                        icon-right="continue-arrow">
                        {{ $localize('forgot_password_form.action') }}
                    </snipcart-submit>
                </snipcart-form>
            </template>
            <template v-else>
                <h2 class="snipcart__font--subtitle snipcart-forgot-password__title">
                    {{ $localize('forgot_password_form.title')}}
                </h2>
                <p class="snipcart-forgot-password__instructions">
                    {{ $localize('forgot_password_form.email_instructions') }}
                </p>
            </template>

        </div>
    </overridable>
</authentication-view>

<div class="snipcart-guest-checkout">
    <div class="snipcart-guest-checkout__wrapper">
        <div class="snipcart-guest-checkout__or">{{ $localize('guest_checkout.or')}}</div>
        <div class="snipcart-guest-checkout__seperator"></div>
    </div>
    <router-link
    to="/checkout"
    class="snipcart-guest-checkout__link snipcart__font--black"
    >{{ $localize('guest_checkout.continue_as_a_guest')}}</router-link>
</div>

<li :class="{'snipcart-item-line': true, 'snipcart-item-line--cart-edit': editingCart}">
    <flash-message
        type="info"
        icon="box"
        v-if="stockLimitReached"
    >
        {{ $localize('errors.quantity_revised') }}
    </flash-message>
    <flash-message
        type="error"
        icon="box"
        v-if="outOfStock"
    >
        {{ $localize('errors.quantity_out_of_stock') }}
    </flash-message>
    <div class="snipcart-item-line__container">
        <figure
            class="snipcart-item-line__media"
            v-if="showLargeImage"
        >
            <item-image class="snipcart-item-line__image"></item-image>
        </figure>
        <div class="snipcart-item-line__product">
            <div class="snipcart-item-line__header">
                <figure
                    class="snipcart-item-line__media snipcart-item-line__media--small"
                    v-if="showSmallImage"
                >
                    <item-image class="snipcart-item-line__image"></item-image>
                </figure>

                <h2 class="snipcart-item-line__title snipcart__font--xlarge snipcart__font--secondary snipcart__font--black">
                    {{ item.name }}
                </h2>

                <div class="snipcart-item-line__actions">
                    <remove-item-action class="snipcart__button--icon">
                        <icon
                            name="trash"
                            class="snipcart__icon--red"
                            alt="item.remove_item"
                        ></icon>
                    </remove-item-action>
                </div>
            </div>

            <div class="snipcart-item-line__content">
                <div class="snipcart-item-line__body">
                    <div class="snipcart-item-line__info">
                        <item-description v-if="showDescription"></item-description>
                    </div>
                    <div class="snipcart-item-line__variants">
                        <div>
                            <item-plans
                                :item="item"
                                v-if="!adding && isSubscribable"
                            ></item-plans>
                            <item-custom-fields v-if="!adding"></item-custom-fields>
                        </div>
                        <item-quantity
                            class="snipcart-item-line__quantity"
                            v-if="!adding && !isSubscribable"
                            :disabled="outOfStock || isSubscribable"
                        ></item-quantity>
                        <div
                            class="snipcart-form__field snipcart-form__field--plan snipcart-form__field--plan--billed-on"
                            v-if="isSubscribable && !adding"
                        >
                            <span class="snipcart-form__label snipcart__font--tiny">
                                {{$localize('subscription.payment_amount')}}
                            </span>
                            <div class="snipcart-form__field--plan__readonly">
                                <item-price
                                    :item="item"
                                    :selectedPlan="selectedPlan"
                                >
                                </item-price>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</li>

<component :is="tag">
    <slot v-if="!loading"></slot>
    <overridable name="loading-screen" v-else>
        <div class="snipcart__loading__screen">
            <div class="snipcart__loading__screen__content">
                <icon name="spinner" class="snipcart__loading__screen__icon"></icon>
                <span class="snipcart__loading__screen__content__message">
                    {{ localizedLoadingMessage }}
                </span>
            </div>
        </div>
    </overridable>
</component>

<layout class="snipcart-layout--large snipcart-cart__order-container">
    <overridable name="order" section="header">
        <cart-header class="snipcart-checkout__header" :show-items-count="false" :show-summary="false" :show-account-menu="false">
        </cart-header>
    </overridable>

    <overridable name="order" section="content">
        <loading-screen message="order.loading" class="snipcart-layout__content">
            <div v-if="cart">
                <div class="snipcart-order__details">
                    <overridable name="order" section="content-header">
                        <div class="snipcart__box snipcart-order__box snipcart-order__box__header">
                            <div class="snipcart__box--title">
                                <div class="snipcart__box--badge snipcart__box--badge snipcart__box--badge-highlight snipcart__font--bold snipcart__font--secondary">
                                    <icon name="checkmark" class="snipcart__icon--white snipcart__icon--large"></icon>
                                </div>
                                <div>
                                    <h1 class="snipcart__font--subtitle">{{ $localize('confirmation.thank_you_for_your_order') }}</h1>
                                </div>
                            </div>
                            <div v-if="isConfirmationAsync" class="snipcart-order__async-confirmation-notice">
                                <flash-message type="success">
                                    {{ $localize('confirmation.async_confirmation_notice') }}
                                </flash-message>
                            </div>
                            <div v-else class="snipcart-order__invoice-number">
                                {{ $localize('cart.invoice_number') }} :&nbsp;<em class="snipcart-order__invoice-number--highlight snipcart__font--black snipcart__font--secondary">{{ cart.invoiceNumber}}</em>
                            </div>
                        </div>
                    </overridable>
                        
                    <overridable name="order" section="content-main">
                        <div class="snipcart-order__details__content">
                            <div class="snipcart__box snipcart-order__box">
                                <div class="snipcart-order__details-title snipcart__box--subtitle">
                                    <icon name="cart" class="snipcart__icon--left snipcart__icon--blue-dark"></icon>
                                    <h1 class="snipcart__font--subtitle">{{ $localize('header.title_cart_summary') }}</h1>
                                </div>

                                <cart-summary-items-list item-template="cart-summary-expanded-item"></cart-summary-items-list>
                            </div>

                            <billing-completed context="invoice" class="snipcart-billing-completed--titled snipcart-order__box"></billing-completed>
                            <shipping-completed context="invoice" class="snipcart-shipping-completed--titled snipcart-order__box" v-if="cart.shippingDetails.method"></shipping-completed>
                            <order-payment-details v-if="showPayment"></order-payment-details>
                            <footer class="snipcart__box snipcart-order__box snipcart-order__footer">
                                <cart-summary-fees class="snipcart-order__fees"></cart-summary-fees>
                            </footer>
                        </div>
                    </overridable>
                </div>
            </div>
        </loading-screen>
    </overridable>
</layout>