<div class="flex-auto overflow-auto max-h-[calc(100vh-100px)]">
    <div class="role-management-wrapper">
        <!-- Main Content -->
        <div class="main-content">
            <div class="header">
                <div>
                    <h1>Team members</h1>
                    <p>Invite or manage your organization's members.</p>
                </div>
                <button class="add-member-btn" (click)="toggleAddRoleForm()">Add Member</button>
            </div>

            <!-- Add/Edit Role Form (shown when "Add Member" is clicked) -->
            <div class="role-form-container" *ngIf="showAddRoleForm">
                <h2>{{ isEditing ? 'Edit Role' : 'Add New Role' }}</h2>
                <form [formGroup]="roleForm" (ngSubmit)="onSubmit()">
                    <div class="form-group">
                        <label for="name">Role Name *</label>
                        <input type="text" id="name" formControlName="name" placeholder="Enter role name">
                        <div class="error-message"
                            *ngIf="roleForm.get('name')?.touched && roleForm.get('name')?.hasError('required')">
                            Role name is required
                        </div>
                        <div class="error-message"
                            *ngIf="roleForm.get('name')?.touched && roleForm.get('name')?.hasError('minlength')">
                            Role name must be at least 3 characters
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="description">Description</label>
                        <textarea id="description" formControlName="description" placeholder="Enter role description"
                            rows="3"></textarea>
                    </div>

                    <!-- ADD PERMISSIONS SELECTOR HERE -->
                    <div class="form-group">
                        <label>Permissions *</label>
                        <div class="error-message"
                            *ngIf="roleForm.get('permissions')?.touched && roleForm.get('permissions')?.hasError('required')">
                            Please select at least one permission
                        </div>
                        
                        <!-- Permissions by Module -->
                        <div class="permissions-selector">
                            <div class="permission-module" *ngFor="let module of modules">
                                <div class="module-header">
                                    <label class="module-checkbox">
                                        <input 
                                            type="checkbox" 
                                            [checked]="isModuleFullySelected(module)"
                                            (change)="toggleAllModulePermissions(module, $event.target.checked)">
                                        <span class="module-name">{{ module }}</span>
                                    </label>
                                </div>
                                <div class="permissions-list">
                                    <div class="permission-item" *ngFor="let permission of getPermissionsByModule(module)">
                                        <label class="permission-checkbox">
                                            <input 
                                                type="checkbox" 
                                                [checked]="roleForm.get('permissions')?.value?.includes(permission.id)"
                                                (change)="updatePermissions(permission.id, $event.target.checked)">
                                            <div class="permission-details">
                                                <span class="permission-name">{{ permission.name }}</span>
                                                <span class="permission-description">{{ permission.description }}</span>
                                            </div>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="button" class="cancel-btn" (click)="cancelEdit()">Cancel</button>
                        <button 
                            type="submit" 
                            class="submit-btn" 
                            [disabled]="roleForm.invalid || isLoading">
                            <span *ngIf="isLoading">Processing...</span>
                            <span *ngIf="!isLoading">{{ isEditing ? 'Update Role' : 'Create Role' }}</span>
                        </button>
                    </div>
                </form>
            </div>

            <!-- Success/Error Messages -->
            <div class="alert alert-success" *ngIf="successMessage">
                {{ successMessage }}
            </div>
            <div class="alert alert-error" *ngIf="errorMessage">
                {{ errorMessage }}
            </div>

            <!-- Permissions Table -->
            <div class="permissions-table-container">
                <div class="table-header">
                    <div class="table-title">All users {{ filteredRoles.length }}</div>
                    <div class="roles-header">
                        <div class="role-column">User role manager</div>
                        <div class="role-column" *ngFor="let role of filteredRoles">
                            {{ role.name }}
                            <button class="edit-role-btn" (click)="editRole(role)">Edit</button>
                            <button class="delete-role-btn" (click)="deleteRole(role.id)">Delete</button>
                        </div>
                    </div>
                </div>
                <div class="permissions-table">
                    <div class="permission-group" *ngFor="let module of modules">
                        <div class="group-header">{{ module }}</div>
                        <div class="permission-row" *ngFor="let permission of getPermissionsByModule(module)">
                            <div class="permission-name">
                                <strong>{{ permission.name }}</strong>
                                <small>{{ permission.description }}</small>
                            </div>
                            <div class="role-column" *ngFor="let role of filteredRoles">
                                <input 
                                    type="checkbox" 
                                    [checked]="role.permissions.includes(permission.id)"
                                    (change)="togglePermission(role, permission.id, $event.target.checked)">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
/* Add these styles to your component CSS */
.permissions-selector {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
}

.permission-module {
    margin-bottom: 24px;
}

.module-header {
    background: #f5f5f5;
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.module-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
}

.module-checkbox input {
    margin-right: 8px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.module-name {
    font-size: 16px;
    color: #333;
}

.permissions-list {
    padding-left: 32px;
}

.permission-item {
    margin-bottom: 12px;
}

.permission-checkbox {
    display: flex;
    align-items: start;
    cursor: pointer;
}

.permission-checkbox input {
    margin-right: 12px;
    margin-top: 4px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.permission-details {
    display: flex;
    flex-direction: column;
}

.permission-name {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.permission-description {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

.error-message {
    color: #d32f2f;
    font-size: 12px;
    margin-top: 4px;
}

.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.edit-role-btn,
.delete-role-btn {
    margin-left: 8px;
    padding: 4px 8px;
    font-size: 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.edit-role-btn {
    background-color: #2196f3;
    color: white;
}

.delete-role-btn {
    background-color: #f44336;
    color: white;
}
</style>