{% extends "base.html" %}

{% block title %}Central - Change Password{% endblock %}

{% block content %}
<article>
    <header>
        <h1>Change Password</h1>
    </header>
    
    {% if error %}
    <p style="color: var(--pico-color-red-500);">{{ error }}</p>
    {% endif %}
    
    <form action="/change-password" method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        
        <label for="current_password">
            Current Password
            <input type="password" id="current_password" name="current_password" required
                   autocomplete="current-password" autofocus>
        </label>
        
        <label for="new_password">
            New Password
            <input type="password" id="new_password" name="new_password" required
                   autocomplete="new-password" minlength="8">
            <small>Minimum 8 characters</small>
        </label>
        
        <label for="confirm_password">
            Confirm New Password
            <input type="password" id="confirm_password" name="confirm_password" required
                   autocomplete="new-password">
        </label>
        
        <button type="submit">Change Password</button>
    </form>
</article>
{% endblock %}