{% extends "base.html" %}

{% block title %}Reset User Password - {{ lab_name }}{% endblock %}

{% block content %}
<div class="card" style="max-width: 600px; margin: 0 auto;">
    <div style="margin-bottom: 2rem;">
        <a href="{{ url_for('users') }}" style="color: var(--primary); text-decoration: none;">
            ← Back to Members
        </a>
    </div>
    
    <div class="card-header">Reset Password for {{ user.name }}</div>
    
    <div style="background-color: var(--bg-light); padding: 1rem; border-radius: 4px; margin-bottom: 1.5rem;">
        <p style="margin: 0; color: var(--text-dark);">
            <strong>User:</strong> {{ user.name }}<br>
            <strong>Email:</strong> {{ user.email }}
        </p>
    </div>
    
    <form method="POST">
        <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)">
        </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="background-color: #FFF3CD; border: 1px solid #FFE69C; padding: 1rem; border-radius: 4px; margin-bottom: 1.5rem;">
            <strong style="color: #856404;">⚠️ Warning:</strong>
            <p style="margin: 0.5rem 0 0 0; color: #856404;">
                This will immediately change the user's password. Make sure to communicate the new password to them securely.
            </p>
        </div>
        
        <div style="display: flex; gap: 1rem; margin-top: 2rem;">
            <button type="submit" class="btn btn-primary">Reset Password</button>
            <a href="{{ url_for('users') }}" 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('Passwords do not match!');
    } else {
        if (!confirm('Are you sure you want to reset this user\'s password?')) {
            e.preventDefault();
        }
    }
});
</script>
{% endblock %}