<div th:if="${theme.config.links?.enable_submit}" id="link-submit-modal" class="link-submit-modal">
  <div class="link-submit-overlay" onclick="closeLinkSubmitModal()"></div>
  <div class="link-submit-content">
    <div class="link-submit-header">
      <div class="header-info">
        <span class="header-icon icon-[ph--link-bold]"></span>
        <div>
          <h3>提交友链申请</h3>
          <p class="header-desc">填写你的网站信息，我会尽快审核</p>
        </div>
      </div>
      <button class="link-submit-close" onclick="closeLinkSubmitModal()">
        <span class="icon-[ph--x-bold]"></span>
      </button>
    </div>

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

    <form id="link-submit-form" class="link-submit-form">
      <div class="form-section">
        <div class="section-title">
          <span class="icon-[ph--globe-bold]"></span>
          基本信息
        </div>

        <div class="form-group">
          <label for="link-url">网站地址 <span class="required">*</span></label>
          <div class="input-with-btn">
            <input type="url" id="link-url" name="url" placeholder="https://example.com" required />
            <button type="button" class="z-btn fetch-btn" id="auto-fetch-btn" onclick="autoFetchSiteInfo()">
              <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="link-name">网站名称 <span class="required">*</span></label>
            <input type="text" id="link-name" name="displayName" placeholder="我的博客" required />
          </div>

          <div class="form-group">
            <label for="link-logo">网站图标</label>
            <input type="url" id="link-logo" name="logo" placeholder="Logo URL（可选）" />
          </div>
        </div>

        <div class="form-group">
          <label for="link-desc">网站描述</label>
          <textarea id="link-desc" name="description" rows="2" placeholder="一句话介绍你的网站"></textarea>
        </div>
      </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="link-page">友链页面</label>
              <input type="url" id="link-page" name="linkPageUrl" placeholder="友链页面 URL" />
            </div>

            <div class="form-group">
              <label for="link-rss">RSS 地址</label>
              <input type="url" id="link-rss" name="rssUrl" placeholder="RSS 订阅地址" />
            </div>
          </div>

          <div class="form-group" id="link-group-wrapper" style="display: none">
            <label for="link-group">申请分组</label>
            <select id="link-group" name="groupName">
              <option value="">默认分组</option>
            </select>
          </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="link-email">联系邮箱 <span class="required">*</span></label>
            <input type="email" id="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="email-verify-group"
          >
            <label for="link-code">邮箱验证码 <span class="required">*</span></label>
            <div class="input-with-btn">
              <input type="text" id="link-code" name="verifyCode" placeholder="请输入收到的验证码" />
              <button type="button" class="z-btn" id="send-code-btn" onclick="sendVerifyCode()">
                <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="captcha-group">
          <label for="link-captcha">图形验证码 <span class="required">*</span></label>
          <div class="captcha-row">
            <input type="text" id="link-captcha" name="captcha" placeholder="请输入图中字符" />
            <img id="captcha-img" class="captcha-img" alt="验证码" onclick="refreshCaptcha()" title="点击刷新" />
          </div>
        </div>
      </div>
    </form>

    <div class="form-actions">
      <button type="button" class="z-btn cancel-btn" onclick="closeLinkSubmitModal()">取消</button>
      <button type="submit" form="link-submit-form" class="z-btn primary submit-btn" id="submit-btn">
        <span class="icon-[ph--paper-plane-right-bold]"></span>
        <span>提交申请</span>
      </button>
    </div>
  </div>
</div>
