{% extends "dashboard/base.html" %}

{% block title %}Access Management{% endblock %}

{% block content %}
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8" x-data="{ selectedGroup: {{ groups.0.id if groups else 'null' }} }">
    
    <!-- Page Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-slate-800 dark:text-slate-100">Access Management</h1>
        <p class="mt-1 text-slate-500 dark:text-slate-400">Manage user groups, feature permissions, and user assignments.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        
        <!-- Left Column: Group List & Creation -->
        <div class="lg:col-span-1 flex flex-col space-y-6">
            
            <!-- Create Group Form -->
            <div class="bg-white dark:bg-slate-800 p-5 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
                <h2 class="text-lg font-semibold mb-4 text-slate-800 dark:text-slate-200">Create New Group</h2>
                <form method="post" class="space-y-4">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="create_group">
                    <div>
                        <label for="group_name" class="sr-only">Group Name</label>
                        <input type="text" id="group_name" name="group_name" required placeholder="New group name..."
                               class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">
                    </div>
                    <div>
                        <label for="description" class="sr-only">Description</label>
                        <textarea id="description" name="description" placeholder="Group description (optional)..." rows="2"
                                  class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"></textarea>
                    </div>
                    <div>
                        <label for="permission_level" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Permission Level</label>
                        <select id="permission_level" name="permission_level" 
                                class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">
                            <option value="read">Read Only</option>
                            <option value="write" selected>Read & Write</option>
                            <option value="admin">Full Admin</option>
                        </select>
                    </div>
                    <button type="submit"
                            class="w-full inline-flex justify-center items-center px-4 py-2 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-slate-800 transition">
                        Create Group
                    </button>
                </form>
            </div>

            <!-- Group List -->
            <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
                <div class="p-4 border-b border-slate-200 dark:border-slate-700">
                    <h3 class="text-lg font-medium text-slate-800 dark:text-slate-100">Groups</h3>
                </div>
                <nav class="p-2 space-y-1">
                    {% for group in groups %}
                    <a href="#" @click.prevent="selectedGroup = {{ group.id }}"
                       :class="{ 'bg-indigo-50 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-300': selectedGroup === {{ group.id }}, 'text-slate-600 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700/50': selectedGroup !== {{ group.id }} }"
                       class="flex justify-between items-center px-3 py-2.5 rounded-md text-sm font-medium transition-colors">
                        <div>
                            <span class="block">{{ group.group_name }}</span>
                            <span class="text-xs text-slate-500 dark:text-slate-400">{{ group.permission_level|title }}</span>
                        </div>
                        <span class="text-xs px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-700">{{ group.users.count }} users</span>
                    </a>
                    {% endfor %}
                </nav>
            </div>
        </div>

        <!-- Right Column: Group Details Management -->
        <div class="lg:col-span-3">
            {% if not groups %}
            <div class="flex items-center justify-center h-full bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 p-8">
                <div class="text-center">
                    <svg class="mx-auto h-12 w-12 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14v6m-3-3h6M6 10h2a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2zm10 0h2a2 2 0 002-2V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v2a2 2 0 002 2zM6 20h2a2 2 0 002-2v-2a2 2 0 00-2-2H6a2 2 0 00-2 2v2a2 2 0 002 2z"></path></svg>
                    <h3 class="mt-2 text-lg font-medium text-slate-900 dark:text-slate-100">No Groups Found</h3>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Create a group to get started.</p>
                </div>
            </div>
            {% else %}
                {% for group in groups %}
                <div x-show="selectedGroup === {{ group.id }}" x-transition class="space-y-6">
                    <!-- Header for the selected group -->
                    <div class="flex justify-between items-start">
                        <div>
                            <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">{{ group.group_name }}</h2>
                            {% if group.description %}
                            <p class="text-slate-600 dark:text-slate-400 mt-1">{{ group.description }}</p>
                            {% endif %}
                            <div class="flex items-center space-x-2 mt-2">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                    {% if group.permission_level == 'admin' %}bg-purple-100 text-purple-800 dark:bg-purple-800/30 dark:text-purple-300
                                    {% elif group.permission_level == 'write' %}bg-blue-100 text-blue-800 dark:bg-blue-800/30 dark:text-blue-300
                                    {% else %}bg-gray-100 text-gray-800 dark:bg-gray-800/30 dark:text-gray-300{% endif %}">
                                    {{ group.permission_level|title }} Access
                                </span>
                                {% if group.is_active %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-800/30 dark:text-green-300">Active</span>
                                {% else %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-800/30 dark:text-red-300">Inactive</span>
                                {% endif %}
                            </div>
                        </div>
                        <div class="flex space-x-2">
                            <form method="post" class="inline">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="toggle_group_status">
                                <input type="hidden" name="group_id" value="{{ group.id }}">
                                <button type="submit" class="inline-flex items-center px-3 py-1.5 text-sm 
                                    {% if group.is_active %}bg-yellow-50 text-yellow-600 dark:bg-yellow-900/20 dark:text-yellow-400 hover:bg-yellow-100 dark:hover:bg-yellow-900/40
                                    {% else %}bg-green-50 text-green-600 dark:bg-green-900/20 dark:text-green-400 hover:bg-green-100 dark:hover:bg-green-900/40{% endif %}
                                    font-semibold rounded-md transition">
                                    {% if group.is_active %}Deactivate{% else %}Activate{% endif %}
                                </button>
                            </form>
                            <form method="post" onsubmit="return confirm('Are you sure you want to delete this group? This action cannot be undone.');">
                                {% csrf_token %}
                                <input type="hidden" name="action" value="delete_group">
                                <input type="hidden" name="group_id" value="{{ group.id }}">
                                <button type="submit" class="inline-flex items-center px-3 py-1.5 text-sm bg-red-50 text-red-600 dark:bg-red-900/20 dark:text-red-400 font-semibold rounded-md hover:bg-red-100 dark:hover:bg-red-900/40 transition">
                                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                    Delete
                                </button>
                            </form>
                        </div>
                    </div>

                    <!-- Permissions Management Card -->
                    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
                        <form method="post">
                             {% csrf_token %}
                            <input type="hidden" name="action" value="update_group_permissions">
                            <input type="hidden" name="group_id" value="{{ group.id }}">
                            <div class="p-5 border-b border-slate-200 dark:border-slate-700">
                                <h4 class="text-lg font-semibold text-slate-700 dark:text-slate-200">Feature Permissions</h4>
                                <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Select the features this group can access.</p>
                            </div>
                            <div class="p-5">
                                {% if features %}
                                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                                    {% for feature in features %}
                                    {% if feature.url_name != 'access_management' %}
                                    <label for="feature-{{ group.id }}-{{ feature.id }}" class="flex items-start space-x-3 p-3 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700/50 cursor-pointer transition-colors {% if not feature.is_active %}opacity-50 cursor-not-allowed{% endif %}">
                                        <input id="feature-{{ group.id }}-{{ feature.id }}" type="checkbox" name="features" value="{{ feature.id }}"
                                               {% if feature in group.features.all and feature.is_active %}checked{% endif %}
                                               {% if not feature.is_active %}disabled{% endif %}
                                               class="h-4 w-4 mt-0.5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                                        <div class="flex-1">
                                            <span class="text-sm font-medium text-slate-800 dark:text-slate-200 block">{{ feature.name }}</span>
                                            {% if feature.description %}
                                            <span class="text-xs text-slate-500 dark:text-slate-400 block mt-1">{{ feature.description }}</span>
                                            {% endif %}
                                            <span class="text-xs text-slate-400 dark:text-slate-500 font-mono block mt-1">{{ feature.url_name }}</span>
                                            {% if not feature.is_active %}
                                                <span class="text-xs text-red-500 dark:text-red-400 block mt-1">(Feature Disabled)</span>
                                            {% endif %}
                                        </div>
                                    </label>
                                    {% endif %}
                                    {% endfor %}
                                </div>
                                {% else %}
                                <div class="text-center py-8">
                                    <svg class="mx-auto h-12 w-12 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                                    <h3 class="mt-2 text-sm font-medium text-slate-900 dark:text-slate-100">No Features Available</h3>
                                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Create features first to assign permissions.</p>
                                </div>
                                {% endif %}
                            </div>
                            {% if features %}
                            <div class="p-5 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-200 dark:border-slate-700 text-right rounded-b-xl">
                                <button type="submit" class="px-4 py-2 text-sm bg-indigo-600 text-white font-semibold rounded-md hover:bg-indigo-700 transition">Update Permissions</button>
                            </div>
                            {% endif %}
                        </form>
                    </div>

                    <!-- User Management Card -->
                    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
                        <form method="post" x-data="{ search: '' }">
                            {% csrf_token %}
                            <input type="hidden" name="action" value="update_group_users">
                            <input type="hidden" name="group_id" value="{{ group.id }}">
                            <div class="p-5 border-b border-slate-200 dark:border-slate-700">
                                <h4 class="text-lg font-semibold text-slate-700 dark:text-slate-200">User Assignment</h4>
                                <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Assign users to this group by searching below.</p>
                                <div class="relative mt-4">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                                        <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                                    </span>
                                    <input x-model.debounce.300ms="search" type="text" placeholder="Search by name or email..."
                                           class="w-full pl-10 pr-4 py-2 text-sm bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">
                                </div>
                            </div>
                            <div class="p-5 max-h-60 overflow-y-auto">
                                <div x-show="search.trim().length === 0" class="text-center text-slate-500 dark:text-slate-400 py-10">
                                    <svg class="mx-auto h-8 w-8 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                                    <p>Start typing to search for users</p>
                                </div>
                                {% if users %}
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    {% for user in users %}
                                    {% if user.role != 'superadmin' and user.role != 'super_admin' %}
                                    <label for="user-{{ group.id }}-{{ user.id }}"
                                           x-show="search.trim().length > 0 && ('{{ user.name|lower }}'.includes(search.trim().toLowerCase()) || '{{ user.email|lower }}'.includes(search.trim().toLowerCase()))"
                                           x-transition
                                           class="flex items-center space-x-3 p-3 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700/50 cursor-pointer transition-colors border border-slate-200 dark:border-slate-600">
                                        <input id="user-{{ group.id }}-{{ user.id }}" type="checkbox" name="users" value="{{ user.id }}"
                                               {% if user in group.users.all %}checked{% endif %}
                                               class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                                        <div class="flex-1 min-w-0">
                                            <p class="text-sm font-medium text-slate-800 dark:text-slate-200 truncate">{{ user.name }}</p>
                                            <p class="text-xs text-slate-500 dark:text-slate-400 truncate">{{ user.email }}</p>
                                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-300 mt-1">{{ user.role|title }}</span>
                                        </div>
                                    </label>
                                    {% endif %}
                                    {% endfor %}
                                </div>
                                {% else %}
                                <div class="text-center py-8">
                                    <svg class="mx-auto h-12 w-12 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                                    <h3 class="mt-2 text-sm font-medium text-slate-900 dark:text-slate-100">No Users Available</h3>
                                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">No users found to assign to groups.</p>
                                </div>
                                {% endif %}
                            </div>
                            {% if users %}
                            <div class="p-5 bg-slate-50 dark:bg-slate-800/50 border-t border-slate-200 dark:border-slate-700 text-right rounded-b-xl">
                                <button type="submit" class="px-4 py-2 text-sm bg-indigo-600 text-white font-semibold rounded-md hover:bg-indigo-700 transition">Update Users</button>
                            </div>
                            {% endif %}
                        </form>
                    </div>
                </div>
                {% endfor %}
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
{% endblock %}
```

```python:dashboard_rbac/ldc_dashboard_rbac/templates/ldc_dashboard_rbac/feature_management.html
{% extends "dashboard/base.html" %}

{% block title %}Feature Management{% endblock %}

{% block content %}
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8" x-data="{ editModalOpen: false, featureToEdit: {}, showInactive: false }">
    
    <!-- Page Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-slate-800 dark:text-slate-100">Feature Management</h1>
        <p class="mt-1 text-slate-500 dark:text-slate-400">Add, edit, and manage system features available for user groups.</p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        
        <!-- Left Column: Create Feature Form -->
        <div class="lg:col-span-1">
            <div class="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700 sticky top-24">
                <h2 class="text-xl font-semibold mb-4 text-slate-800 dark:text-slate-200">Create New Feature</h2>
                <form method="post" class="space-y-4">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="create_feature">
                    <div>
                        <label for="name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Feature Name</label>
                        <input type="text" id="name" name="name" required placeholder="e.g., User Management"
                               class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">
                    </div>
                    <div>
                        <label for="url_name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">URL Name</label>
                        <input type="text" id="url_name" name="url_name" required placeholder="e.g., user_management"
                               class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">
                        <p class="text-xs text-slate-500 dark:text-slate-400 mt-1">Must match the URL name in your urls.py</p>
                    </div>
                    <div>
                        <label for="description" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Description</label>
                        <textarea id="description" name="description" rows="3" placeholder="Brief description of the feature's purpose..."
                                  class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition"></textarea>
                    </div>
                    <div>
                        <label for="category" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Category</label>
                        <input type="text" id="category" name="category" placeholder="e.g., Administration, Reports"
                               class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition">
                    </div>
                    <div class="flex items-center">
                        <input id="is_active" name="is_active" type="checkbox" checked
                               class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                        <label for="is_active" class="ml-2 block text-sm text-slate-700 dark:text-slate-300">
                            Active (feature is available for assignment)
                        </label>
                    </div>
                    <button type="submit"
                            class="w-full inline-flex justify-center items-center px-5 py-2.5 bg-indigo-600 text-white font-semibold rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-slate-800 transition">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
                        Create Feature
                    </button>
                </form>
            </div>
        </div>

        <!-- Right Column: Features List -->
        <div class="lg:col-span-2">
            <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
                <div class="p-4 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center">
                    <h3 class="text-lg font-medium text-slate-800 dark:text-slate-100">Available Features</h3>
                    <label class="flex items-center space-x-2">
                        <input type="checkbox" x-model="showInactive" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                        <span class="text-sm text-slate-600 dark:text-slate-400">Show inactive</span>
                    </label>
                </div>
                {% if features %}
                <ul class="divide-y divide-slate-200 dark:divide-slate-700">
                    {% for feature in features %}
                    <li x-show="showInactive || {{ feature.is_active|yesno:'true,false' }}" 
                        x-transition
                        class="p-4 flex justify-between items-start hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                        <div class="flex-grow">
                            <div class="flex items-start justify-between">
                                <div class="flex-grow">
                                    <div class="flex items-center space-x-3 mb-2">
                                        <h4 class="text-md font-semibold text-slate-800 dark:text-slate-100">{{ feature.name }}</h4>
                                        {% if feature.is_active %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800/30 dark:text-green-300">Active</span>
                                        {% else %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-300">Inactive</span>
                                        {% endif %}
                                        {% if feature.category %}
                                        <span class="px-2 inline-flex text-xs leading-5 font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-800/30 dark:text-blue-300">{{ feature.category }}</span>
                                        {% endif %}
                                    </div>
                                    {% if feature.description %}
                                    <p class="text-sm text-slate-500 dark:text-slate-400 mb-2">{{ feature.description }}</p>
                                    {% endif %}
                                    <p class="text-xs text-slate-400 dark:text-slate-500 font-mono">{{ feature.url_name }}</p>
                                    <div class="text-xs text-slate-400 dark:text-slate-500 mt-1">
                                        Created: {{ feature.created_dtm|date:"M d, Y" }}
                                        {% if feature.updated_dtm != feature.created_dtm %}
                                        • Updated: {{ feature.updated_dtm|date:"M d, Y" }}
                                        {% endif %}
                                    </div>
                                </div>
                                
                                <div x-data="{ dropdownOpen: false }" class="relative ml-4" @click.away="dropdownOpen = false">
                                    <button @click="dropdownOpen = !dropdownOpen" class="p-2 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-full focus:outline-none transition">
                                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
                                    </button>
                                    <div x-show="dropdownOpen" x-transition class="absolute right-0 mt-2 w-48 bg-white dark:bg-slate-800 rounded-md shadow-lg border border-slate-200 dark:border-slate-700 z-10" x-cloak>
                                        <a @click='editModalOpen = true; featureToEdit = { id: {{ feature.id }}, name: {{ feature.name|tojson }}, url_name: {{ feature.url_name|tojson }}, description: {{ (feature.description or "")|tojson }}, category: {{ (feature.category or "")|tojson }}, is_active: {{ feature.is_active|yesno:"true,false" }} }; dropdownOpen = false' href="#" class="block px-4 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700">
                                            <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg>
                                            Edit
                                        </a>
                                        <form method="post" class="w-full">
                                            {% csrf_token %}
                                            <input type="hidden" name="action" value="toggle_feature_status">
                                            <input type="hidden" name="feature_id" value="{{ feature.id }}">
                                            <button type="submit" class="w-full text-left block px-4 py-2 text-sm {% if feature.is_active %}text-yellow-600 dark:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20{% else %}text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20{% endif %}">
                                                {% if feature.is_active %}
                                                <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18.364 5.636M5.636 18.364l12.728-12.728"></path></svg>
                                                Disable
                                                {% else %}
                                                <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                                Enable
                                                {% endif %}
                                            </button>
                                        </form>
                                        <form method="post" class="w-full" onsubmit="return confirm('Are you sure you want to delete this feature? This will remove it from all groups.');">
                                            {% csrf_token %}
                                            <input type="hidden" name="action" value="delete_feature">
                                            <input type="hidden" name="feature_id" value="{{ feature.id }}">
                                            <button type="submit" class="w-full text-left block px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20">
                                                <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
                                                Delete
                                            </button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
                {% else %}
                <div class="p-8 text-center">
                    <svg class="mx-auto h-12 w-12 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                    <h3 class="mt-2 text-sm font-medium text-slate-900 dark:text-slate-100">No Features Found</h3>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Create your first feature to get started.</p>
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Edit Feature Modal -->
    <div x-show="editModalOpen" @keydown.escape.window="editModalOpen = false" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60" x-cloak>
        <div @click.away="editModalOpen = false" class="bg-white dark:bg-slate-800 rounded-lg shadow-xl p-6 w-full max-w-lg mx-4">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-medium text-slate-900 dark:text-slate-100">Edit Feature</h3>
                <button @click="editModalOpen = false" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="edit_feature">
                <input type="hidden" name="feature_id" :value="featureToEdit.id">
                <div class="space-y-4">
                    <div>
                        <label for="edit_name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Feature Name</label>
                        <input type="text" id="edit_name" name="name" :value="featureToEdit.name" required 
                               class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                    </div>
                    <div>
                        <label for="edit_url_name" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">URL Name</label>
                        <input type="text" id="edit_url_name" name="url_name" :value="featureToEdit.url_name" required 
                               class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                    </div>
                    <div>
                        <label for="edit_description" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Description</label>
                        <textarea id="edit_description" name="description" rows="3" x-text="featureToEdit.description" 
                                  class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea>
                    </div>
                    <div>
                        <label for="edit_category" class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1">Category</label>
                        <input type="text" id="edit_category" name="category" :value="featureToEdit.category" 
                               class="w-full pl-4 pr-4 py-2 bg-slate-50 dark:bg-slate-700/50 border border-slate-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                    </div>
                    <div class="flex items-center">
                        <input id="edit_is_active" name="is_active" type="checkbox" :checked="featureToEdit.is_active"
                               class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                        <label for="edit_is_active" class="ml-2 block text-sm text-slate-700 dark:text-slate-300">
                            Active (feature is available for assignment)
                        </label>
                    </div>
                </div>
                <div class="mt-6 flex justify-end space-x-3">
                    <button type="button" @click="editModalOpen = false" class="px-4 py-2 bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-200 font-semibold rounded-md hover:bg-slate-200 dark:hover:bg-slate-600 transition">Cancel</button>
                    <button type="submit" class="px-4 py-2 bg-indigo-600 text-white font-semibold rounded-md hover:bg-indigo-700 transition">Save Changes</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
{% endblock %}
```

```python:dashboard_rbac/ldc_dashboard_rbac/templates/ldc_dashboard_rbac/user_management.html
{% extends "dashboard/base.html" %}

{% block title %}User Management{% endblock %}

{% block content %}
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8" x-data="{ selectedUser: null, showInactive: false }">
    
    <!-- Page Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-slate-800 dark:text-slate-100">User Management</h1>
        <p class="mt-1 text-slate-500 dark:text-slate-400">Manage users, their roles, and group memberships.</p>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
            <div class="flex items-center">
                <div class="p-2 bg-blue-100 dark:bg-blue-800/30 rounded-lg">
                    <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Total Users</p>
                    <p class="text-2xl font-semibold text-slate-900 dark:text-slate-100">{{ users|length }}</p>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
            <div class="flex items-center">
                <div class="p-2 bg-green-100 dark:bg-green-800/30 rounded-lg">
                    <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Active Users</p>
                    <p class="text-2xl font-semibold text-slate-900 dark:text-slate-100">{{ users|selectattr("is_active")|list|length }}</p>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
            <div class="flex items-center">
                <div class="p-2 bg-purple-100 dark:bg-purple-800/30 rounded-lg">
                    <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z"></path></svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Admin Users</p>
                    <p class="text-2xl font-semibold text-slate-900 dark:text-slate-100">{{ users|selectattr("role", "in", ["admin", "superadmin"])|list|length }}</p>
                </div>
            </div>
        </div>
        <div class="bg-white dark:bg-slate-800 p-6 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
            <div class="flex items-center">
                <div class="p-2 bg-yellow-100 dark:bg-yellow-800/30 rounded-lg">
                    <svg class="w-6 h-6 text-yellow-600 dark:text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"></path></svg>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-slate-500 dark:text-slate-400">Pending Approval</p>
                    <p class="text-2xl font-semibold text-slate-900 dark:text-slate-100">{{ users|rejectattr("is_active")|list|length }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- User List -->
    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-200 dark:border-slate-700">
        <div class="p-4 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center">
            <h3 class="text-lg font-medium text-slate-800 dark:text-slate-100">Users</h3>
            <div class="flex items-center space-x-4">
                <label class="flex items-center space-x-2">
                    <input type="checkbox" x-model="showInactive" class="h-4 w-4 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">
                    <span class="text-sm text-slate-600 dark:text-slate-400">Show inactive</span>
                </label>
            </div>
        </div>
        {% if users %}
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200 dark:divide-slate-700">
                <thead class="bg-slate-50 dark:bg-slate-800/50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">User</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Role</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Status</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Groups</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Joined</th>
                        <th class="px-6 py-3 text-right text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">Actions</th>
                    </tr>
                </thead>
                <tbody class="bg-white dark:bg-slate-800 divide-y divide-slate-200 dark:divide-slate-700">
                    {% for user in users %}
                    <tr x-show="showInactive || {{ user.is_active|yesno:'true,false' }}" 
                        x-transition
                        class="hover:bg-slate-50 dark:hover:bg-slate-800/50">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10">
                                    <div class="h-10 w-10 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white font-semibold text-sm">
                                        {{ user.name|first|upper }}
                                    </div>
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-slate-900 dark:text-slate-100">{{ user.name }}</div>
                                    <div class="text-sm text-slate-500 dark:text-slate-400">{{ user.email }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                                {% if user.role == 'superadmin' %}bg-red-100 text-red-800 dark:bg-red-800/30 dark:text-red-300
                                {% elif user.role == 'admin' %}bg-purple-100 text-purple-800 dark:bg-purple-800/30 dark:text-purple-300
                                {% else %}bg-blue-100 text-blue-800 dark:bg-blue-800/30 dark:text-blue-300{% endif %}">
                                {{ user.role|title }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            {% if user.is_active %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-800/30 dark:text-green-300">
                                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                                Active
                            </span>
                            {% else %}
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-800/30 dark:text-yellow-300">
                                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
                                Pending
                            </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex flex-wrap gap-1">
                                {% for group in user.user_groups.all %}
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-slate-100 text-slate-800 dark:bg-slate-700 dark:text-slate-300">
                                    {{ group.group_name }}
                                </span>
                                {% empty %}
                                <span class="text-xs text-slate-500 dark:text-slate-400">No groups</span>
                                {% endfor %}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-500 dark:text-slate-400">
                            {{ user.created_dtm|date:"M d, Y" }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <div x-data="{ dropdownOpen: false }" class="relative inline-block text-left" @click.away="dropdownOpen = false">
                                <button @click="dropdownOpen = !dropdownOpen" class="p-2 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-full focus:outline-none transition">
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path></svg>
                                </button>
                                <div x-show="dropdownOpen" x-transition class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 z-10" x-cloak>
                                    <div class="py-1">
                                        <a @click="selectedUser = {{ user.id }}; dropdownOpen = false" href="#user-details" class="block px-4 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700">
                                            <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
                                            View Details
                                        </a>
                                        {% if user.role != 'superadmin' %}
                                        <form method="post" class="w-full">
                                            {% csrf_token %}
                                            <input type="hidden" name="action" value="toggle_user_status">
                                            <input type="hidden" name="user_id" value="{{ user.id }}">
                                            <button type="submit" class="w-full text-left block px-4 py-2 text-sm {% if user.is_active %}text-yellow-600 dark:text-yellow-400 hover:bg-yellow-50 dark:hover:bg-yellow-900/20{% else %}text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20{% endif %}">
                                                {% if user.is_active %}
                                                <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728L5.636 5.636m12.728 12.728L18.364 5.636M5.636 18.364l12.728-12.728"></path></svg>
                                                Deactivate
                                                {% else %}
                                                <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                                                Activate
                                                {% endif %}
                                            </button>
                                        </form>
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="p-8 text-center">
            <svg class="mx-auto h-12 w-12 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
            <h3 class="mt-2 text-sm font-medium text-slate-900 dark:text-slate-100">No Users Found</h3>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Users will appear here once they register.</p>
        </div>
        {% endif %}
    </div>

    <!-- User Details Modal -->
    {% for user in users %}
    <div x-show="selectedUser === {{ user.id }}" @keydown.escape.window="selectedUser = null" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60" x-cloak>
        <div @click.away="selectedUser = null" class="bg-white dark:bg-slate-800 rounded-lg shadow-xl p-6 w-full max-w-2xl mx-4 max-h-[90vh] overflow-y-auto">
            <div class="flex justify-between items-start mb-6">
                <div>
                    <h3 class="text-xl font-semibold text-slate-900 dark:text-slate-100">{{ user.name }}</h3>
                    <p class="text-slate-500 dark:text-slate-400">{{ user.email }}</p>
                </div>
                <button @click="selectedUser = null" class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
                </button>
            </div>
            
            <div class="space-y-6">
                <!-- User Info -->
                <div>
                    <h4 class="text-lg font-medium text-slate-900 dark:text-slate-100 mb-3">User Information</h4>
                    <dl class="grid grid-cols-1 gap-x-4 gap-y-3 sm:grid-cols-2">
                        <div>
                            <dt class="text-sm font-medium text-slate-500 dark:text-slate-400">Role</dt>
                            <dd class="mt-1 text-sm text-slate-900 dark:text-slate-100">{{ user.role|title }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-slate-500 dark:text-slate-400">Status</dt>
                            <dd class="mt-1">
                                {% if user.is_active %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-800/30 dark:text-green-300">Active</span>
                                {% else %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-800/30 dark:text-yellow-300">Pending</span>
                                {% endif %}
                            </dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-slate-500 dark:text-slate-400">Joined</dt>
                            <dd class="mt-1 text-sm text-slate-900 dark:text-slate-100">{{ user.created_dtm|date:"F d, Y" }}</dd>
                        </div>
                        <div>
                            <dt class="text-sm font-medium text-slate-500 dark:text-slate-400">Last Updated</dt>
                            <dd class="mt-1 text-sm text-slate-900 dark:text-slate-100">{{ user.updated_dtm|date:"F d, Y" }}</dd>
                        </div>
                    </dl>
                </div>

                <!-- Group Memberships -->
                <div>
                    <h4 class="text-lg font-medium text-slate-900 dark:text-slate-100 mb-3">Group Memberships</h4>
                    {% if user.user_groups.all %}
                    <div class="space-y-2">
                        {% for group in user.user_groups.all %}
                        <div class="flex items-center justify-between p-3 bg-slate-50 dark:bg-slate-700/50 rounded-lg">
                            <div>
                                <p class="text-sm font-medium text-slate-900 dark:text-slate-100">{{ group.group_name }}</p>
                                {% if group.description %}
                                <p class="text-xs text-slate-500 dark:text-slate-400">{{ group.description }}</p>
                                {% endif %}
                            </div>
                            <span class="text-xs px-2 py-1 rounded-full bg-slate-200 dark:bg-slate-600 text-slate-700 dark:text-slate-300">
                                {{ group.permission_level|title }}
                            </span>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-sm text-slate-500 dark:text-slate-400">This user is not assigned to any groups.</p>
                    {% endif %}
                </div>

                <!-- Available Features -->
                {% if user.user_groups.all %}
                <div>
                    <h4 class="text-lg font-medium text-slate-900 dark:text-slate-100 mb-3">Available Features</h4>
                    {% with user_features=user.user_groups.all|map(attribute='features')|map('list')|sum(start=[]) %}
                    {% if user_features %}
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
                        {% for feature in user_features|unique %}
                        <div class="flex items-center p-2 bg-slate-50 dark:bg-slate-700/50 rounded">
                            <svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                            <span class="text-sm text-slate-900 dark:text-slate-100">{{ feature.name }}</span>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <p class="text-sm text-slate-500 dark:text-slate-400">No features available through group memberships.</p>
                    {% endif %}
                    {% endwith %}
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block extra_js %}
<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
{% endblock %}
```

```python:dashboard_rbac/ldc_dashboard_rbac/templates/ldc_dashboard_rbac/base_rbac.html
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}RBAC Management{% endblock %} - {{ site_name|default:"Dashboard" }}</title>
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    }
                }
            }
        }
    </script>
    
    <!-- Inter Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    {% block extra_css %}{% endblock %}
</head>
<body class="h-full bg-slate-50 dark:bg-slate-900">
    <div class="min-h-full">
        <!-- Navigation -->
        <nav class="bg-white dark:bg-slate-800 shadow-sm border-b border-slate-200 dark:border-slate-700">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="flex justify-between h-16">
                    <div class="flex">
                        <div class="flex-shrink-0 flex items-center">
                            <h1 class="text-xl font-bold text-slate-900 dark:text-slate-100">
                                {% block nav_title %}RBAC Management{% endblock %}
                            </h1>
                        </div>
                        <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
                            <a href="{% url 'ldc_rbac:access_management' %}" 
                               class="{% if request.resolver_match.url_name == 'access_management' %}border-indigo-500 text-slate-900 dark:text-slate-100{% else %}border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 hover:border-slate-300 dark:hover:border-slate-600{% endif %} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                                Access Management
                            </a>
                            <a href="{% url 'ldc_rbac:feature_management' %}" 
                               class="{% if request.resolver_match.url_name == 'feature_management' %}border-indigo-500 text-slate-900 dark:text-slate-100{% else %}border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 hover:border-slate-300 dark:hover:border-slate-600{% endif %} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                                Feature Management
                            </a>
                            <a href="{% url 'ldc_rbac:user_management' %}" 
                               class="{% if request.resolver_match.url_name == 'user_management' %}border-indigo-500 text-slate-900 dark:text-slate-100{% else %}border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 hover:border-slate-300 dark:hover:border-slate-600{% endif %} inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
                                User Management
                            </a>
                        </div>
                    </div>
                    <div class="flex items-center space-x-4">
                        <!-- Dark mode toggle -->
                        <button id="theme-toggle" class="p-2 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300 rounded-md">
                            <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path></svg>
                            <svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd"></path></svg>
                        </button>
                        
                        <!-- User menu -->
                        {% if user.is_authenticated %}
                        <div class="flex items-center space-x-3">
                            <span class="text-sm text-slate-700 dark:text-slate-300">{{ user.name|default:user.username }}</span>
                            <div class="h-8 w-8 rounded-full bg-gradient-to-br from-indigo-400 to-purple-500 flex items-center justify-center text-white font-semibold text-sm">
                                {{ user.name|default:user.username|first|upper }}
                            </div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        </nav>

        <!-- Flash Messages -->
        {% if messages %}
        <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-4">
            {% for message in messages %}
            <div class="mb-4 p-4 rounded-md {% if message.tags == 'error' %}bg-red-50 border border-red-200 text-red-800 dark:bg-red-900/20 dark:border-red-800/30 dark:text-red-300{% elif message.tags == 'warning' %}bg-yellow-50 border border-yellow-200 text-yellow-800 dark:bg-yellow-900/20 dark:border-yellow-800/30 dark:text-yellow-300{% elif message.tags == 'success' %}bg-green-50 border border-green-200 text-green-800 dark:bg-green-900/20 dark:border-green-800/30 dark:text-green-300{% else %}bg-blue-50 border border-blue-200 text-blue-800 dark:bg-blue-900/20 dark:border-blue-800/30 dark:text-blue-300{% endif %}">
                <div class="flex">
                    <div class="flex-shrink-0">
                        {% if message.tags == 'error' %}
                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>
                        {% elif message.tags == 'warning' %}
                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
                        {% elif message.tags == 'success' %}
                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
                        {% else %}
                        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
                        {% endif %}
                    </div>
                    <div class="ml-3">
                        <p class="text-sm font-medium">{{ message }}</p>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <!-- Main content -->
        <main>
            {% block content %}{% endblock %}
        </main>
    </div>

    <!-- Dark mode script -->
    <script>
        // Dark mode toggle
        const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
        const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
        
        // Change the icons inside the button based on previous settings
        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            themeToggleLightIcon.classList.remove('hidden');
            document.documentElement.classList.add('dark');
        } else {
            themeToggleDarkIcon.classList.remove('hidden');
        }
        
        const themeToggleBtn = document.getElementById('theme-toggle');
        
        themeToggleBtn.addEventListener('click', function() {
            // Toggle icons inside button
            themeToggleDarkIcon.classList.toggle('hidden');
            themeToggleLightIcon.classList.toggle('hidden');
        
            // If set via local storage previously
            if (localStorage.getItem('color-theme')) {
                if (localStorage.getItem('color-theme') === 'light') {
                    document.documentElement.classList.add('dark');
                    localStorage.setItem('color-theme', 'dark');
                } else {
                    document.documentElement.classList.remove('dark');
                    localStorage.setItem('color-theme', 'light');
                }
            } else {
                if (document.documentElement.classList.contains('dark')) {
                    document.documentElement.classList.remove('dark');
                    localStorage.setItem('color-theme', 'light');
                } else {
                    document.documentElement.classList.add('dark');
                    localStorage.setItem('color-theme', 'dark');
                }
            }
        });
    </script>

    {% block extra_js %}{% endblock %}
</body>
</html>
```

```python:dashboard_rbac/ldc_dashboard_rbac/templates/ldc_dashboard_rbac/README.md
# RBAC Templates

This directory contains ready-to-use HTML templates for the LDC Dashboard RBAC package. These templates provide a complete UI for managing groups, features, users, and permissions.

## Templates Overview

### 1. `base_rbac.html`
- **Purpose**: Base template with navigation, dark mode toggle, and common styling
- **Features**: 
  - Responsive navigation
  - Dark/light mode support
  - Flash message display
  - Tailwind CSS integration
  - Alpine.js ready

### 2. `access_management.html`
- **Purpose**: Manage user groups and assign permissions
- **Features**:
  - Create new groups
  - Assign features to groups
  - Assign users to groups
  - Interactive group selection
  - Search functionality for users

### 3. `feature_management.html`
- **Purpose**: Manage system features
- **Features**:
  - Create new features
  - Edit existing features
  - Enable/disable features
  - Category organization
  - Modal-based editing

### 4. `user_management.html`
- **Purpose**: View and manage users
- **Features**:
  - User statistics dashboard
  - User status management
  - Group membership overview
  - User details modal
  - Filter active/inactive users

## Usage Instructions

### Option 1: Extend the Base Template (Recommended)

Create your own base template that extends the RBAC base:

```html
<!-- your_app/templates/dashboard/base.html -->
{% extends "ldc_dashboard_rbac/base_rbac.html" %}

{% block nav_title %}Your App Name{% endblock %}

{% block extra_css %}
<!-- Add your custom CSS -->
{% endblock %}

{% block extra_js %}
<!-- Add your custom JavaScript -->
{% endblock %}
```

### Option 2: Copy and Customize

1. Copy the templates to your app's template directory
2. Modify them to match your design system
3. Update the `{% extends %}` tags to use your base template

### Option 3: Include as Template Fragments

Use the templates as includes in your existing templates:

```html
<!-- In your existing template -->
{% include "ldc_dashboard_rbac/access_management.html" %}
```

## Required Context Variables

### For `access_management.html`:
```python
context = {
    'groups': Group.objects.all(),
    'features': Feature.objects.all(),
    'users': User.objects.all(),
}
```

### For `feature_management.html`:
```python
context = {
    'features': Feature.objects.all(),
}
```

### For `user_management.html`:
```python
context = {
    'users': User.objects.all(),
}
```

## Dependencies

### CSS Framework
- **Tailwind CSS**: Loaded via CDN in base template
- **Inter Font**: Google Fonts integration

### JavaScript Libraries
- **Alpine.js**: For interactive components
- **Tailwind CSS**: For styling

### Required Django Template Tags
- `{% csrf_token %}`: For form security
- `{% url %}`: For URL generation
- `{% if %}`, `{% for %}`: Standard Django template tags

## Customization Guide

### Colors and Theming
The templates use Tailwind's slate color palette with indigo accents. To customize:

1. **Primary Colors**: Replace `indigo-*` classes with your brand colors
2. **Background Colors**: Modify `slate-*` classes for different backgrounds
3. **Dark Mode**: Customize `dark:*` classes for dark theme

### Layout Modifications
- **Grid Layout**: Modify `grid-cols-*` classes for different layouts
- **Spacing**: Adjust `p-*`, `m-*`, `space-*` classes
- **Responsive**: Use `sm:*`, `md:*`, `lg:*` prefixes

### Adding Custom Fields
To add custom fields to forms:

1. Add input fields in the HTML
2. Update the corresponding Django views to handle the new fields
3. Update the model if necessary

## Form Actions

The templates expect these form actions to be handled in your views:

### Access Management
- `create_group`: Create a new group
- `delete_group`: Delete a group
- `toggle_group_status`: Activate/deactivate a group
- `update_group_permissions`: Update group feature permissions
- `update_group_users`: Update group user assignments

### Feature Management
- `create_feature`: Create a new feature
- `edit_feature`: Edit an existing feature
- `toggle_feature_status`: Enable/disable a feature
- `delete_feature`: Delete a feature

### User Management
- `toggle_user_status`: Activate/deactivate a user

## Example View Integration

```python
from django.shortcuts import render
from django.contrib import messages
from .models import Group, Feature, User

def access_management(request):
    if request.method == 'POST':
        action = request.POST.get('action')
        
        if action == 'create_group':
            # Handle group creation
            group_name = request.POST.get('group_name')
            description = request.POST.get('description')
            permission_level = request.POST.get('permission_level')
            
            Group.objects.create(
                group_name=group_name,
                description=description,
                permission_level=permission_level
            )
            messages.success(request, 'Group created successfully!')
        
        # Handle other actions...
    
    context = {
        'groups': Group.objects.all(),
        'features': Feature.objects.filter(is_active=True),
        'users': User.objects.all(),
    }
    return render(request, 'ldc_dashboard_rbac/access_management.html', context)
```

## Browser Support

These templates support modern browsers with:
- CSS Grid and Flexbox
- ES6+ JavaScript (for Alpine.js)
- CSS Custom Properties (for Tailwind)

## Accessibility Features

- Semantic HTML structure
- ARIA labels and roles
- Keyboard navigation support
- Screen reader friendly
- High contrast mode support

## Performance Considerations

- **CSS**: Tailwind CSS is loaded via CDN (consider using a build process for production)
- **JavaScript**: Alpine.js is lightweight (~15KB gzipped)
- **Images**: Uses SVG icons for scalability
- **Fonts**: Inter font is preloaded for better performance

## Troubleshooting

### Common Issues

1. **Styles not loading**: Ensure Tailwind CSS CDN is accessible
2. **Interactive features not working**: Check Alpine.js is loaded
3. **Forms not submitting**: Verify CSRF tokens are included
4. **Dark mode not working**: Check JavaScript console for errors

### Debug Mode

Add this to see Alpine.js data:

```html
<div x-data="{ debug: true }" x-show="debug">
  <pre x-text="JSON.stringify($data, null, 2)"></pre>
</div>
```
```

## Summary

I've created a comprehensive set of templates for the RBAC package that includes:

### ✅ **Complete Template Set**
1. **`base_rbac.html`** - Base template with navigation and theming
2. **`access_management.html`** - Group and permission management
3. **`feature_management.html`** - Feature creation and management  
4. **`user_management.html`** - User overview and management
5. **`README.md`** - Comprehensive usage documentation

### ✅
```

