{% extends 'base.html' %}
{% load static %}

{% block title %}Edit User Role - {{ organization.name }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="mb-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'tenants:team_members' %}">Team Members</a></li>
                <li class="breadcrumb-item active">Edit User</li>
            </ol>
        </nav>
        <h2 class="mb-1">
            <i class="ti ti-user-edit me-2"></i>Edit User Role
        </h2>
        <p class="text-muted">Modify user role and permissions for {{ edit_tenant_user.user.get_full_name|default:edit_tenant_user.user.email }}</p>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <!-- Edit Form -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">User Information</h5>
                </div>
                <div class="card-body">
                    <form method="post" action="">
                        {% csrf_token %}
                        
                        {% if form.non_field_errors %}
                            <div class="alert alert-danger">
                                {{ form.non_field_errors }}
                            </div>
                        {% endif %}

                        <!-- User Details (Read-only) -->
                        <div class="mb-4 p-3 bg-light rounded">
                            <div class="row">
                                <div class="col-md-6 mb-2">
                                    <strong>Name:</strong><br>
                                    {{ edit_tenant_user.user.get_full_name|default:edit_tenant_user.user.username }}
                                </div>
                                <div class="col-md-6 mb-2">
                                    <strong>Email:</strong><br>
                                    {{ edit_tenant_user.user.email }}
                                </div>
                                <div class="col-md-6 mb-2">
                                    <strong>Joined:</strong><br>
                                    {{ edit_tenant_user.joined_at|date:"d M Y" }}
                                </div>
                                <div class="col-md-6">
                                    <strong>Current Status:</strong><br>
                                    {% if edit_tenant_user.is_active %}
                                        <span class="badge bg-success">Active</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Inactive</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>

                        <!-- Role -->
                        <div class="mb-3">
                            <label for="{{ form.role.id_for_label }}" class="form-label">
                                Role <span class="text-danger">*</span>
                            </label>
                            {{ form.role }}
                            {% if form.role.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.role.errors }}
                                </div>
                            {% endif %}
                            <small class="form-text text-muted">
                                Changing the role will automatically update the user's permissions.
                            </small>
                        </div>

                        <!-- Active Status -->
                        <div class="mb-4">
                            <div class="form-check form-switch">
                                {{ form.is_active }}
                                <label class="form-check-label" for="{{ form.is_active.id_for_label }}">
                                    User is Active
                                </label>
                            </div>
                            {% if form.is_active.errors %}
                                <div class="invalid-feedback d-block">
                                    {{ form.is_active.errors }}
                                </div>
                            {% endif %}
                            <small class="form-text text-muted">
                                Inactive users cannot log in to the system.
                            </small>
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-flex gap-2">
                            <button type="submit" class="btn btn-primary">
                                <i class="ti ti-device-floppy me-2"></i>Save Changes
                            </button>
                            <a href="{% url 'tenants:team_members' %}" class="btn btn-secondary">
                                <i class="ti ti-x me-2"></i>Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Current Permissions -->
            <div class="card mb-3">
                <div class="card-header bg-info text-white">
                    <h6 class="card-title mb-0 text-white">
                        <i class="ti ti-shield-lock me-2"></i>Current Permissions
                    </h6>
                </div>
                <div class="card-body">
                    <p class="small text-muted mb-3">Based on current role: <strong>{{ edit_tenant_user.get_role_display }}</strong></p>
                    
                    <div class="list-group list-group-flush">
                        <div class="list-group-item d-flex align-items-center px-0">
                            <i class="ti ti-{% if role_permissions.can_view_reports %}check text-success{% else %}x text-danger{% endif %} me-2"></i>
                            <span class="{% if not role_permissions.can_view_reports %}text-muted{% endif %}">View Reports</span>
                        </div>
                        <div class="list-group-item d-flex align-items-center px-0">
                            <i class="ti ti-{% if role_permissions.can_create_transactions %}check text-success{% else %}x text-danger{% endif %} me-2"></i>
                            <span class="{% if not role_permissions.can_create_transactions %}text-muted{% endif %}">Create Transactions</span>
                        </div>
                        <div class="list-group-item d-flex align-items-center px-0">
                            <i class="ti ti-{% if role_permissions.can_edit_transactions %}check text-success{% else %}x text-danger{% endif %} me-2"></i>
                            <span class="{% if not role_permissions.can_edit_transactions %}text-muted{% endif %}">Edit Transactions</span>
                        </div>
                        <div class="list-group-item d-flex align-items-center px-0">
                            <i class="ti ti-{% if role_permissions.can_delete_transactions %}check text-success{% else %}x text-danger{% endif %} me-2"></i>
                            <span class="{% if not role_permissions.can_delete_transactions %}text-muted{% endif %}">Delete Transactions</span>
                        </div>
                        <div class="list-group-item d-flex align-items-center px-0">
                            <i class="ti ti-{% if role_permissions.can_manage_contacts %}check text-success{% else %}x text-danger{% endif %} me-2"></i>
                            <span class="{% if not role_permissions.can_manage_contacts %}text-muted{% endif %}">Manage Contacts</span>
                        </div>
                        <div class="list-group-item d-flex align-items-center px-0">
                            <i class="ti ti-{% if role_permissions.can_manage_users %}check text-success{% else %}x text-danger{% endif %} me-2"></i>
                            <span class="{% if not role_permissions.can_manage_users %}text-muted{% endif %}">Manage Users</span>
                        </div>
                        <div class="list-group-item d-flex align-items-center px-0">
                            <i class="ti ti-{% if role_permissions.can_manage_settings %}check text-success{% else %}x text-danger{% endif %} me-2"></i>
                            <span class="{% if not role_permissions.can_manage_settings %}text-muted{% endif %}">Manage Settings</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Role Descriptions -->
            <div class="card">
                <div class="card-header">
                    <h6 class="card-title mb-0">
                        <i class="ti ti-info-circle me-2"></i>Role Descriptions
                    </h6>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <h6 class="mb-1"><span class="badge bg-primary">Admin</span></h6>
                        <p class="small text-muted mb-0">Full access except billing management</p>
                    </div>
                    <div class="mb-3">
                        <h6 class="mb-1"><span class="badge bg-success">Accountant</span></h6>
                        <p class="small text-muted mb-0">Manage transactions, contacts, and view reports</p>
                    </div>
                    <div class="mb-3">
                        <h6 class="mb-1"><span class="badge bg-info">Staff</span></h6>
                        <p class="small text-muted mb-0">Create transactions and view basic reports</p>
                    </div>
                    <div class="mb-0">
                        <h6 class="mb-1"><span class="badge bg-secondary">Viewer</span></h6>
                        <p class="small text-muted mb-0">Read-only access to view data</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Update permissions preview when role changes
    document.addEventListener('DOMContentLoaded', function() {
        const roleSelect = document.getElementById('{{ form.role.id_for_label }}');
        
        if (roleSelect) {
            roleSelect.addEventListener('change', function() {
                // Show a note that permissions will be updated
                const note = document.createElement('div');
                note.className = 'alert alert-info mt-2';
                note.innerHTML = '<i class="ti ti-info-circle me-2"></i>Permissions will be automatically updated based on the new role when you save.';
                
                // Remove any existing notes
                const existingNote = roleSelect.parentElement.querySelector('.alert');
                if (existingNote) {
                    existingNote.remove();
                }
                
                // Add new note
                roleSelect.parentElement.appendChild(note);
            });
        }
    });
</script>
{% endblock %}