{% extends "module_base.html" %}
{% load static %}

{% block title %}Edit User - {{ user.username }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title mb-0">
                        <i class="fas fa-user-edit me-2"></i>Edit User: {{ user.username }}
                    </h4>
                    <div class="card-tools">
                        <a href="{% url 'accounts:user_detail' user.id %}" class="btn btn-info btn-sm">
                            <i class="fas fa-eye"></i> View
                        </a>
                        <a href="{% url 'accounts:user_list' %}" class="btn btn-secondary btn-sm">
                            <i class="fas fa-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}

                        <div class="row">
                            <div class="col-md-6">
                                <h5>Basic Information</h5>

                                <div class="mb-3">
                                    <label for="username" class="form-label">Username</label>
                                    <input type="text" class="form-control" id="username" name="username"
                                           value="{{ user.username }}" readonly>
                                    <div class="form-text">Username cannot be changed</div>
                                </div>

                                <div class="mb-3">
                                    <label for="first_name" class="form-label">First Name</label>
                                    <input type="text" class="form-control" id="first_name" name="first_name"
                                           value="{{ user.first_name }}">
                                </div>

                                <div class="mb-3">
                                    <label for="last_name" class="form-label">Last Name</label>
                                    <input type="text" class="form-control" id="last_name" name="last_name"
                                           value="{{ user.last_name }}">
                                </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 }}">
                                </div>

                                <div class="mb-3">
                                    <label for="password" class="form-label">New Password</label>
                                    <input type="password" class="form-control" id="password" name="password">
                                    <div class="form-text">Leave blank to keep current password</div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <h5>Additional Information</h5>

                                <div class="mb-3">
                                    <label for="phone" class="form-label">Phone</label>
                                    <input type="tel" class="form-control" id="phone" name="phone"
                                           value="{{ user.phone }}">
                                </div>

                                <div class="mb-3">
                                    <label for="department" class="form-label">Department</label>
                                    <input type="text" class="form-control" id="department" name="department"
                                           value="{{ user.department }}">
                                </div>

                                <div class="mb-3">
                                    <label for="position" class="form-label">Position</label>
                                    <input type="text" class="form-control" id="position" name="position"
                                           value="{{ user.position }}">
                                </div>

                                <div class="mb-3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="is_active" name="is_active"
                                               {% if user.is_active %}checked{% endif %}>
                                        <label class="form-check-label" for="is_active">
                                            Active Account
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <h5>Assign Roles</h5>
                                <div class="mb-3">
                                    {% if roles %}
                                        {% for role in roles %}
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="role_{{ role.id }}" name="roles"
                                                       value="{{ role.id }}"
                                                       {% if role.id in user_roles %}checked{% endif %}>
                                                <label class="form-check-label" for="role_{{ role.id }}">
                                                    {{ role.name }}
                                                    <br>
                                                    <small class="text-muted">{{ role.description|default:"" }}</small>
                                                </label>
                                            </div>
                                        {% endfor %}
                                    {% else %}
                                        <p class="text-muted">No roles available.</p>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-2"></i>Update User
                                </button>
                                <a href="{% url 'accounts:user_detail' user.id %}" class="btn btn-secondary">
                                    <i class="fas fa-times me-2"></i>Cancel
                                </a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">User Information</h5>
                </div>
                <div class="card-body">
                    <p><strong>Created:</strong><br>{{ user.date_joined|date:"d M Y H:i" }}</p>
                    <p><strong>Last Login:</strong><br>
                        {% if user.last_login %}
                            {{ user.last_login|date:"d M Y H:i" }}
                        {% else %}
                            Never
                        {% endif %}
                    </p>
                    <p><strong>Status:</strong><br>
                        {% if user.is_active %}
                            <span class="badge bg-success">Active</span>
                        {% else %}
                            <span class="badge bg-secondary">Inactive</span>
                        {% endif %}
                    </p>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="mb-0">Security Notes</h5>
                </div>
                <div class="card-body">
                    <ul class="small">
                        <li>Username cannot be changed for security reasons</li>
                        <li>Leave password blank to keep current password</li>
                        <li>Inactive users cannot log in</li>
                        <li>Changes take effect immediately</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Password validation
    const passwordInput = document.getElementById('password');

    passwordInput.addEventListener('input', function() {
        if (this.value && this.value.length < 8) {
            this.classList.add('is-invalid');
            this.classList.remove('is-valid');
        } else if (this.value) {
            this.classList.remove('is-invalid');
            this.classList.add('is-valid');
        } else {
            this.classList.remove('is-invalid', 'is-valid');
        }
    });

    // Form validation
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        const password = passwordInput.value;
        if (password && password.length < 8) {
            e.preventDefault();
            alert('Password must be at least 8 characters long.');
            return false;
        }
    });
});
</script>
{% endblock %}