Référence du thème par défaut

<div>
<overridable name="address-fields" section="top"></overridable>
<fieldset class="snipcart-form__set">
    <div class="snipcart-form__row">
      <div class="snipcart-form__field snipcart-form__cell--large">
        <template v-if="useAutocomplete">
          <snipcart-address-autocomplete label="address_form.address1"></snipcart-address-autocomplete>
          <snipcart-field-error name="address1"></snipcart-field-error>
        </template>
        <template v-else>
          <snipcart-label
            class="snipcart__font--tiny"
            for="address1"
          >{{ $localize('address_form.address1') }}</snipcart-label>
          <snipcart-input name="address1"></snipcart-input>
          <snipcart-field-error name="address1"></snipcart-field-error>
        </template>
      </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-field-error name="address2"></snipcart-field-error>
      </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-field-error name="city"></snipcart-field-error>
    </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-field-error name="country"></snipcart-field-error>
    </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-field-error name="province"></snipcart-field-error>
      </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-field-error name="postalCode"></snipcart-field-error>
      </div>
    </div>
</fieldset>
<overridable name="address-fields" section="bottom"></overridable>
  </div>

<address v-if="address" class="snipcart-addresss-formatted">
	<span>{{ address.address1 }}</span>
	<span v-if="!!address.address2">, {{ address.address2 }}</span>
	<br/>
	<span>{{ `${address.city}, ${address.province}  ${address.postalCode}` }}</span>
	<br/>
	<span>{{ address.country }}</span>
</address>

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

<!-- COMPONENT: base-button -->
<overridable name="base-button">
    <button 
        :class="['snipcart-base-button', ...buttonClass]" 
        :disabled="state === 'loading' || state === 'disabled'"
        :type="type"
        @click="handleClick"
    >
        <!-- Wrapper -->
        <div class="snipcart-base-button__wrapper">
            <!-- Label -->
            <div class="snipcart-base-button__label">
                <template v-if="state === 'loading'">
                    <slot name="label-loading">
                        {{ $localize(labelLoading) }}
                    </slot>
                </template>
                <template v-else-if="state === 'success'">
                    <slot name="label-success">
                        {{ $localize(labelSuccess) }}
                    </slot>
                </template>
                <template v-else-if="state === 'error'">
                    <slot name="label-error">
                        {{ $localize(labelError) }}
                    </slot>
                </template>
                <template v-else>
                    <slot name="default">
                        {{ $localize(label) }}
                    </slot>
                </template>
            </div>
            <!-- Icon -->
            <div class="snipcart-base-button__icon">
                <transition name="slide-up" mode="out-in">
                    <template v-if="state === 'loading'">
                        <slot name="icon-loading">
                            <spinner v-if="state === 'loading'"></spinner>
                        </slot>
                    </template>
                    <template v-else-if="state === 'success'">
                        <slot name="icon-checkmark">
                            <icon name="checkmark"></icon>
                        </slot>
                    </template>
                    <template v-else-if="state === 'error'">
                        <slot name="icon-alert">
                            <icon name="alert"></icon>
                        </slot>
                    </template>
                     <template v-else-if="icon">
                        <slot name="icon">
                            <icon :name="icon"></icon>
                        </slot>
                    </template>
                </transition>
            </div>
        </div>
        
    </button>
</overridable>

<div class="snipcart-layout-sidebar">
    <div class="snipcart-layout-sidebar__container">
        <aside class="snipcart-layout-sidebar__aside">
            <slot name="sidebar"></slot>
        </aside>
        <main class="snipcart-layout-sidebar__main">
            <slot></slot>
        </main>
    </div>
</div>

