{{!
  // NAV > 1차, 2차, 3차 메뉴 출력 부분을 구분하여, type{num}_tmpl.html 파일로 include하여 출력한다.
  // Tmpl: nav_tmpl.html
  // @update date: 2024.04.01
  // @author: GTGF
}}

<style>
  #nav-bg { z-index: 2050; }
  #nav-wrapper { z-index: 2060; }

  .g-navbar-nav {
    column-gap: 0;
  }
  .g-tab-content > .g-tab-pane {
    display: none;
  }
  .g-tab-content > .active {
    display: block;
  }
  .fade:not(.show) {
    opacity: 0;
    visibility: hidden;
  }
  
  .g-tab-on-content {
    display: none;
  }

  .g-tab-on-content.active {
    display: block;
  }

  /** 
   * Active
   * - g-active: 메뉴 활성화 상태
   * -- active와 구분하여 사용
   * -- navbar-link인 경우에만 적용  
   */
  .g-navbar-link.active:after,
  .g-navbar-link.g-active:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: black;
  }
  .g-navbar-link.g-on,
  .g-nav-link.g-on {
    /* color: var(--theme-500); */
    font-weight: bold;
  }
  
  /* 타입 1의 2차 메뉴 tab active */
  /* .nav-submenu-type-1 .nav-sub-1 .g-nav-link.g-on, */
  .nav-submenu-type-1 .nav-sub-1 .g-nav-link.active {
    background-color: #f3f4f6;
  }

  /* 타입 2의 2차 메뉴 tab active */
  .nav-submenu-type-2 .nav-sub-1 .g-nav-link.active .g-hover-underline-item {
    background-position: 0 100%;
    /* font-weight: bold; */
  }
  /* .nav-submenu-type-2 .nav-sub-1 .g-nav-link.active svg {
    transform: rotate(180deg);
  } */
  .nav-submenu-type-1 .nav-sub-1 .g-nav-link.g-on,
  .nav-submenu-type-1 .nav-sub-1 .g-nav-link.active {
    --tw-bg-opacity: 1;
    background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
  }

  /* 타입 2의 2차 메뉴 tab active */
  .nav-submenu-type-2 .nav-sub-1 .g-nav-link.g-on .g-hover-underline-item,
  .nav-submenu-type-2 .nav-sub-1 .g-nav-link.active .g-hover-underline-item {
    background-position: 0 100%;
    font-weight: bold;
  }
  
  /* 3차 메뉴 */
  .nav-sub-2 .nav-sub-2-list {
    grid-template-rows: repeat(8, minmax(0, 1fr));
  }

  /* #nav-bg {
    position: absolute;
    height: 0;
    opacity: 0;
  } */
</style>

{{!BEGIN: Navbar}} 
<nav class="g-navbar header-item" 
  data-seani-nav="nav-bg"
  data-seani-nav-target="#nav-bg"
  aria-label="Global Navigation">

  {{!BEGIN: Navbar Collapse}}
  <div class="g-navbar-collapse">
    <div class="nav-menu px-6">

      {{!BEGIN: 1차 메뉴}}
      {{!
        // 1차 메뉴 출력: nav menu items 
        // Classes & Structure
        // Navbar
        // - g-navbar-nav > g-navbar-item > g-navbar-link
        // Tab
        // - .g-tabs(list container) > .g-tab-item > .g-tab-link(생략 가능) / [data-g-toggle='tab'](필수)
        // 
        // toggle:
        // - 1. collapse: collapse, height
        // - 2. tab: fade, opacity
        // toggle trigger: 
        // - 1. click
        // - 2. hover
      }}
      <div class="nav-main">
        <ul class="nav-main-list g-navbar-nav g-tabs flex items-center overflow-x-auto">
          {{#each menuItems.menu_1}}
            <li class="g-navbar-item g-tab-item">
              {{#if is_sub}}
                {{! 하위 메뉴가 존재하는 경우에만 Tab이 동작}}
                <a href="{{href}}" 
                  class="g-navbar-link relative h-24 flex items-center justify-center whitespace-nowrap text-base font-medium text-gray-900 tracking-wide px-5{{#ifCond on '==' 'on'}} g-on{{/ifCond}}"
                  data-g-toggle="tab"
                  data-g-toggle-active="true"
                  data-g-target="#{{key}}"
                  data-on="{{on}}"
                  data-is-sub="{{is_sub}}"
                  role="nav-tab"
                  aria-control="{{menu}}">
                  {{menu}}
                </a>  
              {{else}}
                {{! 하위 메뉴가 없는 경우에는 링크로 이동}}
                <a href="{{href}}" 
                  class="g-navbar-link relative h-24 flex items-center justify-center whitespace-nowrap text-base font-medium text-gray-900 tracking-wide px-5{{#ifCond on '==' 'on'}} g-on{{/ifCond}}"
                  data-on="{{on}}"
                  data-is-sub="{{is_sub}}">
                  {{menu}}
                </a>  
              {{/if}}
            </li>
          {{/each}}
        </ul>
      </div>
      {{!END: 1차 메뉴}}
      
      {{!BEGIN: Background}}
      <div id="nav-bg" 
        class="absolute{{#ifCond useTopbar '==' 'on'}} mt-px top-36{{else}} top-24{{/ifCond}} left-0 z-40 w-full opacity-0 bg-white shadow"
        data-seani-target="#nav-wrapper">
      </div>
      {{!END: Background}}

      {{!BEGIN: 2, 3차 메뉴}}
      <div id="nav-wrapper" class="nav-outer-wrapper absolute{{#ifCond useTopbar '==' 'on'}} mt-px top-36{{else}} top-24{{/ifCond}} left-0 z-50 w-full">
        {{!
          // 2차 메뉴 출력
          // Classes & Structure
          // Nav
          // - g-navs > g-nav-item > g-nav-link
          // Tab
          // - .g-tabs(list container) > .g-tab-item > .g-tab-link(생략 가능) / [data-g-toggle='tab'](필수)
          // * menu classes
          // 1. nav-sub: wrapper class
          // 1-1. nav-sub-1: 2차 메뉴 영역
          // 1-2. nav-sub-1-list: 2차 메뉴 리스트, 2차 메뉴 아이템 컨테이너
          // 1-3. nav-sub-1-item: 2차 메뉴 아이템
          // 1-4. nav-sub-1-link: 2차 메뉴 아이템 링크
          // - 2차 메뉴 출력 시, 출력 스타일을 선택할 수 있도록
        }}
        <div class="g-tab-content">

          {{#each menuItems.menu_2}}
            {{> (lookup . 'headerSkinType') top=..}}
          {{/each}}
          
        </div>
      </div>
      {{!END: 2, 3차 메뉴}}

    </div>
  </div>
  {{!END: Navbar Collapse}}

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