{{define "registerPop"}}
<link rel="stylesheet" href="/static/css/registerPop.css?v=5">
<div
  class="register-pop"
  data-register-pop
  role="dialog"
  aria-modal="true"
  aria-labelledby="register-pop-title"
>
  <div class="register-pop__mask" data-register-close aria-hidden="true"></div>
  <div class="register-pop__panel">
    <button class="register-pop__close" type="button" data-register-close aria-label="关闭">
      <img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/close.svg" alt="关闭">
    </button>

    <div class="register-pop__intro">
      <h2 class="register-pop__title" id="register-pop-title">绑定账号</h2>
      <p class="register-pop__desc">绑定后即可使用账号密码登录并保留当前数据</p>
    </div>

    <form
      class="register-pop__form"
      action="/api/auth/register"
      method="post"
      data-register-form
      novalidate
    >
      <label class="register-pop__field" data-field="account">
        <span class="register-pop__label">账号</span>
        <span class="register-pop__control">
          <img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/user.svg" alt="用户" aria-hidden="true">
          <input
            class="register-pop__input"
            type="text"
            name="account"
            autocomplete="username"
            placeholder="6 到 20 位字母或数字"
            minlength="6"
            maxlength="20"
            pattern="[A-Za-z0-9]{6,20}"
            required
          >
        </span>
        <span class="register-pop__error" data-field-error="account" hidden>
          <img decoding="async" loading="lazy" class="register-pop__error-icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/error-tip.svg" alt="错误提示" aria-hidden="true">
          <span data-field-error-text></span>
        </span>
      </label>

      <label class="register-pop__field" data-field="password">
        <span class="register-pop__label">密码</span>
        <span class="register-pop__control">
          <img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/lock-dim.svg" alt="密码" aria-hidden="true">
          <input
            class="register-pop__input"
            type="password"
            name="password"
            autocomplete="new-password"
            placeholder="8 位以上，含字母与数字"
            minlength="8"
            maxlength="64"
            data-register-password
            required
          >
          <button class="register-pop__toggle" type="button" data-register-toggle="password" aria-label="显示密码">
            <img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/eye.svg" alt="显示或隐藏密码" data-register-toggle-icon="password">
          </button>
        </span>
        <span class="register-pop__error" data-field-error="password" hidden>
          <img decoding="async" loading="lazy" class="register-pop__error-icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/error-tip.svg" alt="错误提示" aria-hidden="true">
          <span data-field-error-text></span>
        </span>
      </label>

      <label class="register-pop__field" data-field="passwordConfirm">
        <span class="register-pop__label">确认密码</span>
        <span class="register-pop__control">
          <img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/lock-dim.svg" alt="密码" aria-hidden="true">
          <input
            class="register-pop__input"
            type="password"
            name="passwordConfirm"
            autocomplete="new-password"
            placeholder="再次输入密码"
            minlength="8"
            maxlength="64"
            data-register-password-confirm
            required
          >
          <button class="register-pop__toggle" type="button" data-register-toggle="confirm" aria-label="显示密码">
            <img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/eye.svg" alt="显示或隐藏密码" data-register-toggle-icon="confirm">
          </button>
        </span>
        <span class="register-pop__error" data-field-error="passwordConfirm" hidden>
          <img decoding="async" loading="lazy" class="register-pop__error-icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/error-tip.svg" alt="错误提示" aria-hidden="true">
          <span data-field-error-text></span>
        </span>
      </label>

      <label class="register-pop__agree" data-field="agree">
        <input class="register-pop__checkbox" type="checkbox" name="agree" required>
        <span class="register-pop__check" aria-hidden="true"></span>
        <span>
          我已年满 18 岁，并同意
          <a href="/terms">《用户条款》</a>
          与
          <a href="/privacy">《隐私政策》</a>
        </span>
      </label>
      <span class="register-pop__error" data-field-error="agree" hidden>
        <img decoding="async" loading="lazy" class="register-pop__error-icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/error-tip.svg" alt="错误提示" aria-hidden="true">
        <span data-field-error-text></span>
      </span>

      <button class="btn btn--primary register-pop__submit" type="submit" data-register-submit>绑定</button>
    </form>

    <p class="register-pop__switch">
      <span>已有账号？</span>
      <a href="/login" data-login-open>立即登录</a>
    </p>
  </div>
</div>
{{end}}