{#
  Shared new-password + confirm-password inputs with the live-requirement
  checklist.  Used by signup.html, reset_password.html, and the account modal's
  change-password view in chat.html so the field markup and the requirement list
  live in exactly one place.

  auth-password-rules.js drives the live feedback by id (#password,
  #confirm_password, #password-requirements) and auth-password-field.js adds the
  Show/Hide toggle and Caps Lock warning to every password input.

  Params:
    new_placeholder      placeholder for the new-password input
    confirm_placeholder  placeholder for the confirmation input
    with_names           emit name="" + required (HTML form posts need them; the
                         JS/fetch-driven account modal collects values by id and
                         does not)
#}
{% macro password_fields(new_placeholder="New password", confirm_placeholder="Confirm new password", with_names=True) %}
<input
    id="password"
    {% if with_names %}name="password"{% endif %}
    type="password"
    placeholder="{{ new_placeholder }}"
    {% if with_names %}required{% endif %}
    autocomplete="new-password"
    maxlength="1024"
>
<ul id="password-requirements" class="pw-reqs" hidden>
    <li id="req-length"><span class="req-icon">•</span> 8+ characters</li>
    <li id="req-upper"><span class="req-icon">•</span> One uppercase letter</li>
    <li id="req-number"><span class="req-icon">•</span> One number</li>
    <li id="req-special"><span class="req-icon">•</span> One special character</li>
</ul>
<input
    id="confirm_password"
    {% if with_names %}name="confirm_password"{% endif %}
    type="password"
    placeholder="{{ confirm_placeholder }}"
    {% if with_names %}required{% endif %}
    autocomplete="new-password"
    maxlength="1024"
>
{% endmacro %}