<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragment :: head(~{::title})">
  <title>搜索</title>
</head>

<body>

  <!--导航-->
  <nav th:replace="fragment :: menu(7)" ></nav>

  <!--中间内容-->
  <div  class="m-container-small m-padded-tb-big animated fadeIn">
    <div class="ui container">
      <!--header-->
      <div class="ui top attached segment">
        <div class="ui middle aligned two column grid">
          <div class="column">
            <h3 class="ui teal header">搜索结果</h3>
          </div>
          <div class="right aligned column">
            共<h2 class="ui orange header m-inline-block m-text-thin" th:text="${pageInfo.total}">14</h2>个
          </div>
        </div>
      </div>

<!--      <div class="ui top attached teal segment">-->
        <div class="ui padded  segment m-shadow" th:each="forum : ${pageInfo.list}"
             style="margin-bottom: 1em !important; ">
          <!--        stackable可堆叠，适应手机mobile reversed图片放上面（两个column反转）-->
          <div class="ui  mobile reversed stackable grid">
            <!--                            左图-->
            <div class="ui five wide column">
              <a href="#" target="_blank">
                <img th:src="@{${forum.avatars}}" src="https://picsum.photos/seed/picsum/800/450"
                     alt="" class="ui rounded image">
              </a>
              <a href="#" class="ui label orange"
                 style="position: absolute; right:1.5em; top: 1.5em !important;">原创</a>
            </div>

            <!--                            右，标题+摘录-->
            <div class="ui eleven wide column">
              <a href="#" th:href="@{/forum/{id}(id=${forum.id})}" target="_blank"><h3 class="ui header forum_detail"
                                                                                     th:text="${forum.title}">
                出师表</h3></a>
              <p th:text="|${forum.description}......|" class="m-text">
                先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听...</p>
              <!--                                因为有作者，日期等，又可以用grid-->
              <div class="ui grid" style="margin-top: 0">

                <div class="ui eleven wide column">
                  <div class="ui mini horizontal link list ">
                    <div class="item">
                      <img src="https://picsum.photos/seed/picsum/800/450"
                           th:src="@{${forum.user.avatar}}" alt="" class="ui avatar image">
                      <div class="content teal">
                        <a class="header" th:text="${forum.user.username}">李华湛</a>
                      </div>
                    </div>
                    <div class="item">
                      <i class="calendar icon"></i><span
                            th:text="${#dates.format(forum.updateTime, 'yyyy-MM-dd')}">2020-3-02</span>
                    </div>
                    <div class="item">
                      <i class="eye icon"></i><span style="margin-left: 3px !important;"
                                                    th:text="${forum.views}"> 暂无浏览</span>
                    </div>
                    <div class="item">
                      <i class="heart  icon"></i><span style="margin-left: 3px !important;"
                                                       th:text="${forum.like}"> 暂无点赞</span>
                    </div>

                  </div>
                </div>

                <!--                                    分类,网格内容右对齐-->
                <div class="ui right aligned five wide column">
                  <a href="#" target="_blank" class="ui teal basic label "
                     style="padding: 0.5em !important;" th:each="tag : ${forum.tags}">
                    <span th:text="${tag.name}">古诗词</span></a>
                </div>

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


        </div>

<!--      </div>-->

      <!--footer-->
      <div class="ui bottom attached segment center aligned">
        <div class="ui middle aligned  grid">
          <div class="left aligned seven wide column">
            <div class="item"><a class="ui mini teal basic button "
                                 th:classappend="${pageInfo.hasPreviousPage}?'':'hide'"
                                 th:href="@{/(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">上一页</a>
            </div>
          </div>
          <div class="two wide column">
            <span class="" th:text="${pageInfo.getPageNum()}">1</span> / <span
                  th:text="${pageInfo.getPages()}">3</span>
          </div>
          <div class="right aligned seven wide column">
            <div class="item"><a class="ui mini teal basic button"
                                 th:classappend="${pageInfo.hasNextPage}?'':'hide'"
                                 th:href="@{/(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">下一页</a>
            </div>
          </div>
        </div>

      </div>

      <div class="ui segment m-inline-block">
        <p >当前第<span th:text="${pageInfo.pageNum}"></span>页，总<span th:text="${pageInfo.pages}"></span>页，共<span th:text="${pageInfo.total}"></span>条记录</p>
      </div>

    </div>
  </div>

  <br>
  <br>

  <!--底部footer-->
  <footer th:replace="fragment :: footer" class="ui inverted vertical segment m-padded-tb-massive">

  </footer>



  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

  </script>
</body>
</html>
