{{!----------------------------------------------------------------------------
  // NOTICE:
  // Mega Menu Handlebars Template
  // @update date: 2021.04.27
  // @author: GTGF, DANU
-----------------------------------------------------------------------------}}

{{!----------------------------------------------------------------------------
  // HOWTO NAVBAR SEANIMATION
  // MOBILE ONLY
  // 1. navbarCollpase & navItem Animation on mobile
  // - data-navbar-seani-collapse-mobile="{slide-down / slide-left / slide-right / slide-up}"
  // - data-navbar-seani-navitem-mobile="{stagger-up / stagger-down / stagger-left / stagger-right}"
  // 2. searchCollpase & searchForm Animation on mobile
  // - data-navbar-seani-search-collapse-mobile="{slide-down / slide-left / slide-right / slide-up}"
  // - data-navbar-seani-search-form-mobile="{stagger-up / stagger-down / stagger-left / stagger-right}"
  // 3. Dropdown Expanded
  // - data-navbar-dropdown-expanded="true" 이면, 3차 메뉴까지 전체 출력
  // 4. Full-Menu
  // - data-navbar-full-menu="true" 이면, navbarNav element에 hover시, 전체 메뉴 출력
-----------------------------------------------------------------------------}}

{{!BEGIN: Navbar Wrapper}}
<div id="gtgf-mega-menu-{{headerStyle}}" class="g-navbar-wrap">
  <div class="{{#ifCond headerContainer "==" "wide"}}container-fluid{{else}}container{{/ifCond}}">
    <nav id="gtgf-navbar-{{headerStyle}}" class="navbar navbar-expand-lg g-navbar"
      data-navbar-dropdown-trigger="hover"
      data-navbar-seani-collapse-mobile="slide-left"
      data-navbar-seani-navitem-mobile="stagger-fade-in"
      data-navbar-seani-dropdown="stagger-up"
      data-navbar-seani-search-collapse-mobile="slide-down"
      data-navbar-seani-search-form-mobile="stagger-up"
      data-navbar-fullmenu="false"
      data-navbar-seani-fullmenu-dropdown="height"
      data-navbar-seani-fullmenu-dropdown-menu="stagger-up"
      data-navbar-dropdown-expanded="false">
      
      {{!BEGIN: 토글 (mobile only)}}
      <div id="gtgf-navbar-togglers-mobile-wrapper" class="g-navbar-togglers-mobile-wrapper gap-x-1">

        {{!BEGIN: 사이드바 토글}}
        {{#ifCond sidebarUse "==" "allUsers"}}
          {{! 사이드바 사용 설정이 모든 사용자일 경우}}
          {{!TODO: useMobileSidebarTobbler - 모바일 디바이스에서 사이드바 토글의 출력 여부를 설정해야함}}
          <button id="slidebar-toggler" class="gtgf-toggle-left-slidebar inline-flex items-center justify-center w-10 h-10 focus:outline-none {{sidebarUse}}" type="button" data-target="slidebar-1" title="{{사이드바열기}}">
            <svg class="fill-current" width="22" hight="22" viewBox="0 0 512 512">
              <path d="M352 96l64 0c17.7 0 32 14.3 32 32l0 256c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0c53 0 96-43 96-96l0-256c0-53-43-96-96-96l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-9.4 182.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L242.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"/>
            </svg>
          </button>
        {{else}}
          {{! 사이드바 사용 설정이 모든 사용자가 아닐 경우}}
          {{#ifCond isAdmin "==" "super"}}
            {{! 사용자가 관리자일 경우}}
            <button id="slidebar-toggler" class="gtgf-toggle-left-slidebar inline-flex items-center justify-center w-10 h-10 focus:outline-none" type="button" data-target="slidebar-1" title="{{사이드바열기}}">
              <svg class="fill-current" width="22" hight="22" viewBox="0 0 512 512">
                <path d="M352 96l64 0c17.7 0 32 14.3 32 32l0 256c0 17.7-14.3 32-32 32l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l64 0c53 0 96-43 96-96l0-256c0-53-43-96-96-96l-64 0c-17.7 0-32 14.3-32 32s14.3 32 32 32zm-9.4 182.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L242.7 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l210.7 0-73.4 73.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l128-128z"/>
              </svg>
            </button>
          {{/ifCond}}
        {{/ifCond}}
        {{!END: 사이드바 토글}}

        {{!BEGIN: 검색}}
        {{#ifCond useSearch '==' 'on'}}
          {{#if isShop}}
            {{!BEGIN: 검색 토글}}
            <button class="g-search-toggler" type="button" data-g-navbar-toggler="collapse" data-g-navbar-target="#gtgf-g-navbar-search-collapse" aria-expanded="false" title="검색">
              <svg class="fill-current" width="20" hight="20" viewBox="0 0 512 512">
                <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
              </svg>
            </button>
            {{!END: 검색 토글}}

            {{!BEGIN: 검색창}}
            <div id="gtgf-g-navbar-search-collapse" class="g-navbar-search-collapse g-header-search-wrapper">
              <div class="g-header-search-container">
                {{> header_shop_search}}
              </div>
            </div>
            {{!END: 검색창}}
          {{/if}}
        {{/ifCond}}
        {{!END: 검색}}

      </div>
      {{!BEGIN: 토글 (mobile only)}}

      {{!BEGIN: 로고}}
      <div id="gtgf-navbar-brand-wrapper" class="g-navbar-brand-wrapper">
        <div class="navbar-brand g-navbar-brand">
          {{> logo}}
        </div>
      </div>
      {{!END: 로고}}

      {{!BEGIN: 검색}}
      <div id="gtgf-navbar-search-form-wrapper" class="g-navbar-search-form-wrapper">
        {{#ifCond useSearch '==' 'on'}}
          {{#if isShop}}
            {{> header_shop_search}}
          {{else}}
            {{> header_search}}
          {{/if}}
        {{/ifCond}}
      </div>
      {{!END: 검색}}

      {{!BEGIN: Togglers - 샵/홈, 빠른 메뉴, 다국어, 장바구니}}
      <div id="gtgf-navbar-togglers-wrapper" class="g-navbar-togglers-wrapper">
        <div class="g-navbar-togglers">

          {{!BEGIN: MULTI-LANGUAGE}}
          {{#if multiLangUse}}
            {{! 다국어를 사용하고, 다국어 Toggler 출력 설정이 존재하는 경우}}
            {{#ifCond useMultiLang '==' 'on'}}
              {{> multilang app="header"}}
            {{/ifCond}}
          {{/if}}
          {{!END: MULTI-LANGUAGE}}

          {{!BEGIN: 장바구니}}
          {{#if isShop}}
            {{#ifCond useCart '==' 'on'}}
              <a class="g-nav-toggler-cart hover:bg-gray-50" href="/s/cart" title="장바구니">
                <svg class="w-6 h-6 fill-current" viewBox="0 0 576 512">
                  <path d="M253.3 35.1c6.1-11.8 1.5-26.3-10.2-32.4s-26.3-1.5-32.4 10.2L117.6 192H32c-17.7 0-32 14.3-32 32s14.3 32 32 32L83.9 463.5C91 492 116.6 512 146 512H430c29.4 0 55-20 62.1-48.5L544 256c17.7 0 32-14.3 32-32s-14.3-32-32-32H458.4L365.3 12.9C359.2 1.2 344.7-3.4 332.9 2.7s-16.3 20.6-10.2 32.4L404.3 192H171.7L253.3 35.1zM192 304v96c0 8.8-7.2 16-16 16s-16-7.2-16-16V304c0-8.8 7.2-16 16-16s16 7.2 16 16zm96-16c8.8 0 16 7.2 16 16v96c0 8.8-7.2 16-16 16s-16-7.2-16-16V304c0-8.8 7.2-16 16-16zm128 16v96c0 8.8-7.2 16-16 16s-16-7.2-16-16V304c0-8.8 7.2-16 16-16s16 7.2 16 16z"/>
                </svg>
              </a>
            {{/ifCond}}
          {{/if}}
          {{!END: 장바구니}}

          {{!BEGIN: 홈/샵 토글}}
          {{#if viewSwitchMenu}}
            {{! HOME TO SHOP, SHOP TO HOME Switch menu}}

            {{#if isShop}}
              {{! 현재 위치가 샵인 경우}}
              {{#ifCond useHome '==' 'on'}}
                <a href="{{#if linkHome}}{{linkHome}}{{else}}{{changeLink}}{{/if}}" class="gtgf-mega-menu-home g-nav-toggler-home{{#unless useHome}} g-d-none{{/unless}}" title="{{홈으로가기}}">
                  <svg class="w-6 h-6 fill-current" viewBox="0 0 576 512">
                    <path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/>
                  </svg>
                </a>
              {{/ifCond}}
            {{else}}
              {{! 현재 위치가 홈인 경우}}
              {{#ifCond useShop '==' 'on'}}
                <a href="{{#if linkShop}}{{linkShop}}{{else}}{{changeLink}}{{/if}}"{{#if linkShopNew}} target="_blank"{{/if}} class="gtgf-mega-menu-shop g-nav-toggler-shop{{#unless useShop}} g-d-none{{/unless}}" title="{{샵으로가기}}">
                  <svg class="w-6 h-6 fill-current" viewBox="0 0 448 512">
                    <path d="M160 112c0-35.3 28.7-64 64-64s64 28.7 64 64v48H160V112zm-48 48H48c-26.5 0-48 21.5-48 48V416c0 53 43 96 96 96H352c53 0 96-43 96-96V208c0-26.5-21.5-48-48-48H336V112C336 50.1 285.9 0 224 0S112 50.1 112 112v48zm24 48a24 24 0 1 1 0 48 24 24 0 1 1 0-48zm152 24a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z"/>
                  </svg>
                </a>
              {{/ifCond}}
            {{/if}}

          {{/if}}
          {{!END: 홈/샵 토글}}

          {{!BEGIN: 빠른 메뉴}}
          {{#ifCond useQuickMenu '==' 'on'}}
            {{> quickmenu}}
          {{/ifCond}}
          {{!END: 빠른 메뉴}}
          
          {{!BEGIN: 버튼}}
          {{#ifCond useButton '==' 'on'}}
            <a href="{{#if buttonLink}}{{buttonLink}}{{else}}#{{/if}}" 
              class="flex-shrink-0 order-5 bg-{{buttonColor}}{{#ifCond buttonColor '!==' 'black'}}-500 hover:bg-{{#ifCond buttonHoverColor '==' 'default'}}{{buttonColor}}-600{{else}}{{buttonHoverColor}}-500{{/ifCond}}{{/ifCond}} text-white hover:text-white rounded-{{buttonShape}} text-xs font-bold px-3 py-2 md:text-sm md:px-5 md:py-3" 
              target="{{#if buttonLinkNew}}_blank{{/if}}">
              {{buttonText}}
            </a>
          {{/ifCond}}
          {{!END: 버튼}}

        </div>
      </div>
      {{!END: Togglers - 샵/홈, 빠른 메뉴, 다국어, 장바구니}}

      {{!BEGIN: 메뉴 (mobile only)}}
      <div id="gtgf-navbar-collapse" class="g-navbar-collapse-wrapper ml-2">

        {{!BEGIN: 메뉴 토글}}
        <button class="g-navbar-toggler" data-g-navbar-toggler="collapse" data-se-navbar-target="#gtgf-g-navbar-collapse" aria-expanded="false" type="button">
          <svg class="fill-current" width="20" hight="20" viewBox="0 0 448 512">
            <path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/>
          </svg>
        </button>
        {{!END: 메뉴 토글}}

        {{! 메뉴}}
        {{> nav}}

      </div>
      {{!BEGIN: 메뉴 (mobile only)}}

    </nav>
  </div>
</div>
{{!END: Navbar Wrapper}}