{{define "loginDialog"}}
<div class="login-dialog-mask" id="loginDialog">
  <div class="login-dialog-stack">
  <div
    class="login-dialog-card"
    role="dialog"
    aria-modal="true"
    aria-labelledby="loginDialogTitle"
  >
    <div class="login-dialog-head">
      <div class="login-dialog-title" id="loginDialogTitle">
        <span class="login-dialog-title-h5">黄果短剧</span>
        <span class="login-dialog-title-pc">黄果短剧</span>
      </div>
      <div class="login-dialog-desc">登录后同步收藏、历史与会员权益</div>
    </div>
    <form
      class="login-dialog-form"
      action="/api/auth/login"
      method="post"
      data-login-dialog-form
      novalidate
    >
      <div class="login-dialog-field-group" data-login-field="account">
        <span class="login-dialog-label">账号</span>
        <label class="login-dialog-field" data-login-control>
          <span class="login-dialog-sr">账号</span>
          <input
            class="login-dialog-input"
            name="account"
            type="text"
            placeholder="请输入账号(最少6位字母)或手机号"
            autocomplete="username"
            data-login-account
            aria-describedby="loginDialogAccountError"
          />
        </label>
        <p
          class="login-dialog-error"
          id="loginDialogAccountError"
          hidden
          data-login-error
        >
          账号格式不正确，请输入有效账号
        </p>
      </div>
      <div class="login-dialog-field-group" data-login-field="password">
        <span class="login-dialog-label">密码</span>
        <label
          class="login-dialog-field login-dialog-field--password"
          data-login-control
        >
          <span class="login-dialog-sr">密码</span>
          <input
            class="login-dialog-input"
            id="loginDialogPassword"
            name="password"
            type="password"
            placeholder="请输入登录密码"
            autocomplete="current-password"
            minlength="4"
            maxlength="16"
            data-login-password
            aria-describedby="loginDialogPasswordError"
          />
          <button
            class="login-dialog-eye"
            type="button"
            aria-label="显示密码"
            data-login-dialog-eye
          >
            <img src="/static/images/figma-dialogs/password-eye.svg" alt="显示或隐藏密码" />
          </button>
        </label>
        <p
          class="login-dialog-error"
          id="loginDialogPasswordError"
          hidden
          data-login-error
        >
          密码错误，请检查后重新输入
        </p>
      </div>
      <button class="login-dialog-submit" type="submit" data-login-submit>
        登录
      </button>
    </form>
    <div class="login-dialog-register">
      <span class="login-dialog-register-prefix">还没有账号？</span>
      <a
        class="login-dialog-register-link login-dialog-register-link--pc"
        href="#register"
        data-register-dialog-open
        >立即注册</a
      >
      <a class="login-dialog-register-link login-dialog-register-link--h5" href="#register" data-register-dialog-open>立即注册</a>
    </div>
  </div>
  <button class="login-dialog-close" type="button" aria-label="关闭" data-login-dialog-close>
    <img src="/static/images/figma-dialogs/dialog-close.svg" alt="" />
  </button>
  </div>
</div>
{{end}}