{% extends "ui/base.html" %}

{% block title %}{{ nav.tr("password-title") }}{% endblock %}

{% block content %}
<main class="login-main">
  <form class="login-card" hx-post="/password" hx-target="#password-status" hx-swap="innerHTML" hx-disabled-elt="button" novalidate>
    <h1>{{ nav.tr("password-title") }}</h1>
    <p class="hint">{{ nav.tr("password-empty-current-hint") }}</p>
    <label>{{ nav.tr("field-current-password") }}<input name="current_password" type="password" autocomplete="current-password"></label>
    <label>{{ nav.tr("field-new-password") }}<input name="new_password" type="password" autocomplete="new-password" required></label>
    <label>{{ nav.tr("field-confirm-new-password") }}<input name="new_password_confirmation" type="password" autocomplete="new-password" required></label>
    <button type="submit">{{ nav.tr("password-button-change") }}</button>
    <div id="password-status" aria-live="polite"></div>
  </form>
</main>
{% endblock %}