{% extends "base.html" %}

{% block title %}Edit User{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">Edit User: {{ user.username }}</h1>
        <a href="{{ url_for('web.users') }}" class="btn btn-secondary">
            <i data-feather="arrow-left"></i> Back to Users
        </a>
    </div>

    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <form method="POST" action="{{ url_for('web.edit_user', user_id=user.id) }}">
                <div class="mb-3">
                    <label for="username" class="form-label">Username</label>
                    <input type="text" class="form-control" id="username" value="{{ user.username }}" disabled>
                    <div class="form-text">Username cannot be changed</div>
                </div>
                <div class="mb-3">
                    <label for="email" class="form-label">Email</label>
                    <input type="email" class="form-control" id="email" name="email" value="{{ user.email }}" required>
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="is_active" name="is_active" {% if user.is_active %}checked{% endif %} {% if user.username == 'admin' %}disabled{% endif %}>
                    <label class="form-check-label" for="is_active">Active</label>
                    {% if user.username == 'admin' %}
                    <div class="form-text">Admin user must remain active</div>
                    {% endif %}
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">New Password</label>
                    <div class="input-group">
                        <input type="password" class="form-control" id="password" name="password">
                        <button class="btn btn-outline-secondary" type="button" id="togglePassword">
                            <i data-feather="eye" id="passwordIcon"></i>
                        </button>
                    </div>
                    <div class="form-text">Leave blank to keep current password.</div>
                </div>
                
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="password_change_required" name="password_change_required" {% if user.password_change_required %}checked{% endif %}>
                    <label class="form-check-label" for="password_change_required">Require password change on next login</label>
                    <div class="form-text">User will be prompted to change password when they next login</div>
                </div>
                
                <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="is_admin" name="is_admin" {% if user.is_admin or user.username == 'admin' %}checked{% endif %} {% if user.username == 'admin' %}disabled{% endif %}>
                    <label class="form-check-label" for="is_admin">Administrator</label>
                    <div class="form-text">{% if user.username == 'admin' %}The primary admin user cannot be demoted{% else %}Administrators have full access to all functions including user management{% endif %}</div>
                </div>
                
                <!-- Login attempt information -->
                <div class="mb-4 mt-4">
                    <h5>Login Information</h5>
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <tr>
                                <th>Failed Login Attempts:</th>
                                <td>
                                    {{ user.failed_login_attempts }}
                                    {% if user.failed_login_attempts > 10 %}
                                    <span class="badge bg-warning">High</span>
                                    {% endif %}
                                    {% if user.failed_login_attempts >= 50 %}
                                    <span class="badge bg-danger">Account Locked</span>
                                    {% endif %}
                                </td>
                            </tr>
                            <tr>
                                <th>Last Failed Login:</th>
                                <td>{{ user.last_failed_login.strftime('%Y-%m-%d %H:%M:%S') if user.last_failed_login else 'Never' }}</td>
                            </tr>
                            <tr>
                                <th>Last Successful Login:</th>
                                <td>{{ user.last_successful_login.strftime('%Y-%m-%d %H:%M:%S') if user.last_successful_login else 'Never' }}</td>
                            </tr>
                        </table>
                    </div>
                    
                    {% if user.failed_login_attempts > 0 %}
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="reset_attempts" name="reset_attempts">
                        <label class="form-check-label" for="reset_attempts">Reset Failed Login Attempts</label>
                        <div class="form-text">Clear the failed login attempts counter for this user</div>
                    </div>
                    {% endif %}
                </div>
                
                <button type="submit" class="btn btn-primary">Save Changes</button>
                <a href="{{ url_for('web.users') }}" class="btn btn-secondary">Cancel</a>
            </form>
        </div>
    </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Password visibility toggle
        const togglePassword = document.getElementById('togglePassword');
        const password = document.getElementById('password');
        const passwordIcon = document.getElementById('passwordIcon');
        
        if (togglePassword && password && passwordIcon) {
            togglePassword.addEventListener('click', function() {
                // Toggle the type attribute
                const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
                password.setAttribute('type', type);
                
                // Toggle the icon
                if (type === 'password') {
                    passwordIcon.setAttribute('data-feather', 'eye');
                } else {
                    passwordIcon.setAttribute('data-feather', 'eye-off');
                }
                
                // Update the Feather icon
                feather.replace();
            });
        }
    });
</script>
{% endblock %}