{% extends "base.html" %}
{% import 'components/macros.html' as ui %}

{% block title %}Change Password{% endblock %}
{% block head_extra %}
<link rel="stylesheet" href="/static/hil-pages/change_password.css">
{% endblock %}
{% block content %}
<div class="page">
    <div class="card">
        <h1>Change Password</h1>
        <p>Update your account password here. After saving, use the new password the next time you sign in.</p>

        {% if error %}
            <div class="error">{{ error }}</div>
        {% endif %}

        <form method="POST" action="/change-password">
            <label for="current_password">Current Password</label>
            <input id="current_password" name="current_password" type="password" required>

            <label for="new_password">New Password</label>
            <input id="new_password" name="new_password" type="password" required minlength="8">


            <label for="confirm_password">Confirm New Password</label>
            <input id="confirm_password" name="confirm_password" type="password" required>

            <div class="actions">
                <button type="submit">Save New Password</button>
                <a href="{{ home_url }}" class="btn">Back</a>
            </div>
        </form>
    </div>
</div>
{% endblock %}