<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-form-error></snipcart-form-error>

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

            <fieldset class="snipcart-form__set">
                <template v-if="!splitName">
                    <div class="snipcart-form__field" v-if="!splitName">
                        <snipcart-label class="snipcart__font--tiny" for="name">
                            {{ $localize('address_form.name') }}
                        </snipcart-label>

                        <!-- Full name in same field -->
                        <snipcart-input name="name"  autocomplete="name"></snipcart-input>
                        <snipcart-field-error name="name"></snipcart-field-error>
                    </div>
                </template>
                <template v-else>
                    <div class="snipcart-form__field">
                        <snipcart-label class="snipcart__font--tiny" for="firstName">
                            {{ $localize('address_form.firstName') }}
                        </snipcart-label>

                        <snipcart-input name="firstName" autocomplete="given-name"></snipcart-input>
                        <snipcart-field-error name="firstName"></snipcart-field-error>
                    </div>
                    <div class="snipcart-form__field">
                        <snipcart-label class="snipcart__font--tiny" for="name">
                            {{ $localize('address_form.lastName') }}
                        </snipcart-label>

                        <snipcart-input name="name" autocomplete="family-name"></snipcart-input>
                        <snipcart-field-error name="name"></snipcart-field-error>
                    </div>
                </template>
                    
                <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-input--readonly snipcart__font--secondary snipcart__font--bold" v-else>{{ customer.email }}</span>
                    <snipcart-field-error name="email"></snipcart-field-error>
                </div>

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

                    <snipcart-input name="phone"></snipcart-input>
                    <snipcart-field-error name="phone"></snipcart-field-error>
                </div>
            </fieldset>

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

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

            <fieldset class="snipcart-form__set snipcart-form__set--different-shipping" v-if="hasShippingStep">
                <div class="snipcart-form__field">
                    <div class="snipcart-form__field-checkbox">
                        <snipcart-checkbox name="useDifferentShippingAddress"></snipcart-checkbox>

                        <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 :label="labelSubmit"></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"></icon>
                    </div>
                    <h1 class="snipcart-billing-completed__title snipcart__font--subtitle">
                        <icon name="user" class="snipcart__icon--left" v-if="!checkout"></icon>
                        {{ $localize('billing.title') }}
                    </h1>
                </div>

                <button-link
                    v-if="checkout"
                    label="actions.edit"
                    @click="edit"
                ></button-link>
            </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"></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.fullName }}<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"></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 | fullAddress }}</span>
                    </div>
                </div>
            </div>
        </div>
    </overridable>
</transition>

<!-- COMPONENT: button-danger -->
<overridable name="button-danger">
    <base-button 
        class="snipcart-button-danger"
        v-bind="{ ...$props, ...$attrs }"
        v-on="$listeners"
    >
        <template v-for="(value, name) in $slots" v-slot:[name]>
            <slot :name="name"></slot>
        </template>
    </base-button>
</overridable>

<!-- COMPONENT: button-icon -->
<overridable name="button-icon">
    <component
        :is="buttonType"
        v-if="icon"
        :class="['snipcart-button-icon', ...buttonClass]"
        :disabled="state === 'loading' || state === 'disabled'"
        :aria-label="$localize(label)"
        :title="$localize(label)"
        :href="url"
        @click="handleClick"
    >
        <slot>
            <icon :name="icon"></icon>
        </slot>
    </component>
</overridable>

<!-- COMPONENT: button-link -->
<overridable name="button-link">
    <button
        v-if="label"
        class="snipcart-button-link"
        :type="type"
        @click="handleClick"
    >
        <slot>{{ $localize(label) }}</slot>
    </button>
</overridable>

<!-- COMPONENT: button-primary -->
<overridable name="button-primary">
    <base-button 
        class="snipcart-button-primary"
        v-bind="{ ...$props, ...$attrs }"
        v-on="$listeners"
    >
        <template v-for="(value, name) in $slots" v-slot:[name]>
            <slot :name="name"></slot>
        </template>
    </base-button>
</overridable>

<!-- COMPONENT: button-secondary -->
<overridable name="button-secondary">
    <base-button 
        class="snipcart-button-secondary"
        v-bind="{ ...$props, ...$attrs }"
        v-on="$listeners"
    >
        <template v-for="(value, name) in $slots" v-slot:[name]>
            <slot :name="name"></slot>
        </template>
    </base-button>
</overridable>

<div class="snipcart-card-product">
    <div class="snipcart-card-product__container">
        <img
            v-if="image"
            :src="image"
            :alt="name"
            class="snipcart-card-product__image"
        />
        <div class="snipcart-card-product__infos">
            <div class="snipcart-card-product__name">{{ name }}</div>
            <div class="snipcart-card-product__price-ctn">
                <div class="snipcart-card-product__quantity">{{ quantity }}</div>
                <div class="snipcart-card-product__by">×</div>
                <div class="snipcart-card-product__price">{{ price | money(currency) }}</div>
            </div>
        </div>
    </div>
    <div v-if="fileGuid" class="snipcart-card-product__download">
        <button-icon
            icon="continue-arrow"
            label="digital_goods.download"
            :url="url"></button-icon>
    </div>
