<div class="hjcl-layout-container" th:fragment="body">

  <div class="sub-section-main">
    <div class="wrapper">
      <div class="sub-section-container">
        <div class="sub-section-container-title">Category</div>
        <div class="sub-section-container-content">

          <div class="sub-search">
            <div th:replace="~{components/search-input::search-input}"></div>
          </div>

          <div class="article-list">
            <div class="article-item" th:each="item, itemStat : ${article.list}">
              <a class="article-thumb" th:if="${item.thumb != ''}" th:href="@{'/articleDetail/' + ${item.id}}"><img th:src="${item.thumb}" /></a>
              <div class="article-info">
                <a class="article-info-title" th:href="@{'/articleDetail/' + ${item.id}}">
                  <span th:text="${item.title}"></span>
                  <span th:if="${item.is_top == 1}" th:text="@{'[' + #{settop} + ']'}"></span>
                </a>
                <div class="article-info-description" th:text="${item.description}"></div>
                <div class="article-info-bottom">
                  <div class="article-info-time" th:text="${item.create_time}"></div>
                  <a class="article-info-btn" th:href="@{'/articleDetail/' + ${item.id}}" th:text="#{viewdetail}"></a>
                </div>
              </div>
            </div>
          </div>
          <div id="pagination-bar"></div>
          <script th:inline="javascript">
            // [Click] 分页
            var lang = $.cookie('lang')
            layui.use('laypage', function(){
              layui.laypage.render({
                elem: 'pagination-bar', theme: '#333e46',
                prev: (lang == 'zh' ? '上一页' : 'Prev'),
                next: (lang == 'zh' ? '下一页' : 'Next'),
                count: [[${article.total}]], curr: [[${article.page_num}]], limit: [[${article.page_size}]],
                jump: function(obj, first) {
                  // console.log(obj)
                  // 首次不执行
                  if (!first) {
                    //do something
                    window.location.href = QueryString.updateParams({ page_num: obj.curr, page_size: obj.limit })
                  }
                }
              })
            })
          </script>

        </div>
      </div>

    </div>
  </div>

</div>
