{% extends 'base.html.twig' %}
{% block title %}Change Password{% endblock %}
{% block content %}

<div class="page-header">
    <div>
        <h1 class="page-title">Change Password</h1>
        <p class="page-sub">Update your account password</p>
    </div>
    <a href="{{ path('app_personal_index') }}" class="btn btn-secondary">← Back</a>
</div>

{% for msg in app.flashes('success') %}
    <div class="flash flash--success">{{ msg }}</div>
{% endfor %}

{% for error in errors %}
    <div class="flash flash--danger">{{ error }}</div>
{% endfor %}

<div class="card" style="max-width:480px">
    <form method="post" action="{{ path('app_change_password') }}" class="card-body" style="padding:1.5rem;display:flex;flex-direction:column;gap:1.1rem">
        <input type="hidden" name="_token" value="{{ csrf_token('change_password') }}">

        <div class="form-group">
            <label class="form-label" for="current_password">Current password</label>
            <input type="password" id="current_password" name="current_password"
                   class="form-input" autocomplete="current-password" placeholder="••••••••" required>
        </div>

        <div class="form-group">
            <label class="form-label" for="new_password">New password</label>
            <input type="password" id="new_password" name="new_password"
                   class="form-input" autocomplete="new-password" placeholder="••••••••" minlength="8" required>
            <span class="form-hint">At least 8 characters</span>
        </div>

        <div class="form-group">
            <label class="form-label" for="confirm_password">Confirm new password</label>
            <input type="password" id="confirm_password" name="confirm_password"
                   class="form-input" autocomplete="new-password" placeholder="••••••••" minlength="8" required>
        </div>

        <button type="submit" class="btn btn-primary">Update Password</button>
    </form>
</div>

{% endblock %}