</div>

<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 :is-cart-summary="!isSideCart">
                    <icon
                        name="plus"
                        class="snipcart__icon--medium snipcart__icon--angled"
                        alt="item.remove_item"
                    ></icon>
                </close-side-cart-action>
            </div>
            <flash-message
                class="snipcart-cart__flash-message"
                type="error"
                v-if="promptItemConfigurationError"
                :title="$localize(`errors.cart_items.${itemConfigurationErrorLocale}.title`)"
                :description="$localize(`errors.cart_items.${itemConfigurationErrorLocale}.description`)"
                icon="box"
            >
                <button-link
                    label="actions.clear_cart"
                    @click="clearCart"
                ></button-link>

                <button-link
                    label="actions.dismiss"
                    @click="dismissItemConfigurationError"  
                ></button-link>
            </flash-message>
            <overridable
                name="cart"
                v-if="hasItems"
            >
                <section class="snipcart-cart__content">
                    <item-list
                        item-template="item-line"
                        class="snipcart-item-list--no-shadow"
                        :show-description="!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">
                            <summary-fees
                                class="snipcart-cart-summary-fees--reverse"
                                :summary-data="summaryFeesProvider"
                            >
                                {{ $localize('cart.shipping_taxes_calculated_at_checkout')}}
                            </summary-fees>

                            <footer v-if="!editingCart || isSideCart" class="snipcart-cart__footer-buttons">
                                <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>
                                <!-- BUTTON: checkout -->
                                <button-primary
                                    label="actions.checkout"
                                    icon="continue-arrow"
                                    :state="checkoutDisabled ? 'disabled' : undefined"
                                    @click="checkout"
                                ></button-primary>
                                <button-link
                                    v-if="isSideCart"
                                    label="cart.view_detailed_cart"
                                    @click="viewDetailedCart"
                                ></button-link>
                            </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" name="back-arrow"></icon>
        <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 || showSummary">
            <icon name="user" class="snipcart-cart-header__icon"></icon>
            {{ $localize('signin_form.signin')}}
        </sign-in-action>

        <sign-out-action class="snipcart-cart-header__option snipcart-cart-header__sign-out" v-if="showAccountMenu || showSummary">
            <icon name="sign-out" class="snipcart-cart-header__icon"></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 || showSummary) && showAccountLink">
            <icon name="user" class="snipcart-cart-header__icon"></icon>
            {{ $localize('customer_dashboard.my_account') }}
        </customer-account-link>

        <show-detailed-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"></icon>
            <template v-if="!hasSubscription">
                {{ itemsCount }}
            </template>
        </show-detailed-cart-action>

        <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-cart-header__icon"></icon>
                <span>
                    {{ cart.total | money(cart.currency) }}
                </span>
                <icon :name="summaryIcon" class="snipcart-cart-header__icon snipcart__icon--medium"></icon>
            </div>

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

<div>
    <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>
                        <button-link label="actions.edit" @click="openSideCart"></button-link>
                    </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">
                            <summary-fees :summary-data="summaryFeesProvider"></summary-fees>
                        </div>
                    </loading-overlay>
                </section>

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

    <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
            :editing-cart="true"
            class="snipcart-cart-summary--edit"
            v-if="editing || isSideCart"
            :is-side-cart="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>

