<div th:fragment="layout-footer">

  <div class="footer-menutabs">
    <a href="/" class="footer-menutabs-item"
       th:classappend="${(requestVO.uri == '/' ? 'active' : '')}">
       <img src="/images/icon-watch.svg" />
      <span th:text="#{footer.menu.home}"></span>
    </a>
    <a href="/article?category_id=1" class="footer-menutabs-item"
       th:classappend="${(requestVO.uri + '?' + requestVO.queryString) == '/article?category_id=1' ? 'active' : ''}">
      <img src="/images/icon-product.svg" />
      <span th:text="#{footer.menu.product}"></span>
    </a>
    <a href="/article?category_id=42" class="footer-menutabs-item"
       th:classappend="${(requestVO.uri + '?' + requestVO.queryString) == '/article?category_id=42' ? 'active' : ''}">
      <img src="/images/icon-video.svg" />
      <span th:text="#{footer.menu.video}"></span>
    </a>
    <a href="/article?category_id=43" class="footer-menutabs-item"
       th:classappend="${(requestVO.uri + '?' + requestVO.queryString) == '/article?category_id=43' ? 'active' : ''}">
      <img src="/images/icon-ce.svg" />
      <span th:text="#{footer.menu.ce}"></span>
    </a>

    <!-- 微信联系 -->
    <a href="javascript:;" class="footer-menutabs-item" id="menuWechat"
       th:attr="data-text1=#{footer.menu.wechatinfo.text1}, data-text2=#{footer.menu.wechatinfo.text2}"
      >
      <img src="/images/icon-wechat.svg" />
      <span th:text="#{footer.menu.wechat}"></span>
    </a>
    <script>
      // [Click] 点击 微信联系
      $('#menuWechat').on('click', function() {
        var text1 = $(this).attr('data-text1')
        var text2 = $(this).attr('data-text2')
        layer.open({
          title: false, shadeClose: true, closeBtn: false,
          content: '<div class="menu-wechat-dialog-content">' +
              '<img src="/images/qrcode-wechat.jpg"/><div>' + text1 + '<br/>' + text2 + '：cpnana8</div>' +
              '</div>',
          btn: []
        })
      })
    </script>
    <style>
      .menu-wechat-dialog-content > img { display: block; width: 160px; height: 160px; margin: 10px auto; }
      .menu-wechat-dialog-content > div { font-size: 14px; text-align: center; line-height: 18px; }
    </style>

  </div>


  <div class="hjcl-layout-footer flex items-center justify-center">
    <div class="wrapper">

      <ul class="footer-nav flex items-center justify-center mb-2">
        <li th:each="nav, iterStat : ${navigation}" class="mx-2">
          <a th:href="${nav.link}" th:class="${'link underline-hover underline-offset-4 '}">
            <span th:text="${nav.navigation_name}"></span>
          </a>
          <span class="ml-3" th:if="${iterStat.index != navigation.size - 1}">|</span>
        </li>
      </ul>

      <div class="footer-copyright flex items-center justify-center">
        <span class="mx-1" th:utext="${siteInfo.copyright}"></span>
        <span class="mx-1" th:utext="${siteInfo.icp}"></span>
      </div>

    </div>
  </div>
</div>
