{#-
The password-change form itself, with no root `id` of its own -- the
`_card.html` split, so a future fragment could show it alongside something
else inside one swap target without nesting two elements carrying one id.
-#}
<div class="panel">
<h2>Password</h2>
<p class="muted small">
Changing it signs out every other session of yours; this one stays signed
in.
</p>
{#- `hx-headers` lives on <body> and is inherited by the whole document, but
this fragment is rendered standalone on a refusal or a success, so the
handler inserts `csrf_token` and the form carries it explicitly -- the
`_enrol.html` precedent. -#}
<form hx-post="/ui/account/password"
hx-target="#account-password"
hx-headers='{"X-CSRF-Token": "{{ csrf_token }}"}'>
<div class="field">
<label for="current-password">Current password</label>
<input id="current-password" type="password" name="current_password"
autocomplete="current-password" required>
</div>
<div class="field">
<label for="new-password">New password</label>
<input id="new-password" type="password" name="new_password"
autocomplete="new-password" required
minlength="{{ min_password_length }}">
</div>
<div class="actions">
<button type="submit" class="primary">Change password</button>
</div>
</form>
</div>