<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <title>sitemap.xml : Help</title>
  <link rel="stylesheet" type="text/css" href="/css/help.css">
</head>
<style>
  .help_wrap .tab_area.customize {
    padding: 0 0 14px 14px;
  }

  .help_wrap .tab_area.customize .tab_list {
    padding: 0;
  }

  .help_wrap .tab_area .tab_list.collapse {
    max-height: 72px;
    overflow: hidden;
  }
</style>
<style>
  /* Light Mode start*/
  /* Light HelpCategorySetting */
  /* Category=Active backgroundColor Color*/
  .help_wrap .tab_area .tab_list li.on {
    background-color: #0BCFFF;!important;
  }

  /* Category=Inactive backgroundColor Color*/
  .help_wrap .tab_area .tab_list li {
    background-color: #F5F7F8;!important;
  }

  /* Category=Active Font Color*/
  .help_wrap .tab_area .tab_list li.on .tab_item {
    color: #fff;!important;
  }

  /* Category=Inactive Font Color*/
  .help_wrap .tab_area .tab_list li .tab_item {
    color: #222;!important;
  }

  /* Light HelpSearchSetting */
  /* Title Keyword Color*/
  .help_wrap .help_list_area .help_answer_list .answer_title .highlight {
    color: #FF588D;
  }

  /* Title Keyword Italic*/
  .help_wrap .help_list_area .help_answer_list .answer_title .highlight {
    font-style: normal;!important;
  }

  /* Body Keyword Color*/
  .help_wrap .help_list_box.tab_open .help_answer_card .card_inner .highlight {
    color: #FF588D;
  }

  /* Body Keyword Italic*/
  .help_wrap .help_list_box.tab_open .help_answer_card .card_inner .highlight {
    font-style: italic; !important;
  }

  /* Light HelpContentSetting */
  /* Link Color*/
  .help_wrap .help_answer_card a {
    color: #29CDFE;
  }
  /* Light Mode end*/



  /*Dark Mode start*/
  /* Dark HelpCategorySetting */
  /* Category=Active backgroundColor Color*/
  .help_wrap.dark .tab_area .tab_list li.on {
    background-color: #0BCFFF;!important;
  }

  /* Category=Inactive backgroundColor Color*/
  .help_wrap.dark .tab_area .tab_list li {
    background-color: #2D2D2D;!important;
  }

  /* Category=Active Font Color*/
  .help_wrap.dark .tab_area .tab_list li.on .tab_item {
    color: #fff;!important;
  }

  /* Category=Inactive Font Color*/
  .help_wrap.dark .tab_area .tab_list li .tab_item {
    color: #fff;!important;
  }

  /* Dark HelpSearchSetting */
  /* Title Keyword Color*/
  .help_wrap.dark .help_list_area .help_answer_list .answer_title .highlight {
    color: #FF588D;
  }

  /* Title Keyword Italic*/
  .help_wrap.dark .help_list_area .help_answer_list .answer_title .highlight {
    font-style: normal;!important;
  }

  /* Body Keyword Color*/
  .help_wrap.dark .help_list_box.tab_open .help_answer_card .card_inner .highlight{
    color: #FF588D;
  }

  /* Body Keyword Italic*/
  .help_wrap.dark .help_list_box.tab_open .help_answer_card .card_inner .highlight {
    font-style: italic;!important;
  }

  /* Dark HelpContentSetting */
  /* Link Color*/
  .help_wrap.dark .help_answer_card a {
    color: #29CDFE;
  }
  /*Dark Mode end*/
