{% extends "base.html" %}

{% block content %}
<section class="hero" data-test="account-password-page">
  <p class="eyebrow">Account</p>
  <h1>Change Password</h1>
  <p class="lede">Use a strong password. This updates only your own account.</p>
</section>

<section class="sandbox" data-test="account-password-form-card">
  <h2>Password Update</h2>
  <form method="post" action="/account/password" class="stack-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <label for="current_password">Current Password</label>
    <input id="current_password" name="current_password" type="password" autocomplete="current-password" required>
    <label for="new_password">New Password</label>
    <input id="new_password" name="new_password" type="password" autocomplete="new-password" minlength="8" required>
    <label for="confirm_password">Confirm New Password</label>
    <input id="confirm_password" name="confirm_password" type="password" autocomplete="new-password" minlength="8" required>
    <button type="submit" data-loading-text="Updating...">Update Password</button>
  </form>
</section>
{% endblock %}