<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__close-icon"
            name="back-arrow"
        />
        <span class="snipcart__font--std snipcart-modal__close-label">
            {{  $localize('actions.back_to_orders') }}
        </span>
    </button>
    <overridable name="change-password-form">

        <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-form-error></snipcart-form-error>

                <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-field-error name="currentPassword"></snipcart-field-error>
                </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-field-error name="password"></snipcart-field-error>
                </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-field-error name="confirmationPassword"></snipcart-field-error>
                </div>

                <snipcart-submit
                    icon="continue-arrow"
                    label="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">
                        </checkout-step>
                    </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-customer-details snipcart__box">
    <!-- Header -->
    <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>
    </div>

    <!-- Basic infos -->
    <div class="snipcart-customer-details__infos snipcart__font--std">
        {{ customer.billingAddress.name  }}
        <br v-if="customer.billingAddress.name" />
        {{ customer.email }}
    </div>

    <!-- Billing address -->
     <customer-details-group
        v-if="customer.billingAddress.hasMinimalRequiredInfo"
        icon-name="location"
        :title="$localize('billing.address')"
        :handle-action-click="editBillingAddress"
        :action="billingAddressAction"
    >
        <address-formatted :address="customer.billingAddress"></address-formatted>
    </customer-details-group>

    <!-- Shipping address -->
     <customer-details-group
        v-if="customer.shippingAddress && customer.shippingAddress.hasMinimalRequiredInfo"
        icon-name="location"
        :title="$localize('shipping.address')"
        :handle-action-click="editShippingAddress"
        :action="shippingAddressAction"
    >
        <address-formatted :address="customer.shippingAddress"></address-formatted>
    </customer-details-group>

    <!-- Password -->
     <customer-details-group
        iconName="lock"
        :title="$localize('signin_form.password')"
        :handle-action-click="editPassword"
        action="edit"
    >
    •••••••••••••••••••
    </customer-details-group>

    <!-- Payment infos -->
    <payment-info v-if="isDisplayCustomerDetails" :customer-details="customerDetails"></payment-info>
</div>

<div class="snipcart-customer-details-group">
	<!-- Icon -->
	<div v-if="iconName" class="snipcart-customer-details-group__icon">
		<icon :name="iconName"></icon>
	</div>
	<!-- Title -->
	<h2 
		v-if="title" 
		class="snipcart-customer-details-group__title snipcart__font--subtitle-small">
		{{ title }}
	</h2>
	<!-- Action -->
	<button-link
		v-if="action !== 'none'"
		class="snipcart-customer-details-group__action"
		:label="buttonLabel"
		@click="handleActionClick"
	></button-link>
	<!-- Content -->
	<div :class="`snipcart-customer-details-group__content ${!title ? 'is-header' : ''}`">
		<slot></slot>
	</div>
</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>
    <customer-notifications-list :notifications="notifications">
    </customer-notifications-list>
    <router-view></router-view>
</layout>

<base-layout-sidebar>
    <!-- Sidebar -->
    <template v-slot:sidebar>
        <overridable name="customer-details">
            <customer-details></customer-details>
        </overridable>
    </template>
     <!-- Main -->
    <overridable name="dashboard">
        <tabs>
            <tab :name="$localize('customer_dashboard.orders')">
                <orders-list></orders-list>
            </tab>
            <tab v-if="subscriptionsIsEnabled" :name="$localize('customer_dashboard.subscriptions')">
                <subscriptions-list></subscriptions-list>
            </tab>
        </tabs>
    </overridable>
</base-layout-sidebar>

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

    <overridable name="edit-customer-address-form">

        <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-form-error></snipcart-form-error>

                <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-field-error name="name"></snipcart-field-error>
                    </div>
                </fieldset>
                <address-fields
                    :type="addressType"
                    :initial-address="initialAddress"
                ></address-fields>

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

                <snipcart-submit
                    label="actions.save_changes"
                    icon="continue-arrow"
                ></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>
    <button-secondary
        icon="back-arrow"
        label="actions.back_to_store"
        has-icon-left
        is-fit-content
        @click="$actions.goBack"
    ></button-secondary>
</section>

<div class="snipcart-error-message">
    <!-- Error -->
    <flash-message
        type="error"
        :title="title"
        :description="description"
    >
        <!-- Action (if required) -->
        <rectify-cart-action
            v-if="actionRequired"
            class="snipcart-error-message__action"
        >
            {{ $localize('actions.apply_changes') }}
        </rectify-cart-action>
    </flash-message>
    <!-- Technical detail -->
    <flash-message
        v-if="showTechnicalDetail && technicalDetail"
        type="info"
        icon="console"
        :description="technicalDetail"
    >
        <em class="snipcart__font--tiny">
            *Notices like this one are only shown in Test mode to help you diagnose issues.
        </em>
    </flash-message>
</div>

<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-form">
        <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-form-error></snipcart-form-error>

                    <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-field-error name="email"></snipcart-field-error>
                    </div>
                    
                    <snipcart-submit
                        label="forgot_password_form.action"
                        icon="continue-arrow"
                    ></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>