# Header

<snt-app
  #default="{
    _, theme, breakpoint, router, route, scrollUp, scrollY, customerName,
    isAuth, purchasesQuantity, productCategories, productBrands
  }"
  class="lush">
  <snt-section name="โฆษณา">
    <template v-if="!_.includes(['SalePageCheckout'], route.name)">
      <snt-text-editor
        :html="`
          <div style='color:#fff;font-size:14px;'>
            ส่งฟรีเมื่อสั่งซื้อตั้งแต่ 300 บาทขึ้นไป
          </div>`"
        class="lush-announcement"/>
    </template>
  </snt-section>
  <snt-section name="หัวข้อ">
    <template v-if="!_.includes(['SalePageCheckout'], route.name)">
      <snt-navbar
        #default="{
          logo,
          menuHome,
          menuProducts,
          extendLinks,
          logout,
          props: {
            align
          }
        }"
        :menu-home="{ label: 'Home' }"
        :menu-products="{ label: 'Shop' }"
        :elevation="0"
        :align="`left`"
        :class="{
          'lush-navbar--notop': scrollY > 100,
          'lush-navbar--fixed':
            (scrollUp > 0 && scrollY > 100 )
            || (_.includes([
                'SalePageProducts',
                'SalePageCollection',
                'SalePageCategoryProducts',
                'SalePageCategoryCollection'
              ], route.name) && scrollY > 200)
        }"
        class="lush-navbar"
        src="https://waave.s3.ap-southeast-1.amazonaws.com/uploads/asset_image/potatona.jpg">
        <snt-container
          class="lush-navbar__container"
          fluid>
          <snt-row>
            <snt-col
              :cols="(breakpoint.xs ? 6 : (breakpoint.sm ? 4 : (align === 'center' ? 4 : 2)))"
              :order="(align === 'center' ? 2 : (align === 'right' ? 3 : 1))"
              class="lush-navbar__col lush-navbar-col__logo">
              <snt-link
                #activator
                :to="{ name: 'SalePage' }"
                class="lush-navbar-logo">
                <img
                  :src="logo"
                  height="100%"
                  width="100%" />
              </snt-link>
            </snt-col>
            <snt-col
              v-if="!breakpoint.xs"
              :cols="breakpoint.sm ? 4 : (align === 'center' ? 4 : null)"
              :order="(align === 'center' ? 1 : 2)"
              class="lush-navbar__col lush-navbar-link">
              <div
                v-if="_.includes([
                  'SalePageCategoryProducts',
                  'SalePageCategoryCollection'
                ], route.name) && scrollY > 200 && !breakpoint.xs"
                class="lush-navbar__title">
                {{ route.params.categoryName }}
              </div>
              <div class="spacer" />
              <snt-dialog
                :class="{ 'lush-search--full': _.includes([
                  'SalePage',
                ], route.name) }"
                content-class="lush-search__dialog"
                transition="scroll-y-transition">
                <template #activator="{ on }">
                  <snt-text-field
                    :dense="!_.includes([
                      'SalePage',
                    ], route.name)"
                    value="ค้นหาสินค้าที่ต้องการ"
                    class="lush-search__input"
                    append-icon="mdi-magnify"
                    filled
                    readonly
                    v-on="on"/>
                </template>
                <template #default="{ attrs, close }">
                  <div class="lush-dialog__container">
                    <div class="lush-navbar-dialog__title">
                      <snt-link
                        #activator
                        :to="{ name: 'SalePage' }"
                        class="lush-navbar-logo">
                        <img
                          :src="logo"
                          height="100%"
                          width="100%" />
                      </snt-link>
                      <div class="spacer"></div>
                      <snt-icon
                        class="lush-navbar-cart__close"
                        color="#2f2f2f"
                        size="32"
                        icon="mdi-close"
                        @click="close()" />
                      <snt-collapse v-if="isAuth">
                        <template v-slot="{ collapse, setCollapse }">
                          <div class="navbar-user">
                            <snt-icon
                              class="lush-navbar-login"
                              color="#2f2f2f"
                              size="32"
                              icon="mdi-emoticon-outline"
                              @click="setCollapse(!collapse)" />
                            <div
                              v-show="!collapse"
                              class="lush-navbar-login__menu">
                              <div class="lush-navbar-login__name"> Hi! {{ customerName }} </div>
                              <div class="lush-navbar-login__divider"></div>
                              <snt-button
                                :to="{ name: 'SalePageOrders' }"
                                label="Orders"
                                text
                                @click="setCollapse(!collapse)" />
                              <div class="lush-navbar-login__divider"></div>
                              <snt-button
                                label="Logout"
                                text
                                @click="logout();setCollapse(!collapse);" />
                            </div>
                          </div>
                        </template>
                      </snt-collapse>
                      <snt-dialog
                        v-else
                        :max-width="400"
                        content-class="lush-navbar-login__dialog"
                        transition="fade-transition"
                        scrollable>
                        <template #activator="{ on }">
                          <snt-icon
                            class="lush-navbar-login"
                            color="#2f2f2f"
                            size="32"
                            icon="mdi-emoticon-happy-outline"
                            v-on="on" />
                        </template>
                        <template #default="{ close }">
                          <div class="lush-navbar-login__content">
                            <snt-login @click:close="close()">
                              <template #header>
                                <div>
                                  <snt-icon
                                    class="lush-navbar-login__close"
                                    size="42"
                                    icon="mdi-close"
                                    @click="close()" />
                                  <div class="lush-navbar-login__title">
                                    Login
                                  </div>
                                </div>
                              </template>
                            </snt-login>
                          </div>
                        </template>
                      </snt-dialog>
                      <snt-dialog
                        :max-width="375"
                        content-class="lush-navbar-cart-dialog"
                        transition="slide-x-reverse-transition"
                        scrollable>
                        <template #activator="{ on, attrs }">
                          <div
                            class="lush-navbar-cart"
                            v-on="on">
                            <snt-icon
                              color="#2f2f2f"
                              size="32"
                              icon="mdi-shopping-outline" />
                            <div v-if="purchasesQuantity"
                                class="lush-navbar-cart__count">
                              {{ purchasesQuantity }}
                            </div>
                          </div>
                        </template>
                        <template #default="{ attrs, on: { close } }">
                          <div class="lush-navbar-cart__content" >
                            <div class="lush-navbar-cart__title">
                              <div>Basket ({{purchasesQuantity}})</div>
                              <snt-icon
                                class="lush-navbar-cart__close"
                                size="32"
                                color='#2f2f2f'
                                icon="mdi-close"
                                @click="close()" />
                            </div>
                            <snt-cart
                              #default="{ items, totalPrice, selectQuantity, selectedPurchase, remove, submit }"
                              class="lush-navbar-cart">
                              <template v-if="selectedPurchase.length">
                                <div class="lush-navbar-cart__container">
                                  <template v-for="item in items">
                                    <div
                                      :key="`pop-cart-item-${item.id}`"
                                      class="lush-navbar-cart-item">
                                      <snt-button
                                        class="lush-navbar-cart-remove__button"
                                        icon="mdi-close"
                                        small
                                        @click="remove(item)"/>
                                      <snt-image
                                        :src="item.pictureUrl"
                                        height="112px"
                                        width="85px" />
                                      <div class="lush-navbar-cart-item__content">
                                        <div class="lush-navbar-cart-item__title">
                                          <div>{{ item.name }}</div>
                                          <div v-if="item.discount">
                                            <s class="lush-navbar-cart-item__discount">{{ item.price | toLocaleString }} ฿</s>
                                            {{ (item.price - item.discount) | toLocaleString }} ฿
                                          </div>
                                          <div v-else>{{ item.price | toLocaleString }} ฿</div>
                                        </div>
                                        <div class="lush-navbar-cart-item__options">
                                          <div>
                                            <snt-number-field
                                              :value="item.quantity"
                                              :min="1"
                                              :max="item.available"
                                              controls
                                              center
                                              @input="selectQuantity(item, $event)" />
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </template>
                                </div>
                                <div class="lush-navbar-cart__actions">
                                  <div class="lush-navbar-cart__total">
                                    <div>
                                        Total
                                    </div>
                                    <div>
                                      {{ totalPrice | toLocaleString }} ฿
                                    </div>
                                  </div>
                                  <snt-button
                                    :to="{ name: 'SalePageCheckout' }"
                                    :disabled="!selectedPurchase.length"
                                    color="primary"
                                    class="lush-cart-action__submit"
                                    tile
                                    depressed
                                    x-large
                                    block>
                                    Checkout
                                  </snt-button>
                                </div>
                              </template>
                              <div v-else class="snt-cart-no-data">
                                <div class="snt-cart-no-data">
                                  <snt-icon icon="mdi-cart-variant" size="64" />
                                  <div class="snt-cart-no-data__title">
                                    ยังไม่มีสินค้าในตะกร้า
                                  </div>
                                  <snt-button
                                    :to="{ name: 'SalePageProducts' }"
                                    class="snt-cart__submit"
                                    color="primary"
                                    depressed
                                    large>
                                    ไปซื้อสินค้า
                                  </snt-button>
                                </div>
                              </div>
                            </snt-cart>
                          </div>
                        </template>
                      </snt-dialog>
                    </div>
                    <div class="lush-search--full">
                      <snt-text-field
                        class="lush-search__input lush-search__input--large"
                        placeholder="Search"
                        append-icon="mdi-magnify"
                        autofocus
                        filled
                        @keypress.enter="router.push({
                          name: 'SalePageProducts',
                          query: {
                            search: $event.target.value,
                          }
                        })" />
                    </div>
                    <div class="lush-navbar-category">
                      <div class="lush-navbar-category__title">You might like:</div>
                      <div class="lush-navbar-category__items">
                        <div
                          class="lush-hero-category-label"
                          @click="router.push({
                            name: 'SalePageProducts',
                          });close()">
                          {{ menuProducts.label }}
                        </div>
                        <template v-for="item in productCategories">
                          <div v-if="item.name"
                              :key="`cat-link-${item.id}`"
                              class="lush-hero-category-label"
                              @click="router.push({
                                name: 'SalePageCategoryProducts',
                                params: {
                                  categoryId: item.id,
                                  categoryName: item.name
                                }
                              });close()">
                            {{ item.name }}
                          </div>
                        </template>
                      </div>
                    </div>
                  </div>
                </template>
              </snt-dialog>
            </snt-col>
            <snt-col
              :cols="breakpoint.xs ? 6 : (breakpoint.sm ? 4 : (align === 'center' ? 4 : 1))"
              :order="(align === 'right' ? 1 : 3)"
              class="lush-navbar__col lush-navbar-user">
              <snt-dialog
                v-if="breakpoint.xs"
                :class="{ 'lush-search--full': _.includes([
                  'SalePage',
                ], route.name) }"
                content-class="lush-search__dialog"
                transition="scroll-y-transition">
                <template #activator="{ on }">
                  <snt-icon
                    class="lush-search__icon"
                    color="#2f2f2f"
                    size="32"
                    icon="mdi-magnify"
                    v-on="on" />
                </template>
                <template #default="{ attrs, close }">
                  <div class="lush-dialog__container">
                    <div class="lush-navbar-dialog__title">
                      <snt-link
                        #activator
                        :to="{ name: 'SalePage' }"
                        class="lush-navbar-logo">
                        <img
                          :src="logo"
                          height="100%"
                          width="100%" />
                      </snt-link>
                      <div class="spacer"></div>
                      <snt-icon
                        class="lush-navbar-cart__close"
                        color="#2f2f2f"
                        size="32"
                        icon="mdi-close"
                        @click="close()" />
                      <snt-collapse v-if="isAuth">
                        <template v-slot="{ collapse, setCollapse }">
                          <div class="navbar-user">
                            <snt-icon
                              class="lush-navbar-login"
                              color="#2f2f2f"
                              size="32"
                              icon="mdi-emoticon-outline"
                              @click="setCollapse(!collapse)" />
                            <div
                              v-show="!collapse"
                              class="lush-navbar-login__menu">
                              <div class="lush-navbar-login__name"> Hi! {{ customerName }} </div>
                              <div class="lush-navbar-login__divider"></div>
                              <snt-button
                                :to="{ name: 'SalePageOrders' }"
                                label="Orders"
                                text
                                @click="setCollapse(!collapse)" />
                              <div class="lush-navbar-login__divider"></div>
                              <snt-button
                                label="Logout"
                                text
                                @click="logout();setCollapse(!collapse);" />
                            </div>
                          </div>
                        </template>
                      </snt-collapse>
                      <snt-dialog
                        v-else
                        :max-width="400"
                        content-class="lush-navbar-login__dialog"
                        transition="fade-transition"
                        scrollable>
                        <template #activator="{ on }">
                          <snt-icon
                            class="lush-navbar-login"
                            color="#2f2f2f"
                            size="32"
                            icon="mdi-emoticon-happy-outline"
                            v-on="on" />
                        </template>
                        <template #default="{ close }">
                          <div class="lush-navbar-login__content">
                            <snt-login @click:close="close()">
                              <template #header>
                                <div>
                                  <snt-icon
                                    class="lush-navbar-login__close"
                                    size="42"
                                    icon="mdi-close"
                                    @click="close()" />
                                  <div class="lush-navbar-login__title">
                                    Login
                                  </div>
                                </div>
                              </template>
                            </snt-login>
                          </div>
                        </template>
                      </snt-dialog>
                      <snt-dialog
                        :max-width="375"
                        content-class="lush-navbar-cart-dialog"
                        transition="slide-x-reverse-transition"
                        scrollable>
                        <template #activator="{ on, attrs }">
                          <div
                            class="lush-navbar-cart"
                            v-on="on">
                            <snt-icon
                              color="#2f2f2f"
                              size="32"
                              icon="mdi-shopping-outline" />
                            <div v-if="purchasesQuantity"
                                class="lush-navbar-cart__count">
                              {{ purchasesQuantity }}
                            </div>
                          </div>
                        </template>
                        <template #default="{ attrs, on: { close } }">
                          <div class="lush-navbar-cart__content" >
                            <div class="lush-navbar-cart__title">
                              <div>Basket ({{purchasesQuantity}})</div>
                              <snt-icon
                                class="lush-navbar-cart__close"
                                size="32"
                                color='#2f2f2f'
                                icon="mdi-close"
                                @click="close()" />
                            </div>
                            <snt-cart
                              #default="{ items, totalPrice, selectQuantity, selectedPurchase, remove, submit }"
                              class="lush-navbar-cart">
                              <template v-if="selectedPurchase.length">
                                <div class="lush-navbar-cart__container">
                                  <template v-for="item in items">
                                    <div
                                      :key="`pop-cart-item-${item.id}`"
                                      class="lush-navbar-cart-item">
                                      <snt-button
                                        class="lush-navbar-cart-remove__button"
                                        icon="mdi-close"
                                        small
                                        @click="remove(item)"/>
                                      <snt-image
                                        :src="item.pictureUrl"
                                        height="112px"
                                        width="85px" />
                                      <div class="lush-navbar-cart-item__content">
                                        <div class="lush-navbar-cart-item__title">
                                          <div>{{ item.name }}</div>
                                          <div v-if="item.discount">
                                            <s class="lush-navbar-cart-item__discount">{{ item.price | toLocaleString }} ฿</s>
                                            {{ (item.price - item.discount) | toLocaleString }} ฿
                                          </div>
                                          <div v-else>{{ item.price | toLocaleString }} ฿</div>
                                        </div>
                                        <div class="lush-navbar-cart-item__options">
                                          <div>
                                            <snt-number-field
                                              :value="item.quantity"
                                              :min="1"
                                              :max="item.available"
                                              controls
                                              center
                                              @input="selectQuantity(item, $event)" />
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </template>
                                </div>
                                <div class="lush-navbar-cart__actions">
                                  <div class="lush-navbar-cart__total">
                                    <div>
                                        Total
                                    </div>
                                    <div>
                                      {{ totalPrice | toLocaleString }} ฿
                                    </div>
                                  </div>
                                  <snt-button
                                    :to="{ name: 'SalePageCheckout' }"
                                    :disabled="!selectedPurchase.length"
                                    color="primary"
                                    class="lush-cart-action__submit"
                                    tile
                                    depressed
                                    x-large
                                    block>
                                    Checkout
                                  </snt-button>
                                </div>
                              </template>
                              <div v-else class="snt-cart-no-data">
                                <div class="snt-cart-no-data">
                                  <snt-icon icon="mdi-cart-variant" size="64" />
                                  <div class="snt-cart-no-data__title">
                                    ยังไม่มีสินค้าในตะกร้า
                                  </div>
                                  <snt-button
                                    :to="{ name: 'SalePageProducts' }"
                                    class="snt-cart__submit"
                                    color="primary"
                                    depressed
                                    large>
                                    ไปซื้อสินค้า
                                  </snt-button>
                                </div>
                              </div>
                            </snt-cart>
                          </div>
                        </template>
                      </snt-dialog>
                    </div>
                    <div class="lush-search--full">
                      <snt-text-field
                        class="lush-search__input lush-search__input--large"
                        placeholder="Search"
                        append-icon="mdi-magnify"
                        autofocus
                        filled
                        @keypress.enter="router.push({
                          name: 'SalePageProducts',
                          query: {
                            search: $event.target.value,
                          }
                        })" />
                    </div>
                    <div class="lush-navbar-category">
                      <div class="lush-navbar-category__title">You might like:</div>
                      <div class="lush-navbar-category__items">
                        <div
                          class="lush-hero-category-label"
                          @click="router.push({
                            name: 'SalePageProducts',
                          });close()">
                          {{ menuProducts.label }}
                        </div>
                        <template v-for="item in productCategories">
                          <div v-if="item.name"
                              :key="`cat-link-${item.id}`"
                              class="lush-hero-category-label"
                              @click="router.push({
                                name: 'SalePageCategoryProducts',
                                params: {
                                  categoryId: item.id,
                                  categoryName: item.name
                                }
                              });close()">
                            {{ item.name }}
                          </div>
                        </template>
                      </div>
                    </div>
                  </div>
                </template>
              </snt-dialog>
              <snt-collapse v-if="isAuth">
                <template v-slot="{ collapse, setCollapse }">
                  <div class="navbar-user">
                    <snt-icon
                      class="lush-navbar-login"
                      color="#2f2f2f"
                      size="32"
                      icon="mdi-emoticon-outline"
                      @click="setCollapse(!collapse)" />
                    <div
                      v-show="!collapse"
                      class="lush-navbar-login__menu">
                      <div class="lush-navbar-login__name"> Hi! {{ customerName }} </div>
                      <div class="lush-navbar-login__divider"></div>
                      <snt-button
                        :to="{ name: 'SalePageOrders' }"
                        label="Orders"
                        text
                        @click="setCollapse(!collapse)" />
                      <div class="lush-navbar-login__divider"></div>
                      <snt-button
                        label="Logout"
                        text
                        @click="logout();setCollapse(!collapse);" />
                    </div>
                  </div>
                </template>
              </snt-collapse>
              <snt-dialog
                v-else
                :max-width="400"
                content-class="lush-navbar-login__dialog"
                transition="fade-transition"
                scrollable>
                <template #activator="{ on }">
                  <snt-icon
                    class="lush-navbar-login"
                    color="#2f2f2f"
                    size="32"
                    icon="mdi-emoticon-happy-outline"
                    v-on="on" />
                </template>
                <template #default="{ close }">
                  <div class="lush-navbar-login__content">
                    <snt-login @click:close="close()">
                      <template #header>
                        <div>
                          <snt-icon
                            class="lush-navbar-login__close"
                            size="42"
                            icon="mdi-close"
                            @click="close()" />
                          <div class="lush-navbar-login__title">
                            Login
                          </div>
                        </div>
                      </template>
                    </snt-login>
                  </div>
                </template>
              </snt-dialog>
              <snt-dialog
                :max-width="375"
                content-class="lush-navbar-cart-dialog"
                transition="slide-x-reverse-transition"
                scrollable>
                <template #activator="{ on, attrs }">
                  <div
                    class="lush-navbar-cart"
                    v-on="on">
                    <snt-icon
                      color="#2f2f2f"
                      size="32"
                      icon="mdi-shopping-outline" />
                    <div v-if="purchasesQuantity"
                        class="lush-navbar-cart__count">
                      {{ purchasesQuantity }}
                    </div>
                  </div>
                </template>
                <template #default="{ attrs, on: { close } }">
                  <div class="lush-navbar-cart__content" >
                    <div class="lush-navbar-cart__title">
                      <div>Basket ({{purchasesQuantity}})</div>
                      <snt-icon
                        class="lush-navbar-cart__close"
                        size="32"
                        color='#2f2f2f'
                        icon="mdi-close"
                        @click="close()" />
                    </div>
                    <snt-cart
                      #default="{ items, totalPrice, selectQuantity, selectedPurchase, remove, submit }"
                      class="lush-navbar-cart">
                      <template v-if="selectedPurchase.length">
                        <div class="lush-navbar-cart__container">
                          <template v-for="item in items">
                            <div class="lush-navbar-cart-item">
                              <snt-button
                                class="lush-navbar-cart-remove__button"
                                icon="mdi-close"
                                small
                                @click="remove(item)"/>
                              <snt-image
                                :src="item.pictureUrl"
                                height="112px"
                                width="85px" />
                              <div class="lush-navbar-cart-item__content">
                                <div class="lush-navbar-cart-item__title">
                                  <div>{{ item.name }}</div>
                                  <div>{{ item.price | toLocaleString }}</div>
                                </div>
                                <div class="lush-navbar-cart-item__options">
                                  <div>
                                    <snt-number-field
                                      :value="item.quantity"
                                      :min="1"
                                      :max="item.available"
                                      controls
                                      center
                                      @input="selectQuantity(item, $event)" />
                                  </div>
                                </div>
                              </div>
                            </div>
                          </template>
                        </div>
                        <div class="lush-navbar-cart__actions">
                          <div class="lush-navbar-cart__total">
                            <div>
                                Total
                            </div>
                            <div>
                              {{ totalPrice | toLocaleString }} ฿
                            </div>
                          </div>
                          <snt-button
                            :to="{ name: 'SalePageCheckout' }"
                            :disabled="!selectedPurchase.length"
                            color="primary"
                            class="lush-cart-action__submit"
                            tile
                            depressed
                            x-large
                            block>
                            Checkout
                          </snt-button>
                        </div>
                      </template>
                      <div v-else class="snt-cart-no-data">
                        <div class="snt-cart-no-data">
                          <snt-icon icon="mdi-cart-variant" size="64" />
                          <div class="snt-cart-no-data__title">
                            ยังไม่มีสินค้าในตะกร้า
                          </div>
                          <snt-button
                            :to="{ name: 'SalePageProducts' }"
                            class="snt-cart__submit"
                            color="primary"
                            depressed
                            large>
                            ไปซื้อสินค้า
                          </snt-button>
                        </div>
                      </div>
                    </snt-cart>
                  </div>
                </template>
              </snt-dialog>
            </snt-col>
          </snt-row>
        </snt-container>
      </snt-navbar>
      <div></div>
    </template>
  </snt-section>
</snt-app>