{% extends "base.html" %}

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

{% block breadcrumbs %}
<nav aria-label="breadcrumb" class="bg-light">
    <div class="container-fluid">
        <ol class="breadcrumb py-2 mb-0">
            <li class="breadcrumb-item">
                <a href="{{ url_for('dashboard') }}">
                    <i class="bi bi-house me-1"></i>Dashboard
                </a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ url_for('auth.profile') }}">
                    <i class="bi bi-person me-1"></i>Profile
                </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <i class="bi bi-key me-1"></i>Change Password
            </li>
        </ol>
    </div>
</nav>
{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-12 col-md-8 col-lg-6">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="bi bi-key-fill me-2"></i>Change Password
                </h5>
            </div>
            <div class="card-body">
                <!-- Info Notice -->
                <div class="alert alert-info">
                    <i class="bi bi-info-circle me-2"></i>
                    <strong>Set New Password:</strong> Enter your new password below. You are already authenticated, so no current password verification is needed.
                </div>

                <!-- Password Change Form -->
                <form method="POST" novalidate>
                    <div class="row g-3">
                        <!-- New Password -->
                        <div class="col-12">
                            <label for="new_password" class="form-label">
                                <i class="bi bi-shield-lock me-1"></i>New Password <span class="text-danger">*</span>
                            </label>
                            <input type="password" 
                                   class="form-control" 
                                   id="new_password" 
                                   name="new_password" 
                                   placeholder="Enter new password"
                                   required
                                   autocomplete="new-password"
                                   minlength="3"
                                   autofocus>
                            <div class="form-text">
                                <i class="bi bi-info-circle me-1"></i>
                                Password must be at least 3 characters long.
                            </div>
                        </div>
                        
                        <!-- Confirm New Password -->
                        <div class="col-12">
                            <label for="confirm_password" class="form-label">
                                <i class="bi bi-shield-check me-1"></i>Confirm New Password <span class="text-danger">*</span>
                            </label>
                            <input type="password" 
                                   class="form-control" 
                                   id="confirm_password" 
                                   name="confirm_password" 
                                   placeholder="Confirm new password"
                                   required
                                   autocomplete="new-password"
                                   minlength="3">
                            <div class="form-text">
                                <i class="bi bi-info-circle me-1"></i>
                                Must match the new password above.
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="d-flex gap-2 mt-4 flex-wrap">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-check-lg me-1"></i>Change Password
                        </button>
                        <a href="{{ url_for('auth.profile') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-x-lg me-1"></i>Cancel
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
    // Password confirmation validation
    document.addEventListener('DOMContentLoaded', function() {
        const newPassword = document.getElementById('new_password');
        const confirmPassword = document.getElementById('confirm_password');
        
        function validatePasswordMatch() {
            if (newPassword.value && confirmPassword.value) {
                if (newPassword.value !== confirmPassword.value) {
                    confirmPassword.setCustomValidity('Passwords do not match');
                } else {
                    confirmPassword.setCustomValidity('');
                }
            }
        }
        
        newPassword.addEventListener('input', validatePasswordMatch);
        confirmPassword.addEventListener('input', validatePasswordMatch);
        
        // Form submission validation
        document.querySelector('form').addEventListener('submit', function(e) {
            validatePasswordMatch();
            if (!confirmPassword.checkValidity()) {
                e.preventDefault();
                confirmPassword.reportValidity();
            }
        });
    });
</script>
{% endblock %}