<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org"
      th:replace="~{modules/layout :: html(title = ${singlePage != null ? singlePage.spec.title : '朋友们'}, content = ~{::content}, head = ~{::head})}">
<th:block th:fragment="head">
  <link rel="stylesheet" th:href="@{/assets/css/links.css}" />
  <script th:inline="javascript">
    window.LINK_CONFIG = {
      offlineLabel: /*[[${theme.config.links != null && theme.config.links.linksConfig != null && theme.config.links.linksConfig.offlineLabel != null && !#strings.isEmpty(theme.config.links.linksConfig.offlineLabel) ? theme.config.links.linksConfig.offlineLabel : '失联咯~'}]]*/ '失联咯~'
    };
  </script>
  <script th:src="@{/assets/js/links.js}" defer></script>
  <script th:if="${pluginFinder.available('link-submit')}" th:src="@{/assets/js/links-submit.js}" defer></script>
</th:block>
<th:block th:fragment="content">
  <main class="main">
    <div class="container">
      <section class="links-hero" data-aos="fade-up">
        <h1 class="links-hero-title" th:text="${(theme.config.watermark?.links?.enabled == true ? theme.config.watermark.links.title : null) ?: (singlePage != null ? singlePage.spec.title : '朋友们')}">朋友们</h1>
        <p class="links-hero-desc" th:text="${(theme.config.watermark?.links?.enabled == true ? theme.config.watermark.links.subtitle : null) ?: '海内存知己，天涯若比邻'}">海内存知己，天涯若比邻</p>
        <div class="links-hero-stats" th:with="totalLinks = ${#lists.isEmpty(groups) ? 0 : #aggregates.sum(groups.![links.size()])}">
          <span class="links-count">已收录 <strong th:text="${totalLinks}">0</strong> 位朋友</span>
          <button class="links-random-btn" onclick="visitRandomLink()" aria-label="随机访问一位友链">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5"/></svg>
            随机访问
          </button>
        </div>
      </section>

      <section class="link-section" data-aos="fade-up" data-aos-delay="100">
        <div class="link-grid" th:if="${groups != null && !#lists.isEmpty(groups)}">
          <th:block th:each="group, groupStat : ${groups}">
            <a th:each="link, linkStat : ${group.links}" 
               th:href="${link.spec.url}" 
               class="link-card" 
               data-link 
               target="_blank" 
               rel="noopener"
               data-aos="zoom-in"
               th:attr="data-aos-delay=${150 + groupStat.index * 50 + linkStat.index * 30}">
              <div class="link-avatar-wrap">
                <img th:if="${link.spec.logo}" 
                     class="link-avatar" 
                     th:src="${link.spec.logo}" 
                     th:alt="${link.spec.displayName}"
                     loading="lazy"
                     referrerpolicy="no-referrer"
                     onerror="this.onerror=null;this.style.display='none';if(this.nextElementSibling){this.nextElementSibling.style.display='flex';}" />
                <div th:if="${link.spec.logo}" class="link-avatar-placeholder" style="display:none;" aria-hidden="true">
                  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                    <path fill="currentColor" d="M938.666667 512v307.456a73.685333 73.685333 0 0 1-106.666667 65.877333 123.349333 123.349333 0 0 0-123.562667 7.68 123.392 123.392 0 0 1-136.874666 0l-15.061334-9.984a80.256 80.256 0 0 0-89.002666 0l-15.061334 10.026667a123.392 123.392 0 0 1-136.874666 0 123.349333 123.349333 0 0 0-123.605334-7.68A73.685333 73.685333 0 0 1 85.333333 819.413333V512C85.333333 276.352 276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667zM403.072 614.314667a32 32 0 1 0-38.144 51.370666A246.016 246.016 0 0 0 512 714.666667a246.016 246.016 0 0 0 147.072-48.981334 32 32 0 1 0-38.144-51.370666A182.058667 182.058667 0 0 1 512 650.666667a182.058667 182.058667 0 0 1-108.928-36.352zM682.666667 405.333333c0-35.328-19.114667-64-42.666667-64s-42.666667 28.672-42.666667 64 19.114667 64 42.666667 64 42.666667-28.672 42.666667-64zM384 469.333333c23.552 0 42.666667-28.672 42.666667-64S407.552 341.333333 384 341.333333s-42.666667 28.672-42.666667 64 19.114667 64 42.666667 64z"/>
                  </svg>
                </div>
                <div th:unless="${link.spec.logo}" class="link-avatar-placeholder" aria-hidden="true">
                  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
                    <path fill="currentColor" d="M938.666667 512v307.456a73.685333 73.685333 0 0 1-106.666667 65.877333 123.349333 123.349333 0 0 0-123.562667 7.68 123.392 123.392 0 0 1-136.874666 0l-15.061334-9.984a80.256 80.256 0 0 0-89.002666 0l-15.061334 10.026667a123.392 123.392 0 0 1-136.874666 0 123.349333 123.349333 0 0 0-123.605334-7.68A73.685333 73.685333 0 0 1 85.333333 819.413333V512C85.333333 276.352 276.352 85.333333 512 85.333333s426.666667 191.018667 426.666667 426.666667zM403.072 614.314667a32 32 0 1 0-38.144 51.370666A246.016 246.016 0 0 0 512 714.666667a246.016 246.016 0 0 0 147.072-48.981334 32 32 0 1 0-38.144-51.370666A182.058667 182.058667 0 0 1 512 650.666667a182.058667 182.058667 0 0 1-108.928-36.352zM682.666667 405.333333c0-35.328-19.114667-64-42.666667-64s-42.666667 28.672-42.666667 64 19.114667 64 42.666667 64 42.666667-28.672 42.666667-64zM384 469.333333c23.552 0 42.666667-28.672 42.666667-64S407.552 341.333333 384 341.333333s-42.666667 28.672-42.666667 64 19.114667 64 42.666667 64z"/>
                  </svg>
                </div>
              </div>
              <div class="link-info">
                <span class="link-name" th:text="${link.spec.displayName}">链接名称</span>
                <span class="link-desc" th:text="${link.spec.description}">链接描述</span>
              </div>
              <span class="link-group-tag" th:text="${group.spec.displayName}">分组</span>
            </a>
          </th:block>
        </div>
        <div th:if="${groups == null || #lists.isEmpty(groups)}" class="plugin-notice">
          <div class="plugin-notice-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/>
            </svg>
          </div>
          <h3 class="plugin-notice-title">暂无友链</h3>
          <p class="plugin-notice-desc">快去添加第一位朋友吧</p>
        </div>
      </section>

      <div class="link-apply" data-aos="fade-up" th:if="${theme.config.links == null || theme.config.links.linksConfig == null || theme.config.links.linksConfig.enabled == null || theme.config.links.linksConfig.enabled}">
        <h2 class="link-apply-title">申请友链</h2>
        <p class="link-apply-desc">欢迎交换友链，请提交你的站点信息</p>
        <div class="link-apply-info" th:with="lc=${theme.config.links != null ? theme.config.links.linksConfig : null}">
          <span class="link-apply-item" onclick="copyApplyInfo(this)" title="点击复制"><span class="label">名称：</span><span class="link-apply-value" th:text="${(lc == null or #strings.isEmpty(lc.ownerName)) ? (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.title != null ? theme.config.basic.siteInfo.title : site.title) : lc.ownerName}">站点名称</span><span class="copy-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span></span>
          <span class="link-apply-item" onclick="copyApplyInfo(this)" title="点击复制"><span class="label">链接：</span><span class="link-apply-value" th:text="${(lc == null or #strings.isEmpty(lc.ownerUrl)) ? site.url : lc.ownerUrl}">站点链接</span><span class="copy-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span></span>
          <span class="link-apply-item" th:if="${(lc != null and !#strings.isEmpty(lc.ownerAvatar)) or !#strings.isEmpty(site.logo)}" onclick="copyApplyInfo(this)" title="点击复制"><span class="label">头像：</span><span class="link-apply-value" th:text="${(lc == null or #strings.isEmpty(lc.ownerAvatar)) ? site.logo : lc.ownerAvatar}">头像链接</span><span class="copy-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span></span>
          <span class="link-apply-item" onclick="copyApplyInfo(this)" title="点击复制"><span class="label">描述：</span><span class="link-apply-value" th:text="${(lc == null or #strings.isEmpty(lc.ownerDescription)) ? (theme.config.basic != null and theme.config.basic.siteInfo != null and theme.config.basic.siteInfo.description != null ? theme.config.basic.siteInfo.description : site.subtitle) : lc.ownerDescription}">站点描述</span><span class="copy-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg></span></span>
          <a th:if="${pluginFinder.available('link-submit') and (lc == null or lc.showApplyButton == null or lc.showApplyButton)}" href="javascript:void(0)" onclick="openLinkSubmitModal()" class="link-submit-text link-apply-item" title="申请友链">申请友链 ›</a>
        </div>
      </div>
    </div>
  </main>

  <div id="customToast" class="custom-toast">
    <div class="toast-icon"></div>
    <div class="toast-content">
      <div class="toast-title"></div>
      <div class="toast-message"></div>
    </div>
  </div>

  <div id="linkSubmitModal" class="link-submit-modal" th:if="${pluginFinder.available('link-submit')}">
    <div class="link-submit-overlay" onclick="closeLinkSubmitModal()"></div>
    <div class="link-submit-dialog" data-lenis-prevent>
      <div class="link-submit-header">
        <h2 class="link-submit-title">申请友链</h2>
        <button class="link-submit-close" onclick="closeLinkSubmitModal()" aria-label="关闭">×</button>
      </div>
      <form id="linkSubmitForm" class="link-submit-form" onsubmit="submitLinkForm(event)">
        <div class="form-group">
          <label for="displayName">站点名称 <span class="required">*</span></label>
          <input type="text" id="displayName" name="displayName" required placeholder="请输入站点名称">
        </div>
        <div class="form-group">
          <label for="url">站点链接 <span class="required">*</span></label>
          <input type="url" id="url" name="url" required placeholder="https://example.com">
        </div>
        <div class="form-group">
          <label for="logo">站点头像 <span class="required">*</span></label>
          <div class="logo-input-wrapper">
            <input type="url" id="logo" name="logo" required placeholder="https://example.com/logo.png" oninput="previewLogo(this.value)">
            <div class="logo-preview" id="logoPreview">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                <circle cx="8.5" cy="8.5" r="1.5"/>
                <polyline points="21 15 16 10 5 21"/>
              </svg>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="email">联系邮箱 <span class="required">*</span></label>
          <input type="email" id="email" name="email" required placeholder="your@email.com">
        </div>
        <div class="form-group">
          <label for="description">站点描述 <span class="required">*</span></label>
          <textarea id="description" name="description" required placeholder="简单介绍一下你的站点" rows="3"></textarea>
        </div>
        <div class="form-group">
          <label for="groupName">友链分组 <span class="required">*</span></label>
          <div class="custom-select" id="customGroupSelect">
            <div class="custom-select-trigger" onclick="toggleGroupSelect()">
              <span class="custom-select-value">请选择分组</span>
              <svg class="custom-select-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <polyline points="6 9 12 15 18 9"></polyline>
              </svg>
            </div>
            <div class="custom-select-dropdown" id="groupSelectDropdown">
              <div class="custom-select-option" data-value="">请选择分组</div>
            </div>
          </div>
          <input type="hidden" id="groupName" name="groupName" required>
        </div>
        <div class="form-group">
          <label for="rssUrl">RSS 订阅地址</label>
          <input type="url" id="rssUrl" name="rssUrl" placeholder="https://example.com/rss.xml (可选)">
        </div>
        <div class="form-actions">
          <button type="button" class="btn-cancel" onclick="closeLinkSubmitModal()">取消</button>
          <button type="submit" class="btn-submit">提交申请</button>
        </div>
      </form>
    </div>
  </div>

  <div id="linkConfirmModal" class="link-confirm-modal">
    <div class="link-confirm-content">
      <div class="link-confirm-header">
        <span>即将离开本站访问，<strong class="link-target-name"></strong></span>
        <button class="link-confirm-close" onclick="closeLinkConfirm()" aria-label="关闭">&times;</button>
      </div>
      <div class="link-confirm-body">
        <p class="link-warning-text">本站不对外部链接内容负责，请注意甄别信息真伪。</p>
        <div class="link-confirm-actions">
          <button class="link-confirm-cta" type="button" onclick="confirmLinkVisit()" aria-label="确认前往外部站点">
            <span class="link-confirm-cta-label">继续前往</span>
            <span class="link-confirm-cta-icon" aria-hidden="true">
              <svg viewBox="0 0 66 43" fill="none">
                <path class="link-confirm-arrow link-confirm-arrow-one" d="M2 3L16 21.5L2 40"></path>
                <path class="link-confirm-arrow link-confirm-arrow-two" d="M24 3L38 21.5L24 40"></path>
                <path class="link-confirm-arrow link-confirm-arrow-three" d="M46 3L60 21.5L46 40"></path>
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
  function copyApplyInfo(el) {
    const value = el.querySelector('.link-apply-value')?.textContent?.trim();
    if (!value) return;
    navigator.clipboard.writeText(value).then(function() {
      el.classList.add('copied');
      setTimeout(function() { el.classList.remove('copied'); }, 1500);
    });
  }
  </script>

</th:block>
</html>
