{% extends "base.html" %}
{% block title %}Change Password{% endblock %}
{% block content %}
<div style="max-width: 500px; margin: 50px auto; background: white; padding: 30px; border-radius: 20px;">
    <h2>🔐 Change Password</h2>
    <p style="color: #666; margin-bottom: 20px;">Update your admin password</p>
    
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="flash {{ category }}" style="padding: 10px; border-radius: 8px; margin-bottom: 15px; {% if category=='success' %}background:#d4edda; color:#155724{% else %}background:#f8d7da; color:#721c24{% endif %}">{{ message }}</div>
            {% endfor %}
        {% endif %}
    {% endwith %}
    
    <form method="post" action="/change-password">
        <label>Current Password</label>
        <input type="password" name="old_password" required style="width:100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 5px;">
        
        <label>New Password</label>
        <input type="password" name="new_password" required style="width:100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 5px;">
        
        <label>Confirm New Password</label>
        <input type="password" name="confirm_password" required style="width:100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 5px;">
        
        <button type="submit" style="background: #28a745; color: white; padding: 12px; border: none; border-radius: 8px; width: 100%; cursor: pointer;">✅ Update Password</button>
        <button type="button" onclick="window.location.href='/dashboard'" style="background: #6c757d; color: white; padding: 12px; border: none; border-radius: 8px; width: 100%; margin-top: 10px; cursor: pointer;">← Back to Dashboard</button>
    </form>
</div>
{% endblock %}