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

{% block title %}Edit Role - {{ role.name }}{% 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-tag me-2"></i>Edit Role: {{ role.name }}
                    </h4>
                    <div class="card-tools">
                        <a href="{% url 'accounts:role_detail' role.id %}" class="btn btn-info btn-sm">
                            <i class="fas fa-eye"></i> View
                        </a>
                        <a href="{% url 'accounts:role_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="name" class="form-label">Role Name</label>
                                    <input type="text" class="form-control" id="name" name="name"
                                           value="{{ role.name }}" required>
                                    <div class="form-text">Unique name for this role.</div>
                                </div>

                                <div class="mb-3">
                                    <label for="description" class="form-label">Description</label>
                                    <textarea class="form-control" id="description" name="description" rows="3">{{ role.description }}</textarea>
                                    <div class="form-text">Optional description of this role's purpose.</div>
                                </div>
                            </div>

                            <div class="col-md-6">
                                <h5>Assign Permissions</h5>
                                <div class="mb-3">
                                    {% if permissions %}
                                        <div class="permissions-list" style="max-height: 300px; overflow-y: auto; border: 1px solid #dee2e6; padding: 10px; border-radius: 5px;">
                                            {% regroup permissions by module as module_list %}
                                            {% for module in module_list %}
                                                <h6 class="mt-3 mb-2">
                                                    <i class="fas fa-folder"></i> {{ module.grouper|title }}
                                                </h6>
                                                {% for permission in module.list %}
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" id="perm_{{ permission.id }}" name="permissions"
                                                               value="{{ permission.id }}"
                                                               {% if permission.id in role_permissions %}checked{% endif %}>
                                                        <label class="form-check-label" for="perm_{{ permission.id }}">
                                                            <strong>{{ permission.name }}</strong>
                                                            <br>
                                                            <small class="text-muted">{{ permission.description|default:"" }}</small>
                                                        </label>
                                                    </div>
                                                {% endfor %}
                                            {% endfor %}
                                        </div>
                                    {% else %}
                                        <p class="text-muted">No permissions 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 Role
                                </button>
                                <a href="{% url 'accounts:role_detail' role.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">Role Information</h5>
                </div>
                <div class="card-body">
                    <p><strong>Created:</strong><br>{{ role.created_at|date:"d M Y H:i" }}</p>
                    <p><strong>Last Updated:</strong><br>{{ role.updated_at|date:"d M Y H:i" }}</p>
                    <p><strong>Users Count:</strong><br>{{ role.userrole_set.count }}</p>
                    <p><strong>Permissions Count:</strong><br>{{ role.rolepermission_set.count }}</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>Changes take effect immediately</li>
                        <li>Review permission assignments carefully</li>
                        <li>Consider impact on assigned users</li>
                        <li>Test role functionality after changes</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Add some interactivity to permission checkboxes
    const checkboxes = document.querySelectorAll('input[name="permissions"]');
    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            // You could add logic here to select/deselect related permissions
            console.log('Permission changed:', this.id);
        });
    });
});
</script>
{% endblock %}