{{define "loginPop"}}
<link rel="stylesheet" href="/static/css/loginPop.css?v=5">
<div
  class="login-pop"
  data-login-pop
  role="dialog"
  aria-modal="true"
  aria-labelledby="login-pop-title"
>
  <div class="login-pop__mask" data-login-close aria-hidden="true"></div>
  <div class="login-pop__panel">
    <button class="login-pop__close" type="button" data-login-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="login-pop__intro">
      <h2 class="login-pop__title" id="login-pop-title" data-login-title>登录黄果短剧</h2>
      <p class="login-pop__desc" data-login-desc>登录后可收藏作品、解锁付费剧集并查看观看历史</p>
    </div>

    <form
      class="login-pop__form"
      action="/api/auth/login"
      method="post"
      data-login-form
      novalidate
    >
      <label class="login-pop__field" data-field="account">
        <span class="login-pop__label">账号</span>
        <span class="login-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="login-pop__input"
            type="text"
            name="account"
            autocomplete="username"
            placeholder="请输入账号"
            maxlength="16"
            required
          >
        </span>
        <span class="login-pop__error" data-field-error="account" hidden>
          <img decoding="async" loading="lazy" class="login-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="login-pop__field" data-field="password">
        <span class="login-pop__label">密码</span>
        <span class="login-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="login-pop__input"
            type="password"
            name="password"
            autocomplete="current-password"
            placeholder="请输入登录密码"
            maxlength="16"
            data-login-password
            required
          >
          <button class="login-pop__toggle" type="button" data-login-toggle aria-label="显示密码">
            <img decoding="async" loading="lazy" class="icon" src="/static/images/placeholder.png?v=2" data-src="/static/images/eye.svg" alt="显示或隐藏密码" data-login-toggle-icon>
          </button>
        </span>
        <span class="login-pop__error" data-field-error="password" hidden>
          <img decoding="async" loading="lazy" class="login-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>

      <div class="login-pop__meta">
        <label class="login-pop__remember">
          <input class="login-pop__checkbox" type="checkbox" name="remember" checked>
          <span class="login-pop__check" aria-hidden="true"></span>
          <span>记住登录状态</span>
        </label>
      </div>

      <button class="btn btn--primary login-pop__submit" type="submit" data-login-submit>登录</button>
    </form>

    <div class="login-pop__rule" aria-hidden="true"></div>

    <p class="login-pop__legal">
      登录即表示你已年满 18 岁并同意
      <a href="/terms">《用户条款》</a>
      与
      <a href="/privacy">《隐私政策》</a>
    </p>
  </div>
</div>
{{end}}