{% extends "base.html" %}

{% block main %}
<main id="main-content" class="account-main">
  <div class="container account-layout">
    <section class="account-panel" aria-labelledby="reset-password-title">
      <header class="account-heading">
        <p class="eyebrow">Creation Cloud</p>
        <h1 id="reset-password-title">{% if is_en %}Set a new password{% else %}设置新密码{% endif %}</h1>
        <p>{% if is_en %}The code has been sent. Enter the six-digit email code and choose a new password.{% else %}验证码已发送。请输入六位邮箱验证码，并设置新的账号密码。{% endif %}</p>
      </header>

      <form class="account-form" data-error-context="password-reset" action="/web/auth/password-reset/confirm" method="post" hx-post="/web/auth/password-reset/confirm" hx-target="#password-reset-confirm-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-code">
          <span>{% if is_en %}Email code{% else %}邮箱验证码{% endif %}</span>
          <input id="password-reset-code" name="code" type="text" autocomplete="one-time-code" inputmode="numeric" pattern="[0-9]{6}" minlength="6" maxlength="6" placeholder="000000" required autofocus>
        </label>
        <label class="field-label" for="password-reset-new-password">
          <span>{% if is_en %}New password{% else %}新密码{% endif %}</span>
          <input id="password-reset-new-password" name="new_password" type="password" autocomplete="new-password" minlength="12" maxlength="128" placeholder="{% if is_en %}12 to 128 characters{% else %}12 至 128 个字符{% endif %}" required>
        </label>
        <label class="field-label" for="password-reset-confirm-password">
          <span>{% if is_en %}Confirm new password{% else %}确认新密码{% endif %}</span>
          <input id="password-reset-confirm-password" name="confirm_password" type="password" autocomplete="new-password" minlength="12" maxlength="128" placeholder="{% if is_en %}Enter the new password again{% else %}再次输入新密码{% endif %}" required>
        </label>
        <button class="button button-primary button-full" type="submit">{% if is_en %}Reset password{% else %}重置密码{% endif %}</button>
        <div class="form-feedback" id="password-reset-confirm-feedback" aria-live="polite"></div>
      </form>

      <div class="account-alternative">
        <a class="text-link" href="{% if is_en %}/en/forgot-password{% else %}/forgot-password{% endif %}">{% if is_en %}Use a different email{% else %}重新输入邮箱{% endif %}</a>
      </div>
    </section>
  </div>
</main>
{% endblock %}