</style>
<body>
<!-- [D] 검색결과 없을 때 .no_result 추가 -->
<!-- [D] 페이지 오류 시 .error 추가 -->
<div id="wrap" class="help_wrap light">
  <div class="container">
    <div id="content" class="content">
      <header class="header">
        <div
          class="icon close-icon"
        ></div>
      </header>
      <!-- [D] 글자가 입력될 때 .active 추가 -->
      <!-- [D] 글자 입력 시 검색어 영역 초과할 경우 .over 추가 -->
      <div class="search_area active">
        <div class="search_inner">
          <i class="ico_search"></i>
          <form id="searchForm">
            <input type="text" id="keyword" name="keyword"
                   class="search_input" title="Search" placeholder="Search">
            <input type="hidden" id="language" name="language" value="en" />
            <input type="hidden" id="country" name="country" value="us" />
            <input type="hidden" id="os" name="os" value="" />
            <input type="hidden" id="isSearch" name="isSearch" value="true" />
            <input type="hidden" id="naviBarBack" name="naviBarBack" value="false" />
            <button type="reset" class="ico_x"><span class="blind">지우기 버튼</span>
            </button>
          </form>
        </div>
      </div>
      <!-- [D] 탭이 2줄 이상인 경우 'over' 클래스 추가 -->
      


      <div class="help_list_area" id="help_list_area">
        
        <!-- [D] 펼쳐보기 활성화 시 .tab_open 추가 -->
        
      </div>

      <div class="help_list_area" id="empty_help_list_area" style="display: none">
        <div class="help_list_area">
          <div class="help_result_box">
            <strong class="result_title">No results</strong>
          </div>
        </div>
      </div>

      <div class="loading_area" style="display: none;">
        <div class="loading_box"><span class="blind">로딩 중</span></div>
      </div>

      <div class="ly_popup" style="display: none;">
        <div class="popup_box">
          <p>This page can not be displayed.</p>
          <button type="button" class="btn_check" onclick="window.location.reload()">Retry</button>
        </div>
      </div>

      <button type="button" class="btn_top"><span class="blind">맨 위로 올라가기</span></button>
    </div>
  </div>
</div>

<script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    $('.btn_check').on('click', function () {
      $('.help_wrap .ly_popup').hide()
    })

    $('.btn_top').on('click', function () {
      $('html,body').animate({scrollTop: 0}, 300)
    })
  })
</script>
<script type="module">
  import {sendLog, getAppInfo, registerDarkThemeCallback, closePage, getUrlParams} from '/js/app.js';

  window.sendLog = sendLog
  window.getAppInfo = getAppInfo
  window.registerDarkThemeCallback = registerDarkThemeCallback
  window.closePage = closePage
  window.getUrlParams = getUrlParams
