<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
      th:replace="~{modules/layout :: html(title = ${singlePage.spec.title}, content = ~{::content}, head = ~{::head})}">
<th:block th:fragment="head">
  <link rel="stylesheet" th:href="@{/assets/css/friends-circle.css}" />
  <meta property="og:type" content="website" />
  <meta property="og:title" th:content="${(singlePage.spec.title ?: '朋友圈') + ' - ' + (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title)}" />
  <meta property="og:description" content="友链博客最新动态" />
  <meta name="twitter:title" th:content="${(singlePage.spec.title ?: '朋友圈') + ' - ' + (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title)}" />
  <meta name="twitter:description" content="友链博客最新动态" />
  <script th:src="@{/assets/js/friends-circle.js}" defer></script>
</th:block>
<th:block th:fragment="content">
  <main class="main">
    <div class="container">
      <section class="friends-circle-page">
        <div class="friends-circle-header" data-aos="fade-up">
          <h1 class="friends-circle-title" th:text="${(theme.config.watermark?.friendsCircle?.enabled == true ? theme.config.watermark.friendsCircle.title : null) ?: (singlePage.spec.title ?: '朋友圈')}">朋友圈</h1>
          <p class="friends-circle-subtitle" th:text="${(theme.config.watermark?.friendsCircle?.enabled == true ? theme.config.watermark.friendsCircle.subtitle : null) ?: '发现朋友们的精彩内容'}">发现朋友们的精彩内容</p>
        </div>

        <div th:if="${friendFinder == null}" class="plugin-notice" data-aos="fade-up">
          <div class="plugin-notice-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/>
              <circle cx="12" cy="13" r="4"/>
            </svg>
          </div>
          <h3 class="plugin-notice-title">朋友圈功能需要安装插件</h3>
          <p class="plugin-notice-desc">请先安装并启用「朋友圈」插件</p>
        </div>

        <th:block th:if="${friendFinder != null}">
          <div class="friends-circle-grid" id="friendsCircleGrid" data-aos="fade-up" data-aos-delay="100">
          </div>

          <div id="emptyState" class="friends-circle-empty" style="display:none;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;width:100%;" data-aos="fade-up">
            <div class="plugin-notice-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="40" height="40">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                <circle cx="9" cy="7" r="4"/>
                <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
              </svg>
            </div>
            <h3 class="plugin-notice-title">暂无朋友圈内容</h3>
            <p class="plugin-notice-desc">等待朋友们的更新</p>
          </div>

          <div id="pagination" class="friends-circle-pagination" style="display: none;" data-aos="fade-up">
            <div class="pagination-info">
              <span>共 <strong id="totalCount">0</strong> 篇文章</span>
            </div>
            
            <div class="pagination-controls">
              <button id="prevBtn" class="pagination-arrow" onclick="prevPage()" title="上一页" aria-label="上一页">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                  <path d="M15 18l-6-6 6-6"/>
                </svg>
              </button>
              
              <span class="pagination-current">
                <span id="currentPage">1</span> / <span id="totalPages">1</span>
              </span>
              
              <button id="nextBtn" class="pagination-arrow" onclick="nextPage()" title="下一页" aria-label="下一页">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                  <path d="M9 18l6-6-6-6"/>
                </svg>
              </button>
            </div>
          </div>
        </th:block>
      </section>
    </div>
  </main>

  <script th:if="${friendFinder != null}" th:inline="javascript">
    window.allFriends = /*[[${friendFinder.listAll()}]]*/ [];
  </script>
</th:block>
</html>
