<div th:fragment="language">

  <ul class="flex items-center">

    <li th:each="sysLang, iterStat : ${sysLanguage}" class="ml-4">
      <a href="javascript:;"
         th:data-lang="${sysLang.language}"
         th:classappend="(${lang} == ${sysLang.language} ? 'font-bold' : '')"
         th:text="${sysLang.name}">
      </a>
    </li>

<!--    <li class="ml-4">-->
<!--      <a href="javascript:;" onclick="setLangAndRefresh('zh');"-->
<!--         th:classappend="${lang} == 'zh' ? 'font-bold' : ''">中文</a>-->
<!--    </li>-->
<!--    <li class="ml-4">-->
<!--      <a href="javascript:;" onclick="setLangAndRefresh('en');"-->
<!--         th:classappend="${lang} == 'en' ? 'font-bold' : ''">English</a>-->
<!--    </li>-->
  </ul>
  <script>

      document.addEventListener("DOMContentLoaded", function () {
          const langLinks = document.querySelectorAll("a[data-lang]");
          langLinks.forEach(link => {
              // 监听导航栏语言点击事件
              link.addEventListener("click", function () {
                  setLangAndRefresh(this.dataset.lang)
              });
          });
      });
      // 设置语言Cookie，刷新页面
      function setLangAndRefresh(lang) {
          document.cookie = "lang=" + lang + ";max-age=2592000;path=/"
          location.reload()
      }
  </script>

</div>