{% extends "base.html" %}

{% block main %}
<main id="main-content" class="account-main">
  <div class="container account-layout">
    <section class="account-panel" aria-labelledby="forgot-password-title">
      <header class="account-heading">
        <p class="eyebrow">Creation Cloud</p>
        <h1 id="forgot-password-title">{% if is_en %}Forgot password{% else %}找回密码{% endif %}</h1>
        <p>{% if is_en %}Enter your registered email. If the account is eligible, we will send a six-digit code.{% else %}输入注册邮箱。如果账号可用，我们会发送六位验证码。{% endif %}</p>
      </header>

      <form class="account-form" action="/web/auth/password-reset/request" method="post" hx-post="/web/auth/password-reset/request" hx-target="#password-reset-request-feedback" hx-swap="innerHTML" hx-disabled-elt="find button">
        <input type="hidden" name="lang" value="{% if is_en %}en{% else %}zh-CN{% endif %}">
        <label class="field-label" for="password-reset-email">
          <span>{% if is_en %}Email{% else %}邮箱{% endif %}</span>
          <input id="password-reset-email" name="email" type="email" autocomplete="email" placeholder="name@example.com" required autofocus>
        </label>
        {% if captcha_required %}
        <div class="admin-captcha">
          <p><strong>{% if is_en %}Visual CAPTCHA{% else %}图形验证码{% endif %}</strong></p>
          <button class="captcha-image-button" type="button" data-captcha-refresh data-captcha-url="/api/v1/auth/captcha?purpose=password_reset" aria-label="{% if is_en %}Refresh the visual CAPTCHA{% else %}点击刷新图形验证码{% endif %}" title="{% if is_en %}Click to refresh{% else %}点击图片刷新{% endif %}">
            <img data-captcha-image src="/api/v1/auth/captcha?purpose=password_reset" width="240" height="80" alt="{% if is_en %}One-time password-reset CAPTCHA{% else %}一次性密码找回图形验证码{% endif %}">
          </button>
          <label class="field-label" for="password-reset-captcha-code">
            <span>{% if is_en %}Enter the six digits shown in the image{% else %}输入图片中的六位数字{% endif %}</span>
            <input id="password-reset-captcha-code" name="captcha_code" type="text" autocomplete="off" inputmode="numeric" pattern="[0-9]{6}" minlength="6" maxlength="6" required>
          </label>
        </div>
        {% endif %}
        <button class="button button-primary button-full" type="submit">{% if is_en %}Send code{% else %}发送验证码{% endif %}</button>
        <div class="form-feedback" id="password-reset-request-feedback" aria-live="polite"></div>
      </form>

      <div class="account-alternative">
        <a class="text-link" href="{% if is_en %}/en/login{% else %}/login{% endif %}">{% if is_en %}Return to sign in{% else %}返回登录{% endif %}</a>
      </div>
    </section>
  </div>
</main>
{% endblock %}