</script>
<script>
  let isSearch = false
  let perPage = 10000
  let language = "en"
  let country = "us"
  let deviceOsType = null
  let app = "sitemap.xml"
  let keyword = null
  let categoryId = null

  let serverUrl = "https:\/\/help.snow.me\/"
  let phase = "release"
  let contentId = null
  let helpCategoryList = []
  let displayMode = "light"


  $(document).ready(function () {

    setDisplayMode(app, phase, null)
    registerDarkTheme(app, phase)
    initBackBtn()

    try {
      if (keyword) {
        $("#keyword").val(keyword);
      }
      if (!keyword && Array.isArray(helpCategoryList) && helpCategoryList.length !== 0) {
        initHelpCategory()
      }
      loadSearchResult(categoryId)
    } finally {
      if (!isSearch) {
        sendLog(app, phase, 'help.pageopen', contentId)
      }
    }


  })

  function loadSearchResult(categoryId) {
    $('.help_wrap .loading_area').toggle()
    let keyword = $('#keyword').val()

    let url = serverUrl + app + '/list?currentPage=1'
    let param = ''
    if (perPage) {
      param = param + '&perPage=' + perPage
    }
    if (language) {
      param = param + '&language=' + language
    }
    if (country) {
      param = param + '&country=' + country
    }
    if (isSearch) {
      param = param + '&isSearch=' + isSearch
    }
    if (contentId) {
      param = param + '&contentId=' + contentId
    }
    if (categoryId) {
      param = param + '&categoryId=' + categoryId
    }
    if (keyword) {
      param = param + '&keyword=' + keyword
    }

    param = param + '&os=' + getDeviceOsType()

    $.ajax({
      type: 'get',
      url: url + param,
    })
     .done(function (data) {
       let helpListArea = $('#help_list_area')
       if (data) {
         helpListArea.html(data)
         if (contentId) {
           let contentIdElement = $('#' + contentId)[0]
           if (contentIdElement) {
             contentIdElement.scrollIntoView()
           }
         }
         $('#empty_help_list_area').hide()
         $('#wrap').removeClass('no_result')
       } else {
         helpListArea.empty()
         $('#empty_help_list_area').show()
         $('#wrap').addClass('no_result')
       }
       $('.help_wrap .loading_area').toggle()
       initHelpClick()
       if (isSearch) {
         sendLog(app, phase, 'help.search', null)
       }
     })
     .fail(function () {
       $('.help_wrap .loading_area').toggle()
       $('.help_wrap .ly_popup').toggle()
       if (isSearch) {
         sendLog(app, phase, 'help.search', null)
       }
     })
  }

  function initHelpClick() {
    $('.help_wrap .help_answer_list .btn_arrow').click(function () {
      let help_list_box = $(this).parents('.help_list_box')
      try {
        help_list_box.toggleClass('tab_open')
      } finally {
        if (help_list_box.hasClass('tab_open')) {
          sendLog(app, phase, 'help.click', help_list_box.attr('id'))
        }
      }
    })
  }

  function initHelpCategory() {
    initHelpCategoryClick()
    updateCategoryTabLayout()
    $(window).resize(function () {
      updateCategoryTabLayout()
    })
  }

  function initHelpCategoryClick() {
    $('.help_wrap .tab_area .tab_list li').click(function () {
      let categoryId = $(this).attr('category-id')

      $(this).addClass('on')
      $(this).siblings().removeClass('on')

      loadSearchResult(categoryId)
    })
  }

  function updateCategoryTabLayout() {
    let tabList = $('#category_tab_list')
    let tabArea = $('#category_tab_area')

    let tabListOffsetTop = tabList.offset().top
    let offsetTopArray = []

    $('#category_tab_list li').each(function () {
      offsetTopArray.push($(this).offset().top - tabListOffsetTop)
    })
    // row 1 category offsetTop = 0
    // row 2 category offsetTop = 36
    // row > 3 category offsetTop > 36
    if (offsetTopArray.filter(offsetTop => offsetTop > 36).length > 0) {
      tabList.addClass('collapse')
      tabArea.addClass('over')
      tabArea.removeClass('open')
    } else {
      tabList.removeClass('collapse')
      tabArea.removeClass('over')
      tabArea.addClass('open')
    }
  }

  function toggleCategory() {
    $('.help_wrap .tab_area').toggleClass('open')
    $('.help_wrap .tab_area .tab_list').toggleClass('collapse')
  }

  function getDeviceOsType() {
    if (deviceOsType) {
      return deviceOsType;
    } else {
      if (navigator.userAgent.match(/iPhone|iPad|iPod/i)) {
        return 'IOS'
      } else if (navigator.userAgent.match(/Android/i)) {
        return 'ANDROID'
      }
      return 'ALL'
    }
  }

  async function setDisplayMode(app, phase, appDarkTheme) {
    // This function only handles 'automatic' mode
    // 'light' and 'dark' are already set by backend
    if (displayMode !== 'automatic') {
      return
    }
    let helpWrap = $('.help_wrap')
    if (appDarkTheme === null || appDarkTheme === undefined) {
      const appInfo = await getAppInfo(app, phase)
      appDarkTheme = appInfo && (appInfo.darkTheme === true)
    }
    if (appDarkTheme === true) {
      helpWrap.addClass('dark')
    } else if (appDarkTheme === false) {
      helpWrap.removeClass('dark')
    }
  }

  function registerDarkTheme(app, phase) {
    registerDarkThemeCallback(app, phase, function (darkThemeObj) {
      if (darkThemeObj !== null && darkThemeObj !== "undefined") {
        setDisplayMode(app, phase, darkThemeObj)
      }
    });
  }

  function initBackBtn() {
    const store = getUrlParams(window.location.href)
    if(store?.naviBarBack === 'true') {
      $('.help_wrap header').css('display','block')
      $('.help_wrap.dark header').css('display','block')
      bindCloseClick(app, phase)
    }
  }

  function bindCloseClick(app, phase) {
    $('.close-icon').click(function() {
      window.history.back()
    })
  }
</script>
</body>
</html>