cloud-ide-core 2.0.118 → 2.0.119

package/fesm2022/cloud-ide-core.mjs

@@ -14873,18 +14873,51 @@ class CideCoreUserCreateComponent {
      * @returns Entity ID string or undefined
      */
     getEntityIdFromMapping(mappingIndex) {
+        // First try to get from form control
         const mappingFormGroup = this.entityMappingsFormArray.at(mappingIndex);
-        if (!mappingFormGroup) {
-            return undefined;
+        if (mappingFormGroup) {
+            const entityIdValue = mappingFormGroup.get('syenm_entity_id_syen')?.value;
+            if (entityIdValue) {
+                // Handle both string and object formats
+                const entityId = typeof entityIdValue === 'string'
+                    ? entityIdValue
+                    : (entityIdValue._id || entityIdValue.toString?.() || undefined);
+                if (entityId) {
+                    return entityId.toString();
+                }
+            }
         }
-        const entityIdValue = mappingFormGroup.get('syenm_entity_id_syen')?.value;
-        if (!entityIdValue) {
-            return undefined;
+        // Fallback: try to get from entity mappings signal (this is the most reliable source)
+        const entityMappings = this.entityMappings();
+        if (entityMappings && entityMappings[mappingIndex]) {
+            const mapping = entityMappings[mappingIndex];
+            const entityIdFromSignal = mapping.syenm_entity_id_syen;
+            if (entityIdFromSignal) {
+                // Handle both string and object formats
+                // From API response, it comes as object: { _id: "...", syen_name: "..." }
+                const entityId = typeof entityIdFromSignal === 'string'
+                    ? entityIdFromSignal
+                    : (entityIdFromSignal._id || entityIdFromSignal.toString?.() || undefined);
+                if (entityId) {
+                    return entityId.toString();
+                }
+            }
         }
-        // Handle both string and object formats
-        return typeof entityIdValue === 'string'
-            ? entityIdValue
-            : (entityIdValue._id || undefined);
+        return undefined;
+    }
+    /**
+     * Check if a user type mapping belongs to a specific entity
+     * @param typeMapping - User type mapping to check
+     * @param entityId - Entity ID to compare against
+     * @returns True if the mapping belongs to the entity
+     */
+    isUserTypeMappingForEntity(typeMapping, entityId) {
+        if (!entityId || !typeMapping.syutm_entity_id_syen) {
+            return false;
+        }
+        const mappingEntityId = typeMapping.syutm_entity_id_syen.toString().trim();
+        const searchEntityId = entityId.toString().trim();
+        return mappingEntityId === searchEntityId;
     }
     /**
      * Get user type mappings for a specific entity
@@ -14892,6 +14925,8 @@ class CideCoreUserCreateComponent {
      * @returns Array of user type mappings for the entity
      */
     getUserTypeMappingsForEntity(entityId) {
+        const allMappings = this.allUserTypeMappings();
+        // If no entity ID provided, return empty array
         if (!entityId) {
             return [];
         }
@@ -14902,7 +14937,39 @@ class CideCoreUserCreateComponent {
         if (!entityIdString) {
             return [];
         }
-        return this.allUserTypeMappings().filter((mapping) => mapping.syutm_entity_id_syen === entityIdString);
+        // Normalize the search entity ID to string
+        const searchEntityId = entityIdString.toString().trim();
+        const filteredMappings = allMappings.filter((mapping) => {
+            // Get entity ID from user type mapping and normalize to string
+            const mappingEntityId = mapping.syutm_entity_id_syen;
+            if (!mappingEntityId) {
+                return false;
+            }
+            // Normalize both to strings for comparison
+            const mappingEntityIdStr = mappingEntityId.toString().trim();
+            const matches = mappingEntityIdStr === searchEntityId;
+            return matches;
+        });
+        // Debug logging
+        if (allMappings.length > 0) {
+            console.log('🔍 Filtering user type mappings for entity:', {
+                searchEntityId: searchEntityId,
+                totalMappings: allMappings.length,
+                allMappings: allMappings.map(m => ({
+                    entityId: m.syutm_entity_id_syen,
+                    entityIdString: m.syutm_entity_id_syen?.toString(),
+                    userType: m.syutm_user_type,
+                    typeSpecificId: m.syutm_type_specific_id
+                })),
+                filteredCount: filteredMappings.length,
+                filteredMappings: filteredMappings.map(m => ({
+                    entityId: m.syutm_entity_id_syen,
+                    userType: m.syutm_user_type,
+                    typeSpecificId: m.syutm_type_specific_id
+                }))
+            });
+        }
+        return filteredMappings;
     }
     /**
      * Get user type label for display
@@ -16140,7 +16207,7 @@ class CideCoreUserCreateComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserCreateComponent, isStandalone: true, selector: "cide-core-user-create", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuRightsPermissionsRendererTemplate", first: true, predicate: ["menuRightsPermissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n    <!-- Toast Notifications -->\n    <cide-ele-toast-notification></cide-ele-toast-notification>\n    \n    <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n      (ngSubmit)=\"onSubmit()\">\n\n\n    <!-- User Context Header -->\n    <div\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n              </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-4\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- User Type Mapping -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-select\n                id=\"syutm_user_type\"\n                label=\"User Type\"\n                placeholder=\"Select user type\"\n                [options]=\"userTypeOptions\"\n                valueKey=\"value\"\n                labelKey=\"label\"\n                formControlName=\"syutm_user_type\"\n                size=\"md\">\n              </cide-ele-select>\n\n              <cide-ele-input\n                id=\"syutm_type_specific_id\"\n                label=\"Type-Specific ID\"\n                placeholder=\"Enter type-specific ID (e.g., STU001, TCH001)\"\n                formControlName=\"syutm_type_specific_id\"\n                [maxlength]=\"50\"\n                size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n          <div>\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n          </div>\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n              leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n              Add Entity Mapping\n            </button>\n\n            @if (isAllEntitiesMapped()) {\n            <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n              <p class=\"tw-text-xs tw-text-blue-700\">\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                All available entities are already mapped.\n              </p>\n            </div>\n            }\n          </div>\n        </div>\n\n        <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track $index; let i = $index) {\n            <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\n              [formGroupName]=\"i\">\n              <div\n                class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\n                  @if (mapping.syenm_isdefault) {\n                  <span\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\n                    Default\n                  </span>\n                  }\n                </div>\n                @if (!mapping?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n\n              <div>\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n                  <div>\n                    <cide-ele-select label=\"Entity\" [options]=\"getFilteredEntityOptions(i)\"\n                      formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\n                      placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\n                    </cide-ele-select>\n\n                    @if (isAllEntitiesSelected(i)) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                        All entities are already mapped. Remove another mapping to add this one.\n                      </p>\n                    </div>\n                    }\n                  </div>\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n                  </cide-ele-select>\n                </div>\n\n\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n                    placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Mapping Settings -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mb-4\">\n                  <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n                      allowed)</span>\n                  </div>\n\n                  <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n                      class=\"tw-h-5 tw-accent-blue-500\" />\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n                  </div>\n\n                  <div class=\"tw-p-2 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-xs tw-font-semibold tw-text-gray-800 tw-mb-1\">\n                      User Type Mappings for this Entity\n                    </div>\n                    <div class=\"tw-flex tw-flex-col tw-gap-2\">\n                      @if (getUserTypeMappingsForEntity(getEntityIdFromMapping(i)).length > 0) {\n                        @for (typeMapping of getUserTypeMappingsForEntity(getEntityIdFromMapping(i)); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n                          <div class=\"tw-flex tw-items-start tw-gap-2 tw-p-1.5 tw-bg-white tw-border tw-border-gray-300 tw-rounded-md\">\n                            <div class=\"tw-flex-1 tw-min-w-0\">\n                              <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-mb-1\">\n                                <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n                                  {{ typeMapping.syutm_user_type }}\n                                </span>\n                                @if (typeMapping.syutm_isactive) {\n                                  <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                                    Active\n                                  </span>\n                                }\n                              </div>\n                              @if (typeMapping.syutm_type_specific_id) {\n                                <div class=\"tw-text-[11px] tw-text-gray-600 tw-font-mono tw-break-all\">\n                                  ID: {{ typeMapping.syutm_type_specific_id }}\n                                </div>\n                              }\n                            </div>\n                          </div>\n                        }\n                      } @else {\n                        <span class=\"tw-text-xs tw-text-gray-500 tw-italic\">No user type mappings found for this entity</span>\n                      }\n                    </div>\n                    <div class=\"tw-text-[11px] tw-text-gray-500 tw-mt-2 tw-border-t tw-border-gray-300 tw-pt-1\">\n                      Display only. User type mappings are managed automatically based on user type selection.\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200\">\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n                  </cide-ele-data-grid>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n                      automatically load\n                      menu rights for this mapping.</p>\n                  </div>\n                  }\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n          </div>\n          }\n        </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <!-- Use address type as header instead of generic \"Address X\" -->\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\n                @if (isAddressOwner(i)) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n                  Share\n                </button>\n                }\n                @if (!address?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                \n                <!-- Left Side: Input Fields (3/4 width) -->\n                <div class=\"lg:tw-col-span-3\">\n                  <!-- Row 1: Address Type, Contact Person -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n                      placeholder=\"Enter contact person\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Postal Code, City, State, Country -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n                    class=\"tw-h-full\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n                  placeholder=\"Primary phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n                  placeholder=\"Alternate phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n                  size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n                  placeholder=\"Primary email\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email in single row -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n                  placeholder=\"Alternate email address\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n            Add Document\n          </button>\n        </div>\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (doc?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n                \n                <!-- Left Side: Document Information (2/3 width) -->\n                <div class=\"lg:tw-col-span-2\">\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                      placeholder=\"Document number\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n                      placeholder=\"Name on document\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 3: Verification Status, KYC Status -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: File Upload (1/3 width) -->\n                <div class=\"lg:tw-col-span-1\">\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n                    \n                    <!-- File Upload Input -->\n                    <cide-ele-file-input\n                      [id]=\"'document-files-' + i\"\n                      [multiple]=\"true\"\n                      formControlName=\"syusd_photo_group_id_cyfm\"\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n                      [autoUpload]=\"true\"\n                      [uploadData]=\"getDocumentUploadData(i)\"\n                      (change)=\"onDocumentFilesSelected($event, i)\"\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n                      class=\"tw-mb-3\"\n                      size=\"sm\">\n                    </cide-ele-file-input>\n\n                    <!-- Upload Status -->\n                    <!-- Upload status is now handled by the file input component itself -->\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section - Compact Design -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n            \n            <!-- Compact Header -->\n            <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (family?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n                @if (!family?._id) {\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            \n            <!-- Compact Form Content - 3 inputs per row -->\n            <div class=\"tw-p-4\">\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n                  placeholder=\"Enter family member full name\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n                  (change)=\"onUserSelectionChange($event, i)\">\n                </cide-ele-select>\n\n                <!-- Combined Relationship and Active Status (33.33%) -->\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n                  <div class=\"tw-flex-1\">\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Row 2: Blood Group, DOB, and Phone -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n                  labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n                  placeholder=\"Enter contact phone\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Row 3: Email, Email ID, and Contact Number -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n                  placeholder=\"Enter contact email\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n                  placeholder=\"Enter contact number\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <!-- Error Display Component -->\n      <div class=\"tw-flex-1\">\n        <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-4\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n      </div>\n    </div>\n  </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n\n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n        <span\n          class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n          Assigned\n        </span>\n        }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n        {{ row.permission?.sygms_name }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n      Module\n    </span>\n    } @else if (row.syme_type === 'section') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      Section\n    </span>\n    } @else if (row.syme_type === 'menu') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n      Menu\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n      {{ row.syme_type || 'Unknown' }}\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n        </label>\n      </div>\n    </div>\n    }\n    } @else {\n    <!-- Show green checkmark for parent menus with child permissions -->\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n    @if (hasChildMenusWithPermissions(row._id)) {\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n        check\n      </cide-ele-icon>\n    </div>\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n    <div class=\"tw-mb-2\">\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n        @for (right of row.role_rights; track $index) {\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n          {{ right }}\n        </span>\n        }\n      </div>\n    </div>\n    }\n\n\n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n        Override\n      </span>\n    </div>\n    } @else {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n    </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n      </cide-ele-input>\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n        class=\"tw-text-xs tw-cursor-pointer\"\n        [ngClass]=\"{\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n        }\">\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n        </span>\n        }\n      </label>\n    </div>\n    }\n    } @else {\n    <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n  </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleToastNotificationComponent, selector: "cide-ele-toast-notification" }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideCoreUserCreateComponent, isStandalone: true, selector: "cide-core-user-create", viewQueries: [{ propertyName: "menuDetailsRendererTemplate", first: true, predicate: ["menuDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsCheckboxRendererTemplate", first: true, predicate: ["permissionsCheckboxRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuTypeRendererTemplate", first: true, predicate: ["menuTypeRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "menuRightsPermissionsRendererTemplate", first: true, predicate: ["menuRightsPermissionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "permissionsRendererTemplate", first: true, predicate: ["permissionsRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n    <!-- Toast Notifications -->\n    <cide-ele-toast-notification></cide-ele-toast-notification>\n    \n    <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n      (ngSubmit)=\"onSubmit()\">\n\n\n    <!-- User Context Header -->\n    <div\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n              </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-4\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- User Type Mapping -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-select\n                id=\"syutm_user_type\"\n                label=\"User Type\"\n                placeholder=\"Select user type\"\n                [options]=\"userTypeOptions\"\n                valueKey=\"value\"\n                labelKey=\"label\"\n                formControlName=\"syutm_user_type\"\n                size=\"md\">\n              </cide-ele-select>\n\n              <cide-ele-input\n                id=\"syutm_type_specific_id\"\n                label=\"Type-Specific ID\"\n                placeholder=\"Enter type-specific ID (e.g., STU001, TCH001)\"\n                formControlName=\"syutm_type_specific_id\"\n                [maxlength]=\"50\"\n                size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n          <div>\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n          </div>\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n              leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n              Add Entity Mapping\n            </button>\n\n            @if (isAllEntitiesMapped()) {\n            <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n              <p class=\"tw-text-xs tw-text-blue-700\">\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                All available entities are already mapped.\n              </p>\n            </div>\n            }\n          </div>\n        </div>\n\n        <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track $index; let i = $index) {\n            <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\n              [formGroupName]=\"i\">\n              <div\n                class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\n                  @if (mapping.syenm_isdefault) {\n                  <span\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\n                    Default\n                  </span>\n                  }\n                </div>\n                @if (!mapping?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n\n              <div>\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n                  <div>\n                    <cide-ele-select label=\"Entity\" [options]=\"getFilteredEntityOptions(i)\"\n                      formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\n                      placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\n                    </cide-ele-select>\n\n                    @if (isAllEntitiesSelected(i)) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                        All entities are already mapped. Remove another mapping to add this one.\n                      </p>\n                    </div>\n                    }\n                  </div>\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n                  </cide-ele-select>\n                </div>\n\n\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n                    placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Mapping Settings -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mb-4\">\n                  <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n                      allowed)</span>\n                  </div>\n\n                  <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n                      class=\"tw-h-5 tw-accent-blue-500\" />\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n                  </div>\n\n                  <div class=\"tw-p-2 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-xs tw-font-semibold tw-text-gray-800 tw-mb-1\">\n                      User Type Mappings\n                    </div>\n                    <div class=\"tw-flex tw-flex-col tw-gap-2\">\n                      @if (allUserTypeMappings().length > 0) {\n                        @for (typeMapping of allUserTypeMappings(); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n                          @if (isUserTypeMappingForEntity(typeMapping, getEntityIdFromMapping(i))) {\n                            <div class=\"tw-flex tw-items-start tw-gap-2 tw-p-1.5 tw-bg-white tw-border tw-border-green-300 tw-rounded-md\">\n                              <div class=\"tw-flex-1 tw-min-w-0\">\n                                <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-mb-1\">\n                                  <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n                                    {{ typeMapping.syutm_user_type }}\n                                  </span>\n                                  @if (typeMapping.syutm_isactive) {\n                                    <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                                      Active\n                                    </span>\n                                  }\n                                  <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-green-50 tw-text-green-700 tw-border tw-border-green-200\">\n                                    This Entity\n                                  </span>\n                                </div>\n                                @if (typeMapping.syutm_type_specific_id) {\n                                  <div class=\"tw-text-[11px] tw-text-gray-600 tw-font-mono tw-break-all\">\n                                    ID: {{ typeMapping.syutm_type_specific_id }}\n                                  </div>\n                                }\n                              </div>\n                            </div>\n                          } @else {\n                            <div class=\"tw-flex tw-items-start tw-gap-2 tw-p-1.5 tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-opacity-75\">\n                              <div class=\"tw-flex-1 tw-min-w-0\">\n                                <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-mb-1\">\n                                  <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n                                    {{ typeMapping.syutm_user_type }}\n                                  </span>\n                                  @if (typeMapping.syutm_isactive) {\n                                    <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                                      Active\n                                    </span>\n                                  }\n                                  <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-gray-100 tw-text-gray-600\">\n                                    Other Entity\n                                  </span>\n                                </div>\n                                @if (typeMapping.syutm_type_specific_id) {\n                                  <div class=\"tw-text-[11px] tw-text-gray-600 tw-font-mono tw-break-all\">\n                                    ID: {{ typeMapping.syutm_type_specific_id }}\n                                  </div>\n                                }\n                              </div>\n                            </div>\n                          }\n                        }\n                      } @else {\n                        <span class=\"tw-text-xs tw-text-gray-500 tw-italic\">No user type mappings found</span>\n                      }\n                    </div>\n                    <div class=\"tw-text-[11px] tw-text-gray-500 tw-mt-2 tw-border-t tw-border-gray-300 tw-pt-1\">\n                      Display only. User type mappings are managed automatically based on user type selection.\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200\">\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n                  </cide-ele-data-grid>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n                      automatically load\n                      menu rights for this mapping.</p>\n                  </div>\n                  }\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n          </div>\n          }\n        </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <!-- Use address type as header instead of generic \"Address X\" -->\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\n                @if (isAddressOwner(i)) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n                  Share\n                </button>\n                }\n                @if (!address?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                \n                <!-- Left Side: Input Fields (3/4 width) -->\n                <div class=\"lg:tw-col-span-3\">\n                  <!-- Row 1: Address Type, Contact Person -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n                      placeholder=\"Enter contact person\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Postal Code, City, State, Country -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n                    class=\"tw-h-full\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n                  placeholder=\"Primary phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n                  placeholder=\"Alternate phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n                  size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n                  placeholder=\"Primary email\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email in single row -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n                  placeholder=\"Alternate email address\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n            Add Document\n          </button>\n        </div>\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (doc?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n                \n                <!-- Left Side: Document Information (2/3 width) -->\n                <div class=\"lg:tw-col-span-2\">\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                      placeholder=\"Document number\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n                      placeholder=\"Name on document\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 3: Verification Status, KYC Status -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: File Upload (1/3 width) -->\n                <div class=\"lg:tw-col-span-1\">\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n                    \n                    <!-- File Upload Input -->\n                    <cide-ele-file-input\n                      [id]=\"'document-files-' + i\"\n                      [multiple]=\"true\"\n                      formControlName=\"syusd_photo_group_id_cyfm\"\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n                      [autoUpload]=\"true\"\n                      [uploadData]=\"getDocumentUploadData(i)\"\n                      (change)=\"onDocumentFilesSelected($event, i)\"\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n                      class=\"tw-mb-3\"\n                      size=\"sm\">\n                    </cide-ele-file-input>\n\n                    <!-- Upload Status -->\n                    <!-- Upload status is now handled by the file input component itself -->\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section - Compact Design -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n            \n            <!-- Compact Header -->\n            <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (family?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n                @if (!family?._id) {\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            \n            <!-- Compact Form Content - 3 inputs per row -->\n            <div class=\"tw-p-4\">\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n                  placeholder=\"Enter family member full name\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n                  (change)=\"onUserSelectionChange($event, i)\">\n                </cide-ele-select>\n\n                <!-- Combined Relationship and Active Status (33.33%) -->\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n                  <div class=\"tw-flex-1\">\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Row 2: Blood Group, DOB, and Phone -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n                  labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n                  placeholder=\"Enter contact phone\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Row 3: Email, Email ID, and Contact Number -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n                  placeholder=\"Enter contact email\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n                  placeholder=\"Enter contact number\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <!-- Error Display Component -->\n      <div class=\"tw-flex-1\">\n        <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-4\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n      </div>\n    </div>\n  </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n\n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n        <span\n          class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n          Assigned\n        </span>\n        }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n        {{ row.permission?.sygms_name }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n      Module\n    </span>\n    } @else if (row.syme_type === 'section') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      Section\n    </span>\n    } @else if (row.syme_type === 'menu') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n      Menu\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n      {{ row.syme_type || 'Unknown' }}\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n        </label>\n      </div>\n    </div>\n    }\n    } @else {\n    <!-- Show green checkmark for parent menus with child permissions -->\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n    @if (hasChildMenusWithPermissions(row._id)) {\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n        check\n      </cide-ele-icon>\n    </div>\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n    <div class=\"tw-mb-2\">\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n        @for (right of row.role_rights; track $index) {\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n          {{ right }}\n        </span>\n        }\n      </div>\n    </div>\n    }\n\n\n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n        Override\n      </span>\n    </div>\n    } @else {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n    </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n      </cide-ele-input>\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n        class=\"tw-text-xs tw-cursor-pointer\"\n        [ngClass]=\"{\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n        }\">\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n        </span>\n        }\n      </label>\n    </div>\n    }\n    } @else {\n    <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n  </div>\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideEleFileInputComponent, selector: "cide-ele-file-input", inputs: ["label", "accept", "multiple", "disabled", "required", "helperText", "errorText", "showPreview", "previewWidth", "previewHeight", "previewBoxMode", "showFileName", "placeholderText", "placeholderIcon", "autoUpload", "uploadData", "showFloatingUploader", "floatingUploaderGroupId"], outputs: ["fileChange", "uploadSuccess", "uploadError", "uploadProgressChange"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleToastNotificationComponent, selector: "cide-ele-toast-notification" }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideCoreUserCreateComponent, decorators: [{
             type: Component,
@@ -16160,7 +16227,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleToastNotificationComponent,
                         CideFormFieldErrorComponent,
                         CideLytSharedWrapperComponent
-                    ], template: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n    <!-- Toast Notifications -->\n    <cide-ele-toast-notification></cide-ele-toast-notification>\n    \n    <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n      (ngSubmit)=\"onSubmit()\">\n\n\n    <!-- User Context Header -->\n    <div\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n              </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-4\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- User Type Mapping -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-select\n                id=\"syutm_user_type\"\n                label=\"User Type\"\n                placeholder=\"Select user type\"\n                [options]=\"userTypeOptions\"\n                valueKey=\"value\"\n                labelKey=\"label\"\n                formControlName=\"syutm_user_type\"\n                size=\"md\">\n              </cide-ele-select>\n\n              <cide-ele-input\n                id=\"syutm_type_specific_id\"\n                label=\"Type-Specific ID\"\n                placeholder=\"Enter type-specific ID (e.g., STU001, TCH001)\"\n                formControlName=\"syutm_type_specific_id\"\n                [maxlength]=\"50\"\n                size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n          <div>\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n          </div>\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n              leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n              Add Entity Mapping\n            </button>\n\n            @if (isAllEntitiesMapped()) {\n            <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n              <p class=\"tw-text-xs tw-text-blue-700\">\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                All available entities are already mapped.\n              </p>\n            </div>\n            }\n          </div>\n        </div>\n\n        <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track $index; let i = $index) {\n            <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\n              [formGroupName]=\"i\">\n              <div\n                class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\n                  @if (mapping.syenm_isdefault) {\n                  <span\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\n                    Default\n                  </span>\n                  }\n                </div>\n                @if (!mapping?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n\n              <div>\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n                  <div>\n                    <cide-ele-select label=\"Entity\" [options]=\"getFilteredEntityOptions(i)\"\n                      formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\n                      placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\n                    </cide-ele-select>\n\n                    @if (isAllEntitiesSelected(i)) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                        All entities are already mapped. Remove another mapping to add this one.\n                      </p>\n                    </div>\n                    }\n                  </div>\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n                  </cide-ele-select>\n                </div>\n\n\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n                    placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Mapping Settings -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mb-4\">\n                  <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n                      allowed)</span>\n                  </div>\n\n                  <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n                      class=\"tw-h-5 tw-accent-blue-500\" />\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n                  </div>\n\n                  <div class=\"tw-p-2 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-xs tw-font-semibold tw-text-gray-800 tw-mb-1\">\n                      User Type Mappings for this Entity\n                    </div>\n                    <div class=\"tw-flex tw-flex-col tw-gap-2\">\n                      @if (getUserTypeMappingsForEntity(getEntityIdFromMapping(i)).length > 0) {\n                        @for (typeMapping of getUserTypeMappingsForEntity(getEntityIdFromMapping(i)); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n                          <div class=\"tw-flex tw-items-start tw-gap-2 tw-p-1.5 tw-bg-white tw-border tw-border-gray-300 tw-rounded-md\">\n                            <div class=\"tw-flex-1 tw-min-w-0\">\n                              <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-mb-1\">\n                                <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n                                  {{ typeMapping.syutm_user_type }}\n                                </span>\n                                @if (typeMapping.syutm_isactive) {\n                                  <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                                    Active\n                                  </span>\n                                }\n                              </div>\n                              @if (typeMapping.syutm_type_specific_id) {\n                                <div class=\"tw-text-[11px] tw-text-gray-600 tw-font-mono tw-break-all\">\n                                  ID: {{ typeMapping.syutm_type_specific_id }}\n                                </div>\n                              }\n                            </div>\n                          </div>\n                        }\n                      } @else {\n                        <span class=\"tw-text-xs tw-text-gray-500 tw-italic\">No user type mappings found for this entity</span>\n                      }\n                    </div>\n                    <div class=\"tw-text-[11px] tw-text-gray-500 tw-mt-2 tw-border-t tw-border-gray-300 tw-pt-1\">\n                      Display only. User type mappings are managed automatically based on user type selection.\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200\">\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n                  </cide-ele-data-grid>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n                      automatically load\n                      menu rights for this mapping.</p>\n                  </div>\n                  }\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n          </div>\n          }\n        </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <!-- Use address type as header instead of generic \"Address X\" -->\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\n                @if (isAddressOwner(i)) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n                  Share\n                </button>\n                }\n                @if (!address?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                \n                <!-- Left Side: Input Fields (3/4 width) -->\n                <div class=\"lg:tw-col-span-3\">\n                  <!-- Row 1: Address Type, Contact Person -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n                      placeholder=\"Enter contact person\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Postal Code, City, State, Country -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n                    class=\"tw-h-full\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n                  placeholder=\"Primary phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n                  placeholder=\"Alternate phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n                  size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n                  placeholder=\"Primary email\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email in single row -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n                  placeholder=\"Alternate email address\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n            Add Document\n          </button>\n        </div>\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (doc?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n                \n                <!-- Left Side: Document Information (2/3 width) -->\n                <div class=\"lg:tw-col-span-2\">\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                      placeholder=\"Document number\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n                      placeholder=\"Name on document\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 3: Verification Status, KYC Status -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: File Upload (1/3 width) -->\n                <div class=\"lg:tw-col-span-1\">\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n                    \n                    <!-- File Upload Input -->\n                    <cide-ele-file-input\n                      [id]=\"'document-files-' + i\"\n                      [multiple]=\"true\"\n                      formControlName=\"syusd_photo_group_id_cyfm\"\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n                      [autoUpload]=\"true\"\n                      [uploadData]=\"getDocumentUploadData(i)\"\n                      (change)=\"onDocumentFilesSelected($event, i)\"\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n                      class=\"tw-mb-3\"\n                      size=\"sm\">\n                    </cide-ele-file-input>\n\n                    <!-- Upload Status -->\n                    <!-- Upload status is now handled by the file input component itself -->\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section - Compact Design -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n            \n            <!-- Compact Header -->\n            <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (family?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n                @if (!family?._id) {\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            \n            <!-- Compact Form Content - 3 inputs per row -->\n            <div class=\"tw-p-4\">\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n                  placeholder=\"Enter family member full name\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n                  (change)=\"onUserSelectionChange($event, i)\">\n                </cide-ele-select>\n\n                <!-- Combined Relationship and Active Status (33.33%) -->\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n                  <div class=\"tw-flex-1\">\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Row 2: Blood Group, DOB, and Phone -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n                  labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n                  placeholder=\"Enter contact phone\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Row 3: Email, Email ID, and Contact Number -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n                  placeholder=\"Enter contact email\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n                  placeholder=\"Enter contact number\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <!-- Error Display Component -->\n      <div class=\"tw-flex-1\">\n        <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-4\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n      </div>\n    </div>\n  </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n\n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n        <span\n          class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n          Assigned\n        </span>\n        }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n        {{ row.permission?.sygms_name }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n      Module\n    </span>\n    } @else if (row.syme_type === 'section') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      Section\n    </span>\n    } @else if (row.syme_type === 'menu') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n      Menu\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n      {{ row.syme_type || 'Unknown' }}\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n        </label>\n      </div>\n    </div>\n    }\n    } @else {\n    <!-- Show green checkmark for parent menus with child permissions -->\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n    @if (hasChildMenusWithPermissions(row._id)) {\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n        check\n      </cide-ele-icon>\n    </div>\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n    <div class=\"tw-mb-2\">\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n        @for (right of row.role_rights; track $index) {\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n          {{ right }}\n        </span>\n        }\n      </div>\n    </div>\n    }\n\n\n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n        Override\n      </span>\n    </div>\n    } @else {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n    </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n      </cide-ele-input>\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n        class=\"tw-text-xs tw-cursor-pointer\"\n        [ngClass]=\"{\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n        }\">\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n        </span>\n        }\n      </label>\n    </div>\n    }\n    } @else {\n    <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n  </div>\n</ng-template>" }]
+                    ], template: "<!-- \n  ENTERPRISE USER MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\n-->\n\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: pageCode() }\" [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full tw-p-1 tw-pt-2\">\n    <!-- Toast Notifications -->\n    <cide-ele-toast-notification></cide-ele-toast-notification>\n    \n    <form class=\"tw-max-w-7xl tw-mx-auto tw-bg-transparent\" [formGroup]=\"userMasterForm\" [class.tw-opacity-60]=\"loading()\"\n      (ngSubmit)=\"onSubmit()\">\n\n\n    <!-- User Context Header -->\n    <div\n      class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-md tw-p-1 tw-mb-2 tw-shadow-sm\">\n      <div class=\"tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-gap-2\">\n        <!-- User Basic Info Display -->\n        <div class=\"tw-flex tw-items-center tw-gap-3 tw-flex-wrap\">\n          <!-- Profile Photo Preview -->\n          <div class=\"tw-flex tw-items-center tw-gap-2\">\n            <div\n              class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-border tw-border-blue-200 tw-flex tw-items-center tw-justify-center tw-overflow-hidden\">\n              @if (userMasterForm.get('user_photo_id_cyfm')?.value) {\n              <img cideEleFileImage [fileId]=\"userMasterForm.get('user_photo_id_cyfm')?.value\"\n                [altText]=\"'Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover\">\n              } @else {\n              <cide-ele-icon name=\"person\" class=\"tw-w-5 tw-h-5 tw-text-blue-600\">\n              </cide-ele-icon>\n              }\n            </div>\n            <div class=\"tw-flex tw-flex-col\">\n              <span class=\"tw-text-xs tw-font-medium tw-text-blue-900\">\n                {{ getUserFullName() || 'New User' }}\n              </span>\n              <span class=\"tw-text-xs tw-text-blue-600\">\n                {{ getUserUsername() || 'Username not set' }}\n              </span>\n            </div>\n          </div>\n\n          <!-- Contact Info -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">email</cide-ele-icon>\n              <span>{{ getUserEmail() || 'Email not set' }}</span>\n            </div>\n            <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-700\">\n              <cide-ele-icon variant=\"gray\" size=\"xs\">phone</cide-ele-icon>\n              <span>{{ getUserMobile() || 'Mobile not set' }}</span>\n            </div>\n          </div>\n\n          <!-- Active Status -->\n          <div class=\"tw-flex tw-items-center tw-gap-1\">\n            @if (getUserActiveStatus()) {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-700\">\n              <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">check_circle</cide-ele-icon>\n              Active\n            </span>\n            } @else {\n            <span\n              class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded tw-text-xs tw-font-medium tw-bg-red-100 tw-text-red-700\">\n              <cide-ele-icon variant=\"red\" size=\"xs\" class=\"tw-mr-1\">cancel</cide-ele-icon>\n              Inactive\n            </span>\n            }\n          </div>\n        </div>\n\n        <!-- Entity Info -->\n        <div class=\"tw-flex tw-items-center tw-gap-2\">\n          @if (hasDefaultEntity()) {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-blue-700\">\n            <cide-ele-icon variant=\"blue\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-font-medium\">{{ getDefaultEntityName() }}</span>\n          </div>\n          } @else {\n          <div class=\"tw-flex tw-items-center tw-gap-1 tw-text-xs tw-text-gray-500\">\n            <cide-ele-icon variant=\"gray\" size=\"xs\">business</cide-ele-icon>\n            <span class=\"tw-italic\">No entity</span>\n          </div>\n          }\n\n          <span class=\"tw-text-xs tw-text-gray-600 tw-px-2 tw-py-1 tw-bg-gray-100 tw-rounded\">\n            {{ getEntityMappingCount() }} mapping(s)\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-p-0 tw-mb-2 tw-border-b tw-border-gray-200\">\n      <cide-ele-tab [tabs]=\"userTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" variant=\"default\"\n        (tabChange)=\"onTabChange($event)\">\n      </cide-ele-tab>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n      @switch (activeTab()) {\n\n      @case ('basic') {\n      <!-- User Basic Information Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n        <!-- Top Section: Form Fields on Left, Profile Photo on Right -->\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-[1fr_200px] tw-gap-4 tw-mb-4\">\n          <!-- Left Side: Form Fields -->\n          <div class=\"tw-space-y-4\">\n            <!-- Name Fields - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n              <cide-ele-input id=\"user_firstname\" label=\"First Name\" formControlName=\"user_firstname\"\n                placeholder=\"Enter first name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_middlename\" label=\"Middle Name\" formControlName=\"user_middlename\"\n                placeholder=\"Enter middle name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_lastname\" label=\"Last Name\" formControlName=\"user_lastname\"\n                placeholder=\"Enter last name\" [maxlength]=\"20\" size=\"md\" (ngModelChange)=\"onNameFieldChange()\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_fullname\" label=\"Full Name (Auto-generated)\" formControlName=\"user_fullname\"\n                placeholder=\"Auto-generated from name fields or enter manually\" [maxlength]=\"62\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Contact Information - All in One Row -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\">\n              <cide-ele-input id=\"user_username\" label=\"Username\" formControlName=\"user_username\"\n                placeholder=\"Enter unique username\" [maxlength]=\"20\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_emailid\" label=\"Email ID\" formControlName=\"user_emailid\" type=\"email\"\n                placeholder=\"Enter valid email address\" [maxlength]=\"320\" size=\"md\">\n              </cide-ele-input>\n\n              <cide-ele-input id=\"user_mobileno\" label=\"Mobile Number\" formControlName=\"user_mobileno\" type=\"tel\"\n                placeholder=\"Enter mobile number\" [maxlength]=\"15\" size=\"md\">\n              </cide-ele-input>\n            </div>\n\n            <!-- User Type Mapping -->\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-select\n                id=\"syutm_user_type\"\n                label=\"User Type\"\n                placeholder=\"Select user type\"\n                [options]=\"userTypeOptions\"\n                valueKey=\"value\"\n                labelKey=\"label\"\n                formControlName=\"syutm_user_type\"\n                size=\"md\">\n              </cide-ele-select>\n\n              <cide-ele-input\n                id=\"syutm_type_specific_id\"\n                label=\"Type-Specific ID\"\n                placeholder=\"Enter type-specific ID (e.g., STU001, TCH001)\"\n                formControlName=\"syutm_type_specific_id\"\n                [maxlength]=\"50\"\n                size=\"md\">\n              </cide-ele-input>\n            </div>\n          </div>\n\n          <!-- Right Side: Profile Photo Upload -->\n          <div class=\"tw-flex tw-items-start tw-justify-center tw-p-0\">\n            <cide-ele-file-input id=\"user_photo_id_cyfm\" formControlName=\"user_photo_id_cyfm\" accept=\"image/*\"\n              [showPreview]=\"true\" [previewBoxMode]=\"true\" [showFileName]=\"false\" previewWidth=\"180px\"\n              previewHeight=\"120px\" placeholderText=\"Upload Photo\" placeholderIcon=\"cloud_upload\" [autoUpload]=\"true\"\n              [uploadData]=\"getProfilePhotoUploadData()\" (uploadSuccess)=\"onProfilePhotoUploadSuccess($event)\"\n              (uploadError)=\"onProfilePhotoUploadError($event)\"\n              (uploadProgressChange)=\"onProfilePhotoUploadProgress($event)\">\n            </cide-ele-file-input>\n          </div>\n        </div>\n\n\n\n        <!-- Status Control -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-mb-2\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200 hover:tw-bg-blue-75\">\n              <cide-ele-input type=\"checkbox\" label=\"Active User Status\" formControlName=\"user_isactive\"\n                class=\"tw-h-5 tw-accent-blue-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-font-semibold tw-text-gray-700 tw-text-base\"></span>\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">Enable this user account for system\n                access and operations</span>\n            </label>\n          </div>\n        </div>\n      </div>\n      }\n\n      @case ('auth') {\n      <!-- Authentication Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <!-- Password Fields -->\n        @if (shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <!-- Password Fields Header for Edit Mode -->\n          @if (isEditMode()) {\n          <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-800\">Update Password</h6>\n            <button type=\"button\"\n              class=\"tw-px-3 tw-py-1 tw-bg-gray-100 tw-text-gray-600 tw-border tw-border-gray-300 tw-rounded-md tw-text-xs tw-font-medium hover:tw-bg-gray-200 tw-transition-colors\"\n              (click)=\"cancelPasswordUpdate()\">\n              Cancel Password Update\n            </button>\n          </div>\n          }\n\n          <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 md:tw-grid-cols-1 tw-gap-6\">\n            <cide-ele-input id=\"user_password\" [label]=\"getPasswordFieldLabel()\" formControlName=\"user_password\"\n              type=\"password\" placeholder=\"Enter secure password (min 8 characters)\" size=\"md\">\n            </cide-ele-input>\n\n            <cide-ele-input id=\"user_confirm_password\" [label]=\"getPasswordConfirmLabel()\"\n              formControlName=\"user_confirm_password\" type=\"password\" placeholder=\"Confirm your password\" size=\"md\">\n            </cide-ele-input>\n          </div>\n        </div>\n        }\n\n        <!-- Password Update Option for Edit Mode -->\n        @if (isEditMode() && !shouldShowPasswordFields()) {\n        <div class=\"tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n            <h6 class=\"tw-text-sm tw-font-semibold tw-text-blue-800 tw-mb-2\">Password Update</h6>\n            <p class=\"tw-text-sm tw-text-blue-600 tw-mb-3\">Current password will be kept. Click below to change\n              password.</p>\n\n            @if (hasPasswordInput()) {\n            <div\n              class=\"tw-mb-3 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded tw-text-sm tw-text-yellow-700\">\n              <cide-ele-icon variant=\"yellow\" size=\"xs\" class=\"tw-mr-1\">warning</cide-ele-icon>\n              Password fields contain text. Click \"Change Password\" to manage existing input.\n            </div>\n            }\n\n            <button type=\"button\"\n              class=\"tw-px-4 tw-py-2 tw-bg-blue-100 tw-text-blue-700 tw-border tw-border-blue-300 tw-rounded-md tw-text-sm tw-font-medium hover:tw-bg-blue-200 tw-transition-colors\"\n              (click)=\"triggerPasswordUpdate()\">\n              @if (hasPasswordInput()) {\n              Manage Password Fields\n              } @else {\n              Change Password\n              }\n            </button>\n          </div>\n        </div>\n        }\n\n        <!-- Password Options -->\n        <div class=\"tw-grid tw-grid-cols-1 tw-gap-4 tw-mb-4\">\n          <div class=\"tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-100 tw-rounded-lg\">\n            <label\n              class=\"tw-flex tw-flex-col tw-gap-2 tw-cursor-pointer tw-py-2 tw-bg-transparent tw-border-none tw-rounded-none tw-transition-all tw-duration-200\">\n              <cide-ele-input type=\"checkbox\" label=\"Force Password Change on Login\"\n                formControlName=\"user_passwordchangeonlogin\" class=\"tw-h-5 tw-accent-yellow-500 tw-rounded tw-mb-1\" />\n              <span class=\"tw-text-sm tw-text-gray-600 tw-mt-1 tw-leading-relaxed\">User will be required to change\n                password on next login</span>\n            </label>\n          </div>\n        </div>\n\n      </div>\n      }\n\n      @case ('roles') {\n      <!-- Entity, Roles & Permissions Mapping Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n\n\n\n        <!-- Important Note -->\n        <div class=\"tw-bg-amber-50 tw-border tw-border-amber-200 tw-rounded-lg tw-p-2 tw-mb-4\">\n          <div class=\"tw-flex tw-items-start tw-gap-3\">\n            <cide-ele-icon variant=\"amber\" size=\"lg\">info</cide-ele-icon>\n            <div class=\"tw-flex-1\">\n              <h4 class=\"tw-text-sm tw-font-semibold tw-text-amber-800 tw-mb-1\">Entity-Role Based Access</h4>\n              <p class=\"tw-text-sm tw-text-amber-700 tw-mb-2\">User access is completely managed through entity-role\n                mappings below. At least one entity mapping is required for user access.</p>\n              @if (hasDefaultEntity()) {\n              <div class=\"tw-flex tw-items-center tw-gap-2 tw-mt-2 tw-p-2 tw-bg-amber-100 tw-rounded\">\n                <cide-ele-icon variant=\"amber\" size=\"sm\">star</cide-ele-icon>\n                <span class=\"tw-text-sm tw-text-amber-800\">\n                  <strong>Default Entity:</strong> {{ getDefaultEntityName() }}\n                </span>\n              </div>\n              } @else {\n              <div class=\"tw-text-sm tw-text-amber-600 tw-mt-2 tw-italic\">\n                \u26A0\uFE0F No default entity selected. Please set one entity as default.\n              </div>\n              }\n            </div>\n          </div>\n        </div>\n\n        <!-- Entity-Role Mapping Section -->\n        <div class=\"tw-flex tw-text-center tw-justify-between tw-items-center tw-mb-4\">\n          <div>\n            <h4 class=\"tw-text-sm tw-text-left tw-font-semibold tw-text-blue-900 tw-mb-1\">Entity-Role Mapping</h4>\n            <p class=\"tw-text-sm tw-text-blue-700\">Map user to entities with specific roles and permissions</p>\n          </div>\n          <div class=\"tw-flex tw-flex-col tw-items-end\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addEntityMapping()\"\n              leftIcon=\"add\" [disabled]=\"isAllEntitiesMapped()\">\n              Add Entity Mapping\n            </button>\n\n            @if (isAllEntitiesMapped()) {\n            <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-max-w-xs\">\n              <p class=\"tw-text-xs tw-text-blue-700\">\n                <cide-ele-icon variant=\"info\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                All available entities are already mapped.\n              </p>\n            </div>\n            }\n          </div>\n        </div>\n\n        <div formArrayName=\"core_entity_mapping\">\n            @for (mapping of entityMappings(); track $index; let i = $index) {\n            <div class=\"tw-bg-white tw-border tw-border-blue-200 tw-rounded-xl tw-mb-6 tw-overflow-hidden tw-shadow-sm\"\n              [formGroupName]=\"i\">\n              <div\n                class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-blue-100 tw-px-6 tw-py-3 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-blue-200\">\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <h5 class=\"tw-m-0 tw-text-blue-800 tw-text-sm tw-font-semibold\">Entity Mapping {{ i + 1 }}</h5>\n                  @if (mapping.syenm_isdefault) {\n                  <span\n                    class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                    <cide-ele-icon variant=\"green\" size=\"xs\" class=\"tw-mr-1\">star</cide-ele-icon>\n                    Default\n                  </span>\n                  }\n                </div>\n                @if (!mapping?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeEntityMapping(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n\n              <div>\n                <!-- Entity and Role Selection -->\n                <div class=\"tw-grid tw-px-3 tw-py-1 tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-mb-4\">\n                  <div>\n                    <cide-ele-select label=\"Entity\" [options]=\"getFilteredEntityOptions(i)\"\n                      formControlName=\"syenm_entity_id_syen\" valueKey=\"_id\" labelKey=\"syen_name\"\n                      placeholder=\"Select entity\" size=\"md\" (change)=\"onEntityChange(i, $event)\">\n                    </cide-ele-select>\n\n                    @if (isAllEntitiesSelected(i)) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-md\">\n                      <p class=\"tw-text-xs tw-text-yellow-700\">\n                        <cide-ele-icon variant=\"warning\" size=\"xs\" class=\"tw-mr-1\">info</cide-ele-icon>\n                        All entities are already mapped. Remove another mapping to add this one.\n                      </p>\n                    </div>\n                    }\n                  </div>\n                  <cide-ele-select label=\"Role for this Entity\" [options]=\"getRoleOptionsForEntity(i)\"\n                    formControlName=\"syenm_role_id_syusrol\" valueKey=\"_id\" labelKey=\"syusrol_role_name\"\n                    placeholder=\"Select role for this entity\" size=\"md\" (change)=\"onRoleChange(i, $event)\">\n                  </cide-ele-select>\n                </div>\n\n\n                <!-- Entity-Specific Details and Active Period - All in One Row -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4 tw-mb-4\">\n                  <cide-ele-select label=\"Department for this Entity\" [options]=\"getDepartmentOptionsForEntity(i)\"\n                    formControlName=\"syenm_department_id_sydept\" (change)=\"onDepartmentChange($event)\" valueKey=\"_id\"\n                    labelKey=\"sydept_name\" placeholder=\"Select department\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-select label=\"Designation for this Entity\" [options]=\"getDesignationOptionsForEntity(i)\"\n                    valueKey=\"_id\" labelKey=\"sydsg_name\" formControlName=\"syenm_designation_id_sydsg\"\n                    placeholder=\"Select designation\" size=\"md\">\n                  </cide-ele-select>\n\n                  <cide-ele-input label=\"Active From\" [id]=\"'syenm_activefrom['+i+']'\"\n                    formControlName=\"syenm_activefrom\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Active Until\" [id]=\"'syenm_activeupto['+i+']'\"\n                    formControlName=\"syenm_activeupto\" type=\"date\" size=\"md\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Mapping Settings -->\n                <div class=\"tw-grid tw-px-3 tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mb-4\">\n                  <div class=\"tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Default Entity\" formControlName=\"syenm_isdefault\"\n                      (change)=\"onDefaultEntityChange(i, $event)\" class=\"tw-h-5 tw-accent-green-500\" />\n                    <span class=\"tw-text-xs tw-text-green-600 tw-block tw-mt-1\">Set as user's default entity (only one\n                      allowed)</span>\n                  </div>\n\n                  <div class=\"tw-p-2 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-lg\">\n                    <cide-ele-input type=\"checkbox\" label=\"Active Mapping\" formControlName=\"syenm_isactive\"\n                      class=\"tw-h-5 tw-accent-blue-500\" />\n                    <span class=\"tw-text-xs tw-text-blue-600 tw-block tw-mt-1\">Enable this entity mapping</span>\n                  </div>\n\n                  <div class=\"tw-p-2 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-xs tw-font-semibold tw-text-gray-800 tw-mb-1\">\n                      User Type Mappings\n                    </div>\n                    <div class=\"tw-flex tw-flex-col tw-gap-2\">\n                      @if (allUserTypeMappings().length > 0) {\n                        @for (typeMapping of allUserTypeMappings(); track typeMapping._id || typeMapping.syutm_type_specific_id) {\n                          @if (isUserTypeMappingForEntity(typeMapping, getEntityIdFromMapping(i))) {\n                            <div class=\"tw-flex tw-items-start tw-gap-2 tw-p-1.5 tw-bg-white tw-border tw-border-green-300 tw-rounded-md\">\n                              <div class=\"tw-flex-1 tw-min-w-0\">\n                                <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-mb-1\">\n                                  <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n                                    {{ typeMapping.syutm_user_type }}\n                                  </span>\n                                  @if (typeMapping.syutm_isactive) {\n                                    <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                                      Active\n                                    </span>\n                                  }\n                                  <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-green-50 tw-text-green-700 tw-border tw-border-green-200\">\n                                    This Entity\n                                  </span>\n                                </div>\n                                @if (typeMapping.syutm_type_specific_id) {\n                                  <div class=\"tw-text-[11px] tw-text-gray-600 tw-font-mono tw-break-all\">\n                                    ID: {{ typeMapping.syutm_type_specific_id }}\n                                  </div>\n                                }\n                              </div>\n                            </div>\n                          } @else {\n                            <div class=\"tw-flex tw-items-start tw-gap-2 tw-p-1.5 tw-bg-white tw-border tw-border-gray-300 tw-rounded-md tw-opacity-75\">\n                              <div class=\"tw-flex-1 tw-min-w-0\">\n                                <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-mb-1\">\n                                  <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n                                    {{ typeMapping.syutm_user_type }}\n                                  </span>\n                                  @if (typeMapping.syutm_isactive) {\n                                    <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-green-100 tw-text-green-800\">\n                                      Active\n                                    </span>\n                                  }\n                                  <span class=\"tw-inline-flex tw-items-center tw-px-1.5 tw-py-0.5 tw-rounded-full tw-text-[10px] tw-font-medium tw-bg-gray-100 tw-text-gray-600\">\n                                    Other Entity\n                                  </span>\n                                </div>\n                                @if (typeMapping.syutm_type_specific_id) {\n                                  <div class=\"tw-text-[11px] tw-text-gray-600 tw-font-mono tw-break-all\">\n                                    ID: {{ typeMapping.syutm_type_specific_id }}\n                                  </div>\n                                }\n                              </div>\n                            </div>\n                          }\n                        }\n                      } @else {\n                        <span class=\"tw-text-xs tw-text-gray-500 tw-italic\">No user type mappings found</span>\n                      }\n                    </div>\n                    <div class=\"tw-text-[11px] tw-text-gray-500 tw-mt-2 tw-border-t tw-border-gray-300 tw-pt-1\">\n                      Display only. User type mappings are managed automatically based on user type selection.\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Menu Rights Grid for this Entity-Role -->\n                <div class=\"tw-border-t tw-border-gray-200\">\n\n                  @if (getMenuRightsForMapping(i).length > 0) {\n                  <!-- Menu Rights Tree Grid -->\n\n                  <cide-ele-data-grid [config]=\"getMenuRightsGridConfig(i)\"\n                    [templateRenderers]=\"getMenuRightsTemplateRenderers(i)\"\n                    (gridEvent)=\"onMenuRightsGridEvent($event, i)\" class=\"tw-h-96 tw-w-full\">\n                  </cide-ele-data-grid>\n\n                  } @else {\n                  <div class=\"tw-text-center tw-py-8 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg\">\n                    <div class=\"tw-text-gray-400 tw-mb-3\">\n                      <cide-ele-icon variant=\"gray\" size=\"lg\">menu</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-2\">No Menu Rights Available</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-mb-3 tw-text-center\">Select both entity and role to\n                      automatically load\n                      menu rights for this mapping.</p>\n                  </div>\n                  }\n                </div>\n              </div>\n            </div>\n            }\n          </div>\n\n          @if (entityMappings().length === 0) {\n          <div class=\"tw-text-center tw-py-8 tw-bg-white tw-border tw-border-blue-200 tw-rounded-lg\">\n            <div class=\"tw-text-blue-400 tw-mb-3\">\n              <cide-ele-icon variant=\"blue\" size=\"lg\">business</cide-ele-icon>\n            </div>\n            <h4 class=\"tw-text-sm tw-font-medium tw-text-blue-800 tw-mb-2\">No Entity Mappings</h4>\n            <p class=\"tw-text-blue-600 tw-mb-4 tw-text-center\">Add entity mappings to assign specific roles and\n              permissions for different entities.</p>\n            <button class=\"tw-mx-auto\" cideEleButton variant=\"primary\" size=\"md\" type=\"button\"\n              (click)=\"addEntityMapping()\" leftIcon=\"add\">\n              Add First Entity Mapping\n            </button>\n          </div>\n          }\n        </div>\n      }\n\n      @case ('addresses') {\n      <!-- Contact Addresses Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end\">\n          <div class=\"tw-flex tw-justify-between tw-items-end tw-mb-2 tw-gap-4\">\n            <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addContactAddress()\"\n              leftIcon=\"add\" [disabled]=\"!hasAddContactAddressRights()\">\n              Add New Address\n            </button>\n          </div>\n        </div>\n\n        <div formArrayName=\"core_user_contact_addresses\">\n          @for (address of contactAddresses(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <!-- Use address type as header instead of generic \"Address X\" -->\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getAddressTypeLabel(i) || ('Address ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-items-center tw-gap-2\">\n                @if (isAddressOwner(i)) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareAddress(i)\"\n                  leftIcon=\"share\" class=\"tw-text-blue-600 hover:tw-text-blue-700\">\n                  Share\n                </button>\n                }\n                @if (!address?._id) {\n                <button cideEleButton variant=\"danger\" size=\"sm\" type=\"button\" (click)=\"removeContactAddress(i)\"\n                  leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, Address Textarea on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                \n                <!-- Left Side: Input Fields (3/4 width) -->\n                <div class=\"lg:tw-col-span-3\">\n                  <!-- Row 1: Address Type, Contact Person -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Address Type\" [options]=\"addressTypeOptions()\" id=\"sycad_address_type_id_sygms\"\n                      formControlName=\"sycad_address_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onAddressTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Contact Person\" formControlName=\"sycad_contact_person_name\"\n                      placeholder=\"Enter contact person\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Postal Code, City, State, Country -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3\">\n                    <cide-ele-select label=\"Postal Code\" [options]=\"addressPostalCodes()[i] || []\"\n                      formControlName=\"sycad_contact_pin_sypin\" placeholder=\"Select postal code\" [searchable]=\"true\"\n                      [loading]=\"addressPostalCodesLoading()[i] || false\" (searchChange)=\"onPostalCodeSearch($event, i)\"\n                      (change)=\"onPostalCodeSelection($event, i)\" size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"City\" formControlName=\"sycad_contact_city_sypin\" placeholder=\"Enter city\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"State\" formControlName=\"sycad_contact_state_sypin\" placeholder=\"Enter state\"\n                      size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-select label=\"Country\" [options]=\"addressCountries()[i] || []\"\n                      formControlName=\"sycad_contact_country_syctr\" placeholder=\"Select country\" valueKey=\"_id\"\n                      labelKey=\"syctr_country_iso_name\" [searchable]=\"true\" (searchChange)=\"onCountrySearch($event, i)\"\n                      [loading]=\"addressCountriesLoading()[i] || false\" size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: Address Textarea (1/4 width, spans 2 rows) -->\n                <div class=\"lg:tw-col-span-1 lg:tw-row-span-2 tw-flex tw-flex-col\">\n                  <cide-ele-textarea label=\"Complete Address\" formControlName=\"sycad_contact_address\"\n                    placeholder=\"Enter complete address with area, city, and landmarks\" [rows]=\"4\" size=\"sm\"\n                    class=\"tw-h-full\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n\n              <!-- Contact Details: Primary Phone, Alt Phone, Fax, Primary Email in 4 columns -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Primary Phone\" formControlName=\"sycad_contact_phone\" type=\"tel\"\n                  placeholder=\"Primary phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Alternate Phone\" formControlName=\"sycad_contact_phone_alt\" type=\"tel\"\n                  placeholder=\"Alternate phone\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Fax Number\" formControlName=\"sycad_contact_fax\" placeholder=\"Fax number\"\n                  size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Primary Email\" formControlName=\"sycad_contact_email\" type=\"email\"\n                  placeholder=\"Primary email\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Alternate Email in single row -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                <cide-ele-input label=\"Alternate Email\" formControlName=\"sycad_contact_email_alt\" type=\"email\"\n                  placeholder=\"Alternate email address\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('documents') {\n      <!-- Documents Section -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-2 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"md\" type=\"button\" (click)=\"addDocument()\" leftIcon=\"add\" [disabled]=\"!hasAddDocumentRights()\">\n            Add Document\n          </button>\n        </div>\n        <div formArrayName=\"core_user_documents\">\n          @for (doc of documents(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-xl tw-mb-8 tw-overflow-hidden tw-transition-all tw-duration-300 hover:tw-shadow-lg tw-shadow-sm\">\n            <div\n              class=\"tw-bg-gradient-to-r tw-from-gray-50 tw-to-gray-100 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-semibold tw-tracking-tight\">\n                {{ getDocumentTypeLabel(i) || ('Document ' + (i + 1)) }}\n              </h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (doc?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"sm\" type=\"button\" (click)=\"shareDocumentRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n              </div>\n            </div>\n            <div class=\"tw-p-4\">\n              <!-- Main Layout: Inputs on Left, File Upload on Right -->\n              <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-3 tw-gap-4\">\n                \n                <!-- Left Side: Document Information (2/3 width) -->\n                <div class=\"lg:tw-col-span-2\">\n                  <!-- Row 1: Document Type, Document Number, Name as per Document -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-select label=\"Document Type\" [options]=\"documentTypeOptions()\"\n                      formControlName=\"syusd_document_type_id_sygms\" placeholder=\"Select type\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\" (change)=\"onDocumentTypeChange(i)\">\n                    </cide-ele-select>\n\n                    <cide-ele-input label=\"Document Number\" formControlName=\"syusd_doc_number\"\n                      placeholder=\"Document number\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Name as per Document\" formControlName=\"syusd_doc_name_as_per_doc\"\n                      placeholder=\"Name on document\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 2: Issue Date, Expiry Date, Photo Group -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                    <cide-ele-input label=\"Issue Date\" formControlName=\"syusd_doc_issue_date\"\n                      [id]=\"'syusd_doc_issue_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n\n                    <cide-ele-input label=\"Expiry Date\" formControlName=\"syusd_doc_expiry_date\"\n                      [id]=\"'syusd_doc_expiry_date['+i+']'\" type=\"date\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <!-- Row 3: Verification Status, KYC Status -->\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-select label=\"Verification Status\" [options]=\"documentVerificationStatusOptions()\"\n                      formControlName=\"syusd_doc_verification_status_id_sygms\" placeholder=\"Select status\"\n                      size=\"sm\" valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n\n                    <cide-ele-select label=\"KYC Status\" [options]=\"documentKycStatusOptions()\"\n                      formControlName=\"syusd_doc_kyc_status_id_sygms\" placeholder=\"Select KYC status\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n                </div>\n\n                <!-- Right Side: File Upload (1/3 width) -->\n                <div class=\"lg:tw-col-span-1\">\n                  <div class=\"tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-lg tw-p-3 tw-h-full\">\n                    \n                    <!-- File Upload Input -->\n                    <cide-ele-file-input\n                      [id]=\"'document-files-' + i\"\n                      [multiple]=\"true\"\n                      formControlName=\"syusd_photo_group_id_cyfm\"\n                      [accept]=\"'.pdf,.jpg,.jpeg,.png,.doc,.docx'\"\n                      [autoUpload]=\"true\"\n                      [uploadData]=\"getDocumentUploadData(i)\"\n                      (change)=\"onDocumentFilesSelected($event, i)\"\n                      (uploadSuccess)=\"onDocumentUploadSuccess($event, i)\"\n                      (uploadError)=\"onDocumentUploadError($event, i)\"\n                      (uploadProgressChange)=\"onDocumentUploadProgress($event, i)\"\n                      class=\"tw-mb-3\"\n                      size=\"sm\">\n                    </cide-ele-file-input>\n\n                    <!-- Upload Status -->\n                    <!-- Upload status is now handled by the file input component itself -->\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n\n      @case ('family') {\n      <!-- Family Details Section - Compact Design -->\n      <div class=\"tw-py-1 tw-border-b-0 tw-mb-1\">\n        <div class=\"tw-flex tw-justify-end tw-items-end tw-mb-3 tw-gap-4\">\n          <button cideEleButton variant=\"primary\" size=\"sm\" type=\"button\" (click)=\"addFamilyDetail()\" leftIcon=\"add\" [disabled]=\"!hasAddFamilyDetailRights()\">\n            Add Family Member\n          </button>\n        </div>\n\n        <div formArrayName=\"core_user_family_details\">\n          @for (family of familyDetails(); track $index; let i = $index) {\n          <div [formGroupName]=\"i\"\n            class=\"tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg tw-mb-4 tw-overflow-hidden tw-transition-all tw-duration-200 hover:tw-shadow-md tw-shadow-sm\">\n            \n            <!-- Compact Header -->\n            <div class=\"tw-bg-gray-50 tw-px-4 tw-py-2 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200\">\n              <h4 class=\"tw-m-0 tw-text-gray-700 tw-text-sm tw-font-medium\">Family Member {{ i + 1 }}</h4>\n              <div class=\"tw-flex tw-gap-2\">\n                @if (family?._id) {\n                <button cideEleButton variant=\"secondary\" size=\"xs\" type=\"button\" (click)=\"shareFamilyDetailRights(i)\"\n                  leftIcon=\"share\">\n                  Share\n                </button>\n                }\n                @if (!family?._id) {\n                <button cideEleButton variant=\"danger\" size=\"xs\" type=\"button\" (click)=\"removeFamilyDetail(i)\" leftIcon=\"delete\">\n                  Remove\n                </button>\n                }\n              </div>\n            </div>\n            \n            <!-- Compact Form Content - 3 inputs per row -->\n            <div class=\"tw-p-4\">\n              <!-- Row 1: Name, User, and Combined Relationship/Active Status (33.33% each) -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Family Member Name\" formControlName=\"syfdl_family_member_name\"\n                  placeholder=\"Enter family member full name\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-select label=\"Family Member User\" [options]=\"userOptions(i)\"\n                  formControlName=\"syfdl_family_member_id_user\" placeholder=\"Select family member user\" size=\"sm\"\n                  valueKey=\"_id\" labelKey=\"user_fullname\" [searchable]=\"true\"\n                  [loading]=\"userSearchLoading()[i] || false\" (searchChange)=\"onUserSearchChange($event, i)\"\n                  (change)=\"onUserSelectionChange($event, i)\">\n                </cide-ele-select>\n\n                <!-- Combined Relationship and Active Status (33.33%) -->\n                <div class=\"tw-flex tw-flex-row tw-gap-2 tw-items-end\">\n                  <div class=\"tw-flex-1\">\n                    <cide-ele-select label=\"Relationship\" [options]=\"relationshipOptions()\"\n                      formControlName=\"syfdl_relationship_id_sygms\" placeholder=\"Select relationship\" size=\"sm\"\n                      valueKey=\"_id\" labelKey=\"sygms_title\">\n                    </cide-ele-select>\n                  </div>\n\n                  <div class=\"tw-flex tw-items-center tw-pt-1 tw-flex-shrink-0\">\n                    <cide-ele-input formControlName=\"syfdl_isactive\" type=\"checkbox\" label=\"Active\" size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Row 2: Blood Group, DOB, and Phone -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-select label=\"Blood Group\" [options]=\"bloodGroupOptions()\"\n                  formControlName=\"syfdl_blood_group_sygms\" placeholder=\"Select blood group\" size=\"sm\" valueKey=\"_id\"\n                  labelKey=\"sygms_title\">\n                </cide-ele-select>\n\n                <cide-ele-input label=\"Date of Birth\" formControlName=\"syfdl_family_member_dob\" type=\"date\" size=\"sm\"\n                  [id]=\"'syfdl_family_member_dob['+i+']'\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Phone\" formControlName=\"syfdl_contact_phone\" type=\"tel\"\n                  placeholder=\"Enter contact phone\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n              <!-- Row 3: Email, Email ID, and Contact Number -->\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3 tw-gap-3 tw-mb-3\">\n                <cide-ele-input label=\"Contact Email\" formControlName=\"syfdl_contact_email\" type=\"email\"\n                  placeholder=\"Enter contact email\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Email ID\" formControlName=\"syfdl_contact_email_id\" type=\"email\"\n                  placeholder=\"Enter contact email ID\" size=\"sm\">\n                </cide-ele-input>\n\n                <cide-ele-input label=\"Contact Number\" formControlName=\"syfdl_contact_number\" type=\"tel\"\n                  placeholder=\"Enter contact number\" size=\"sm\">\n                </cide-ele-input>\n              </div>\n\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n      }\n      }\n    </div>\n\n    <!-- Form Actions -->\n    <div\n      class=\"tw-flex tw-justify-between tw-items-center tw-gap-4 tw-py-2 tw-bg-white tw-border-t tw-border-gray-200 tw-sticky tw-bottom-0 tw-z-10\">\n      <!-- Error Display Component -->\n      <div class=\"tw-flex-1\">\n        <cide-form-field-error [formGroup]=\"userMasterForm\"></cide-form-field-error>\n      </div>\n\n      <!-- Action Buttons -->\n      <div class=\"tw-flex tw-gap-4\">\n      <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n        [disabled]=\"loading()\">\n        Reset Form\n      </button>\n\n      <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || userMasterForm.invalid\"\n        [loading]=\"loading()\" leftIcon=\"save\">\n        Save User Master\n      </button>\n      </div>\n    </div>\n  </form>\n</div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers for Role Permissions Grid -->\n<ng-template #menuDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-space-x-3 tw-min-w-0\">\n    <!-- Menu Icon -->\n    <div class=\"tw-flex-shrink-0\">\n      @if (row.syme_type === 'module') {\n      <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">folder</cide-ele-icon>\n      } @else if (row.syme_type === 'section') {\n      <cide-ele-icon class=\"tw-text-green-600 tw-w-4 tw-h-4\">folder_open</cide-ele-icon>\n      } @else if (row.syme_type === 'menu') {\n      <cide-ele-icon class=\"tw-text-purple-600 tw-w-4 tw-h-4\">menu</cide-ele-icon>\n      } @else {\n      <cide-ele-icon class=\"tw-text-gray-600 tw-w-4 tw-h-4\">description</cide-ele-icon>\n      }\n    </div>\n\n    <!-- Menu Details -->\n    <div class=\"tw-ml-3 tw-min-w-0 tw-flex-1\">\n      <div class=\"tw-flex tw-items-center tw-gap-2\">\n        <div class=\"tw-text-xs tw-font-medium tw-text-gray-900 tw-truncate\" [title]=\"row.syme_title\">\n          {{ row.syme_title || row.menu?.syme_title || row.menu?.syme_menu_name || 'Untitled' }}\n        </div>\n        <!-- Green pill indicator for parent menus with child permissions -->\n        @if (row.syme_type === 'module' || row.syme_type === 'section') {\n        @if (hasChildMenusWithPermissions(row._id)) {\n        <span\n          class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800 tw-whitespace-nowrap\">\n          Assigned\n        </span>\n        }\n        }\n      </div>\n      @if (row.permission?.sygms_name) {\n      <div class=\"tw-text-xs tw-text-blue-500 tw-truncate\" [title]=\"row.permission?.sygms_name\">\n        {{ row.permission?.sygms_name }}\n      </div>\n      }\n    </div>\n  </div>\n</ng-template>\n\n<!-- Menu Type Renderer Template -->\n<ng-template #menuTypeRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\">\n    @if (row.syme_type === 'module') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-blue-100 tw-text-blue-800\">\n      Module\n    </span>\n    } @else if (row.syme_type === 'section') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-green-100 tw-text-green-800\">\n      Section\n    </span>\n    } @else if (row.syme_type === 'menu') {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800\">\n      Menu\n    </span>\n    } @else {\n    <span\n      class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-gray-100 tw-text-gray-800\">\n      {{ row.syme_type || 'Unknown' }}\n    </span>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Checkbox Renderer Template -->\n<ng-template #permissionsCheckboxRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row.syme_type === 'menu' && row?.syme_permissions_id_sygms && row?.syme_permissions_id_sygms.length > 0) {\n    @for (permissionId of row?.syme_permissions_id_sygms || []; track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-1\">\n      <div class=\"tw-flex tw-items-center tw-space-x-1\">\n        <input type=\"checkbox\" [checked]=\"isPermissionSelected(row._id, permissionId)\" [disabled]=\"true\"\n          class=\"tw-h-4 tw-w-4 tw-text-blue-600 tw-bg-gray-100 tw-border-gray-300 tw-rounded focus:tw-ring-blue-500\">\n        <label class=\"tw-text-xs tw-text-gray-700\">\n          {{ getPermissionById(permissionId)?.sygms_title || 'Unknown' }}\n        </label>\n      </div>\n    </div>\n    }\n    } @else {\n    <!-- Show green checkmark for parent menus with child permissions -->\n    @if (row.syme_type === 'module' || row.syme_type === 'section' || row.syme_type === 'title') {\n    @if (hasChildMenusWithPermissions(row._id)) {\n    <div class=\"tw-flex tw-items-center tw-justify-center tw-w-6 tw-h-6 tw-bg-green-100 tw-rounded-full\">\n      <cide-ele-icon class=\"tw-text-green-600\" size=\"xs\">\n        check\n      </cide-ele-icon>\n    </div>\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    } @else {\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n    }\n  </div>\n</ng-template>\n\n<!-- Menu Rights Permissions Renderer Template -->\n<ng-template #menuRightsPermissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    <!-- Role Rights Display -->\n    @if (row.role_rights && row.role_rights.length > 0) {\n    <div class=\"tw-mb-2\">\n      <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Role Rights:</div>\n      <div class=\"tw-flex tw-flex-wrap tw-gap-1\">\n        @for (right of row.role_rights; track $index) {\n        <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-blue-100 tw-text-blue-800 tw-rounded\">\n          {{ right }}\n        </span>\n        }\n      </div>\n    </div>\n    }\n\n\n    <!-- Exception Indicator -->\n    @if (row.hasException) {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-inline-block tw-px-2 tw-py-1 tw-text-xs tw-bg-yellow-100 tw-text-yellow-800 tw-rounded\">\n        Override\n      </span>\n    </div>\n    } @else {\n    <div class=\"tw-mt-2\">\n      <span class=\"tw-text-xs tw-text-gray-400\">Default</span>\n    </div>\n    }\n  </div>\n</ng-template>\n\n<!-- Permissions Renderer Template -->\n<ng-template #permissionsRendererTemplate let-row=\"row\" let-value=\"value\">\n  <div class=\"tw-flex tw-flex-wrap tw-gap-2 tw-max-w-full\">\n    @if (row._permissionValues && Object.keys(row._permissionValues).length > 0) {\n    @for (permissionId of Object.keys(row._permissionValues); track permissionId) {\n    <div class=\"tw-flex tw-items-center tw-space-x-2\">\n      <cide-ele-input type=\"checkbox\" [ngModel]=\"row._permissionValues[permissionId].checked\"\n        (ngModelChange)=\"onPermissionChangeSafe($event, row, permissionId)\"\n        [id]=\"'permission-' + row._id + '-' + permissionId\" class=\"tw-h-4 tw-w-4\">\n      </cide-ele-input>\n      <label [for]=\"'permission-' + row._id + '-' + permissionId\" \n        class=\"tw-text-xs tw-cursor-pointer\"\n        [ngClass]=\"{\n          'tw-text-gray-700': row._permissionValues[permissionId].modified === row._permissionValues[permissionId].actual,\n          'tw-text-blue-600 tw-font-semibold': row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual\n        }\">\n        {{ row._permissionValues[permissionId].permission?.sygms_title }}\n        @if (row._permissionValues[permissionId].modified !== row._permissionValues[permissionId].actual) {\n        <span class=\"tw-text-xs tw-text-orange-500 tw-ml-1\" title=\"Modified from role permission\">\n          ({{ row._permissionValues[permissionId].actual ? '\u2713' : '\u2717' }})\n        </span>\n        }\n      </label>\n    </div>\n    }\n    } @else {\n    <!-- No permissions to display - show N/A (permissions are already loaded, just empty) -->\n    <span class=\"tw-text-xs tw-text-gray-400\">N/A</span>\n    }\n  </div>\n</ng-template>" }]
         }], ctorParameters: () => [] });
 
 var userCreate_component = /*#__PURE__*/Object.freeze({