{jv:include file='header.html' /}
<main class="auth-split">
  <div class="auth-split-left">
    <div class="asl-content">
      <div class="asl-logo"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/><path d="M9 16l2 2 4-4"/></svg></div>
      <h2 class="asl-title">{jv:lang name='forgot_password_welcome_title' /}</h2>
      <p class="asl-subtitle">{jv:lang name='forgot_password_welcome_subtitle' /}</p>
      <ul class="asl-features">
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>{jv:lang name='fp_feature_1' /}</li>
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>{jv:lang name='fp_feature_2' /}</li>
        <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="10"/></svg>{jv:lang name='fp_feature_3' /}</li>
      </ul>
    </div>
    <div class="asl-decoration"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/><path d="M9 16l2 2 4-4"/></svg></div>
  </div>
  <div class="auth-split-right">
    <a href="{jv:url}user/login" class="asr-back"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/></svg>{jv:lang name='back_to_login' /}</a>
    <div class="asr-header">
      <h1>{jv:lang name='forgot_password' /}</h1>
      <p>{jv:lang name='forgot_password_tip' /}</p>
    </div>
    <div class="fp-step active" id="fpStep1">
      <form class="auth-form" id="fpForm1" method="post" action="{jv:url}user/forgot_password">
        <div class="auth-field">
          <label>{jv:lang name='username' /}</label>
          <div class="auth-input-wrap">
            <svg class="auth-input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            <input name="username" type="text" required placeholder="{jv:lang name='username' /}">
          </div>
        </div>
        <div class="auth-field">
          <label>{jv:lang name='email' /}</label>
          <div class="auth-input-wrap">
            <svg class="auth-input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
            <input name="email" type="email" required placeholder="{jv:lang name='email' /}">
          </div>
        </div>
        <p class="fp-tip">{jv:lang name='forgot_password_step1_tip' /}</p>
        <button type="submit" class="auth-btn">{jv:lang name='send_code' /}</button>
      </form>
    </div>
    <div class="fp-step" id="fpStep2">
      <form class="auth-form" id="fpForm2" method="post" action="{jv:url}user/forgot_password">
        <input type="hidden" name="fp_token" id="fpToken" value="">
        <div class="auth-field">
          <label>{jv:lang name='verify_code' /}</label>
          <div class="fp-code-row">
            <input name="code" type="text" required maxlength="6" placeholder="{jv:lang name='verify_code_placeholder' /}">
          </div>
        </div>
        <div class="auth-field">
          <label>{jv:lang name='new_password' /}</label>
          <div class="auth-input-wrap">
            <svg class="auth-input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            <input name="new_password" type="password" required minlength="6" placeholder="{jv:lang name='new_password' /}">
          </div>
        </div>
        <div class="auth-field">
          <label>{jv:lang name='confirm_password' /}</label>
          <div class="auth-input-wrap">
            <svg class="auth-input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/><path d="M9 16l2 2 4-4"/></svg>
            <input name="confirm_password" type="password" required minlength="6" placeholder="{jv:lang name='confirm_password' /}">
          </div>
        </div>
        <p class="fp-tip">{jv:lang name='forgot_password_step2_tip' /}</p>
        <button type="submit" class="auth-btn">{jv:lang name='reset_password' /}</button>
      </form>
    </div>
    <div class="fp-step" id="fpStep3">
      <div class="fp-success">
        <div class="fp-success-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><polyline points="20 6 9 17 4 12"/></svg></div>
        <h3>{jv:lang name='reset_password_success' /}</h3>
        <p>{jv:lang name='reset_password_success_tip' /}</p>
      </div>
      <a href="{jv:url}user/login" class="auth-btn" style="text-decoration:none;text-align:center;line-height:48px;margin-top:20px">{jv:lang name='go_login' /}</a>
    </div>
    <div class="asr-footer">
      <span>{jv:lang name='has_account' /}</span><a href="{jv:url}user/login">{jv:lang name='go_login' /}</a>
    </div>
  </div>
</main>
{jv:include file='footer.html' /}