{{!
  // topbar_tmpl.html
  // - 탑바 template
  // @update date: 2024.06.04
  // @author: GTGF, DANU
}}

{{!BEGIN: 탑바 전체 영역}}
<div id="gtgf-topbar-basic" 
  class="gtgf-topbar bg-gray-100 hidden lg:block"
  data-display-login="mypage,logout,response,connect,admin" 
  data-display-logout="login,signup,findme,connect">

  <div class="{{#ifCond headerContainer '==' 'wide'}}px-12{{else}}container{{/ifCond}}">
    <div class="gtgf-topbar-nav g-topbar-nav">

      {{#if isMember}}
        {{! 사용자가 회원인 경우}}
        <div class="gtgf-topbar-ul gtgf-topbar-login flex items-center justify-end py-2 lg:py-3">
          <ul class="g-topbar-list flex items-center">

            {{!BEGIN: 장바구니}}
            {{#if isShop}}
              <li class="flex-none px-2">
                <a href="/s/cart" 
                  class="text-xs font-bold text-gray-500 px-1.5 py-1 rounded-lg transition duration-300 ease-in-out hover:text-white hover:bg-gray-800">
                  {{장바구니}}
                </a>
              </li>
            {{/if}}
            {{!END: 장바구니}}

            {{!BEGIN: 마이페이지}}
            <li class="gtgf-topbar-mypage flex-none px-2">
              <a href="{{mypageLink}}" 
                class="text-xs font-bold text-gray-500 px-1.5 py-1 rounded-lg transition duration-300 ease-in-out hover:text-white hover:bg-gray-800">
                {{마이페이지}}
              </a>
            </li>
            {{!END: 마이페이지}}

            {{!BEGIN: 알림}}
            <!-- ! responseCnt 값 없음 -->
            <li class="gtgf-topbar-response flex-none leading-none px-2">
              <a href="/response" 
                class="gtgf-modal group inline-flex items-center gap-1 text-xs font-bold text-gray-500 px-1.5 py-1 rounded-lg transition duration-300 ease-in-out hover:text-white hover:bg-gray-800" 
                data-opt="{'f':0, 'hb':1}" 
                data-mode="response" 
                data-modal-size="lg" 
                data-modal-height="xl" 
                data-pos="c" 
                data-modal-title="알림">
                <svg class="stroke-current" width="14" height="14" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z"/>
                  <path d="M10 5a2 2 0 0 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" />
                  <path d="M9 17v1a3 3 0 0 0 6 0v-1" />
                </svg>
                <span class="leading-none">{{알림}}</span>
                {{#ifCond responseCnt ">" 0}}
                  <span class="text-xs font-normal leading-none group-hover:text-gray-400">
                    {{responseCnt}}
                  </span>
                {{/ifCond}}
              </a>
            </li>
            {{!END: 알림}}

            {{!BEGIN: 관리자 메뉴}}
            {{#ifvalue isAdmin value="super"}}
              {{! 사용자가 관리자일 경우}}

              {{!BEGIN: 접속}}
              <!-- ! totalConnCnt, mbConnCnt 값 없음 -->
              <li class="gtgf-topbar-connect flex-none px-2">
                <a href="{{connectLink}}" 
                  class="group text-xs font-bold text-gray-500 px-1.5 py-1 rounded-lg transition duration-300 ease-in-out hover:text-white hover:bg-gray-800">
                  <span>{{접속}}</span>
                  <span class="ml-1 text-xs font-normal group-hover:text-gray-300">
                    {{totalConnCnt}} / {{mbConnCnt}}
                  </span>
                </a>
              </li>
              {{!END: 접속}}

              {{!BEGIN: 관리}}
              <li class="gtgf-topbar-admin flex-none px-2">
                <a href="{{adminLink}}" 
                  class="text-xs font-bold text-gray-500 px-1.5 py-1 rounded-lg transition duration-300 ease-in-out hover:text-white hover:bg-gray-800">
                  {{관리}}
                </a>
              </li>
              {{!END: 관리}}

            {{/ifvalue}}
            {{!END: 관리자 메뉴}}

            {{!BEGIN: 로그아웃}}
            <li class="gtgf-topbar-logout flex-none leading-none px-2">
              <a href="{{logoutLink}}" 
                class="group inline-flex items-center gap-1 text-xs font-bold text-gray-500 px-1 py-1 rounded-lg transition duration-300 ease-in-out hover:text-white hover:bg-gray-800">
                <svg class="stroke-current" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
                  <polyline points="16 17 21 12 16 7" />
                  <line x1="21" y1="12" x2="9" y2="12" />
                </svg>
                <span class="leading-none">{{로그아웃}}</span>
              </a>
            </li>
            {{!END: 로그아웃}}

          </ul>
        </div>

      {{else}}
        {{! 사용자가 회원이 아닌 경우}}
        <div class="gtgf-topbar-ul gtgf-topbar-login flex items-center justify-end py-2 md:py-3 lg:py-4">
          <ul class="g-topbar-list flex items-center">

            {{!BEGIN: 장바구니}}
            {{#if isShop}}
              <li class="flex-none px-2">
                <a href="/s/cart" 
                  class="text-xs font-bold text-gray-500 px-1.5 py-1 rounded-lg transition duration-300 ease-in-out hover:text-white hover:bg-gray-800">
                  {{장바구니}}
                </a>
              </li>
            {{/if}}
            {{!END: 장바구니}}

            {{!BEGIN: 회원가입}}
            <li class="gtgf-topbar-signup flex-none px-2">
              <a href="{{registerLink}}" 
                class="text-xs font-bold text-gray-500 px-1.5 py-1 rounded-lg transition duration-300 ease-in-out hover:text-white hover:bg-gray-800">
                {{회원가입}}
              </a>
            </li>
            {{!END: 회원가입}}

            {{!BEGIN: 로그인}}
            <li class="gtgf-topbar-login flex-none leading-none px-2">
              <a class="{{#if slidebarToggle}}gtgf-toggle-slidebar {{/if}}group inline-flex items-center gap-1 text-xs font-bold text-gray-500 px-1.5 py-1 rounded-lg transition duration-300 ease-in-out hover:text-white hover:bg-gray-800" 
                {{#if slidebarToggle}}data-target="slidebar-1"{{else}}href="{{loginLink}}"{{/if}}>
                <svg class="stroke-current" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
                  <polyline points="10 17 15 12 10 7" />
                  <line x1="15" y1="12" x2="3" y2="12" />
                </svg>
                <span class="leading-none">{{로그인}}</span>
              </a>
            </li>
            {{!END: 로그인}}

          </ul>
        </div>

      {{/if}}

    </div>
  </div>

</div>
{{!END: 탑바 전체 영역}}