{% extends "base.html" %}

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

{% block content %}
<div class="card" style="max-width: 600px; margin: 0 auto;">
    <div class="card-header">Change Your Password</div>
    
    <form method="POST">
        <div class="form-group">
            <label for="current_password">Current Password</label>
            <input type="password" id="current_password" name="current_password" 
                   class="form-control" required
                   placeholder="Enter your current password">
        </div>
        
        <div class="form-group">
            <label for="new_password">New Password</label>
            <input type="password" id="new_password" name="new_password" 
                   class="form-control" required minlength="6"
                   placeholder="Enter new password (minimum 6 characters)">
            <small style="color: var(--text-light); display: block; margin-top: 0.5rem;">
                Password should be at least 6 characters long.
            </small>
        </div>
        
        <div class="form-group">
            <label for="confirm_password">Confirm New Password</label>
            <input type="password" id="confirm_password" name="confirm_password" 
                   class="form-control" required minlength="6"
                   placeholder="Re-enter new password">
        </div>
        
        <div style="display: flex; gap: 1rem; margin-top: 2rem;">
            <button type="submit" class="btn btn-primary">Change Password</button>
            <a href="{{ url_for('dashboard') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>

<script>
// Client-side password match validation
document.querySelector('form').addEventListener('submit', function(e) {
    const newPassword = document.getElementById('new_password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    
    if (newPassword !== confirmPassword) {
        e.preventDefault();
        alert('New passwords do not match!');
    }
});
</script>
{% endblock %}