<div
  th:if="${theme.config.links?.enable_submit and theme.config.links?.enable_update}"
  id="link-update-modal"
  class="link-submit-modal"
>
  <div class="link-submit-overlay" onclick="closeLinkUpdateModal()"></div>
  <div class="link-submit-content link-update-content">
    <div class="link-submit-header">
      <div class="header-info">
        <span class="header-icon icon-[ph--pencil-bold]"></span>
        <div>
          <h3>修改友链信息</h3>
          <p class="header-desc">请使用原友链邮箱验证身份</p>
        </div>
      </div>
      <button class="link-submit-close" onclick="closeLinkUpdateModal()">
        <span class="icon-[ph--x-bold]"></span>
      </button>
    </div>

    <div id="update-submit-message" class="submit-message" style="display: none"></div>

    <form id="link-update-form" class="link-submit-form">
      <div class="form-section">
        <div class="section-title">
          <span class="icon-[ph--magnifying-glass-bold]"></span>
          查找友链
        </div>

        <div class="form-group">
          <label for="update-link-old-url">原网站地址 <span class="required">*</span></label>
          <input
            type="url"
            id="update-link-old-url"
            name="oldUrl"
            placeholder="https://your-original-site.com"
            required
          />
          <p class="form-hint">输入你当前已提交的友链地址</p>
        </div>
      </div>

      <div class="form-section">
        <div class="section-title">
          <span class="icon-[ph--globe-bold]"></span>
          新网站信息
        </div>

        <div class="form-group">
          <label for="update-link-url">网站地址 <span class="required">*</span></label>
          <div class="input-with-btn">
            <input type="url" id="update-link-url" name="url" placeholder="https://your-new-site.com" required />
            <button
              type="button"
              class="z-btn fetch-btn"
              id="update-auto-fetch-btn"
              onclick="autoFetchUpdateSiteInfo()"
            >
              <span class="icon-[ph--magic-wand-bold]"></span>
              <span>自动填充</span>
            </button>
          </div>
          <p class="form-hint">输入新网址后点击"自动填充"可自动获取网站信息</p>
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="update-link-name">网站名称 <span class="required">*</span></label>
            <input type="text" id="update-link-name" name="displayName" placeholder="我的博客" required />
          </div>

          <div class="form-group">
            <label for="update-link-logo">网站图标</label>
            <input type="url" id="update-link-logo" name="logo" placeholder="https://example.com/logo.png" />
          </div>
        </div>

        <div class="form-group">
          <label for="update-link-desc">网站描述</label>
          <textarea id="update-link-desc" name="description" placeholder="一句话介绍你的网站" rows="2"></textarea>
        </div>

        <div class="form-section collapsible" x-data="{ open: true }">
          <button type="button" class="section-title clickable" @click="open = !open">
            <span class="icon-[ph--dots-three-circle-bold]"></span>
            更多选项（可选）
            <span class="icon-[ph--caret-down-bold] caret" :class="{ 'rotate': open }"></span>
          </button>

          <div class="section-content" x-show="open" x-collapse>
            <div class="form-row">
              <div class="form-group">
                <label for="update-link-page">友链页面</label>
                <input type="url" id="update-link-page" name="linkPageUrl" placeholder="https://your-site.com/links" />
              </div>

              <div class="form-group">
                <label for="update-link-rss">RSS 地址</label>
                <input type="url" id="update-link-rss" name="rssUrl" placeholder="https://your-site.com/rss.xml" />
              </div>
            </div>

            <div class="form-group" id="update-link-group-wrapper" style="display: none">
              <label for="update-link-group">申请分组</label>
              <select id="update-link-group" name="groupName">
                <option value="">默认分组</option>
              </select>
            </div>
          </div>
        </div>
      </div>

      <div class="form-section">
        <div class="section-title">
          <span class="icon-[ph--shield-check-bold]"></span>
          验证信息
        </div>

        <div class="form-row">
          <div class="form-group">
            <label for="update-link-email">联系邮箱 <span class="required">*</span></label>
            <input type="email" id="update-link-email" name="email" placeholder="your@email.com" required />
            <p class="form-hint">必须与原友链邮箱一致</p>
          </div>

          <div
            th:if="${theme.config.links?.verify_type == 'email' or theme.config.links?.verify_type == null}"
            class="form-group"
            id="update-email-verify-group"
          >
            <label for="update-link-code">邮箱验证码 <span class="required">*</span></label>
            <div class="input-with-btn">
              <input type="text" id="update-link-code" name="verifyCode" placeholder="请输入收到的验证码" />
              <button type="button" class="z-btn" id="update-send-code-btn" onclick="sendUpdateVerifyCode()">
                <span class="icon-[ph--paper-plane-tilt-bold]"></span>
                <span>发送</span>
              </button>
            </div>
          </div>
        </div>

        <div th:if="${theme.config.links?.verify_type == 'captcha'}" class="form-group" id="update-captcha-group">
          <label for="update-link-captcha">图形验证码 <span class="required">*</span></label>
          <div class="captcha-row">
            <input type="text" id="update-link-captcha" name="captcha" placeholder="请输入图中字符" />
            <img
              id="update-captcha-img"
              class="captcha-img"
              alt="验证码"
              onclick="refreshCaptcha('update')"
              title="点击刷新"
            />
          </div>
        </div>
      </div>
    </form>

    <div class="form-actions">
      <button type="button" class="z-btn cancel-btn" onclick="closeLinkUpdateModal()">取消</button>
      <button type="submit" form="link-update-form" class="z-btn primary submit-btn" id="update-submit-btn">
        <span class="icon-[ph--check-bold]"></span>
        <span>确认修改</span>
      </button>
    </div>
  </div>
</div>
