<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" th:text="${title}"></div>
        <div class="sub-section-container-content">

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

          <div class="article-list">
            <div class="article-item" th:each="item, itemStat : ${articleList.list}">
              <a class="article-thumb" th:if="${item.thumb != ''}" th:href="@{'/article/detail/' + ${item.uid}}"><img th:src="${item.thumb}" /></a>
              <div class="article-info">
                <a class="article-info-title" th:href="@{'/article/detail/' + ${item.uid}}">
                  <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="@{'/article/detail/' + ${item.uid}}" 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: [[${articleList.total}]], curr: [[${articleList.page_num}]], limit: [[${articleList.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 class="sub-section-sider">
        <div class="sub-section-sider-title" th:text="#{category}"></div>

        <div class="sub-section-sider-content">
          <div class="article-category horizontal">
            <ul id="category-bar">
              <li class="mb-4">
                <a href="/article/list" th:classappend="${parameters.category_id == null ? 'active' : ''}" th:text="#{all}"></a>
              </li>
              <li th:each="item, itemStat : ${articleCategoryList}">
                <a th:href="@{'/article/list?category_id=' + ${item.article_category_id}}" th:text="${item.category_name}" th:data-category-id="${item.article_category_id}"
                   th:classappend="(${item.article_category_id} == ${parameters.category_id} ? 'active' : '')"></a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <script th:inline="javascript">
        // // [Click] 分类
        // $('#category-bar > li > a').on('click', function(){
        //     var category_id = $(this).attr('data-category-id')
        //     if (category_id) {
        //         window.location.href = QueryString.updateParams({ category_id: parseInt(category_id) })
        //     } else {
        //         window.location.href = window.location.href.split('?')[0];
        //     }
        // })
      </script>

    </div>
  </div>

</div>
