<tnz-form-navigator
  apiKey="USERLIST"
  [route]="shared.formRoute"
  [id]="shared.id"
  *ngIf="shared.isViewMode()"
></tnz-form-navigator>
<div class="form-container" [class.has-navigator]="shared.isViewMode()">
  <div class="form-header">
    <span>{{ shared.formHeading }}</span>
    <div>
      <button
        *ngIf="shared.isViewMode()"
        (click)="shared.create()"
        data-test="create"
      >
        <ng-container *ngTemplateOutlet="createIcon"></ng-container>
      </button>
      <button
        *ngIf="shared.isViewMode()"
        (click)="shared.edit()"
        data-test="edit"
      >
        <ng-container *ngTemplateOutlet="editIcon"></ng-container>
      </button>
      <button
        *ngIf="!shared.isViewMode()"
        (click)="shared.save(false)"
        data-test="save"
      >
        <ng-container *ngTemplateOutlet="saveIcon"></ng-container>
      </button>
      <button (click)="shared.cancelEdit()" data-test="cancel-edit">
        <ng-container *ngTemplateOutlet="closeIcon"></ng-container>
      </button>
    </div>
  </div>

    <div class="form-overflow">



      <tnz-multi-tab-expansion-panel [schema]="shared.schema" 
      [visible]="shared.checkComponentViewPermission(shared.permissionKeys.generalInformation)"
      [editable]="shared.checkComponentEditPermission(shared.permissionKeys.generalInformation)"
      >

        <!-- General Tab -->
        <tnz-expansion-tab tabTitle="General"  tabKey="general"
        [visible]="shared.checkComponentViewPermission(shared.permissionKeys.generalInformation,shared.permissionKeys.general)"
        [editable]="shared.checkComponentEditPermission(shared.permissionKeys.generalInformation,shared.permissionKeys.general)"
        >

          <ng-template>
            <tnz-input-group
            [path]="shared.headerPath"
            [primaryKey]="shared.primaryKey"
            [sharedData]="shared.formData"
            [loading]="shared.isLoading()"
            [nonVisibleAttrs]="shared.nonVisibleAttrs?.[shared.permissionKeys.generalInformation]?.[shared.permissionKeys.general]?.fields"
            [nonEditableAttrs]="shared.nonEditableAttrs?.[shared.permissionKeys.generalInformation]?.[shared.permissionKeys.general]?.fields"
            [disabledAttrs]="shared.disabledAttrs"
            [mode]="shared.mode"
            [schema]="shared.schema"
            
            
          >
            <div class="form-expansion-content-wrapper">
                <div  class="tnz-wid-2">
                  <tnz-text [key]="headerfields.userCode" label="UserCode" 
                  validators="required;shortCode"
                  [convertToUpperCase]="true"
                  [lengthLimit]="25"
                  >
                  </tnz-text>

                  <tnz-date [key]="headerfields.startDate" 
                  label="StartDate" 
                  [defaultValue]="today"
                  [minDate]="minStartDate"
                  validators="required"
                  #userStartDate
                  [maxDate]="headerEndDate"
                  (valueChangedFromUI)="headerDateValidation($event, 'startDate')"
                  [emitOnIntialize]="true"
                  >    
                  </tnz-date>

                  <tnz-text [key]="headerfields.designation" 
                  label="Designation" 
                  [lengthLimit]="80"
                  validators="required"
                  [autoComplete]="true"
                  [config]="designationConfig"
                  >
                  </tnz-text>

                </div>

                <div div class="tnz-wid-2">
                  
                  <tnz-text [key]="headerfields.userName" 
                  label="UserName" 
                  validators="required"
                  [lengthLimit]="80"
                  >
                  </tnz-text>

                  <tnz-date [key]="headerfields.endDate" 
                  #userEndDate
                  label="EndDate" 
                  [minDate]="headerStartDate"
                  (valueChangedFromUI)="headerDateValidation($event, 'endDate')"
                  [emitOnIntialize]="true"

                  >

                  </tnz-date>
                  <tnz-select [key]="headerfields.userManager" 
                  label="Manager"
                  apiKey="USERMANAGERLIST"
                  displayKey="managerUserName"
                  returnKey="managerUserId"
                  >
                  </tnz-select>

                </div>

                <div class="tnz-wid-3">
                  
                  <tnz-text-area [key]="headerfields.description"
                  label="Description" 
                  [lengthLimit]="500">
                  </tnz-text-area>
                
                </div>

                <div class="checkbox-padding tnz-wid-2 last-child">
                  
                  <tnz-checkbox
                      [key]="headerfields.active"
                      label="Active"
                      [defaultValue]="true"
                      (valueChangedFromUI)="activateDeactivateUser($event)"
                      [emitOnIntialize]="true"
                    >
                  </tnz-checkbox>
                  <tnz-checkbox
                      [key]="headerfields.isAdmin"
                      label="AdministrativePrivilages"
                      [disable]="true"
                    >
                  </tnz-checkbox>
                  <tnz-checkbox
                      [key]="headerfields.allAppAccess"
                      label="AllApplicationAccess"
                    >
                  </tnz-checkbox>
                
                </div>
            </div>
            </tnz-input-group>
          </ng-template>
        </tnz-expansion-tab>
        
        <!-- Personal Tab -->
        <tnz-expansion-tab tabTitle="Personal"  tabKey="personal"
        [visible]="shared.checkComponentViewPermission(shared.permissionKeys.generalInformation,shared.permissionKeys.personal)"
        [editable]="shared.checkComponentEditPermission(shared.permissionKeys.generalInformation,shared.permissionKeys.personal)"
        >
          <ng-template>
            <tnz-input-group
            [path]="shared.headerPath"
            [primaryKey]="shared.primaryKey"
            [sharedData]="shared.formData"
            [loading]="shared.isLoading()"
            [nonVisibleAttrs]="shared.nonVisibleAttrs?.[shared.permissionKeys.generalInformation]?.[shared.permissionKeys.personal]?.fields"
            [nonEditableAttrs]="shared.nonEditableAttrs?.[shared.permissionKeys.generalInformation]?.[shared.permissionKeys.personal]?.fields"
            [disabledAttrs]="shared.disabledAttrs"
            [mode]="shared.mode"
            [schema]="shared.schema"
            
          >
              <div class="form-expansion-content-wrapper">
                <div class="tnz-wid-2">
                  
                  <tnz-select [key]="headerfields.personalTitle" 
                  label="PersonalTitle" 
                  validators="required"
                  apiKey="VALIDVALUESLIST"
                  [params]="personalTitleParams"
                  returnKey="value"
                  displayKey="valueDesc"
                  
                  >
                  </tnz-select>

                  <tnz-text [key]="headerfields.firstName" 
                  label="FirstName" 
                  [lengthLimit]="80"
                  validators="required">
                  </tnz-text>

                  <tnz-select [key]="headerfields.gender" 
                  label="Gender" 
                  apiKey="VALIDVALUESLIST"
                  [params]="genderParams"
                  returnKey="value"
                  displayKey="valueDesc"
                  >   
                  </tnz-select>
                
                </div>
                <div  class="tnz-wid-2">
                 
                  <tnz-text [key]="headerfields.email" 
                  label="Email" 
                  validators="pattern:^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$;required"
                  >
                  </tnz-text>

                  <tnz-text [key]="headerfields.middleName" 
                  label="MiddleName"
                  [lengthLimit]="80"
                  >   
                  </tnz-text>
                 
                  <tnz-date [key]="headerfields.dateOfBirth" 
                  label="DOB" 
                  >
                  </tnz-date>
                
                </div>
                
                <div class="tnz-wid-2 ">
                  <tnz-text [key]="headerfields.contactNo" 
                  label="ContactNo"
                  validators="phone"

                  >   
                  </tnz-text>
                  <tnz-text [key]="headerfields.lastName" 
                  label="LastName"
                  [lengthLimit]="80"
                  validators="required"
                  >   
                  </tnz-text>
                  <tnz-text [key]="headerfields.emergencyContact" 
                  label="EmergencyContactNo"
                  validators="phone"

                  >
                  </tnz-text>
                </div>
                <div class="tnz-wid-2 last-child">
                    <tnz-file-upload [key]="headerfields.displayPicture"
                    [filePathKey]="headerfields.userCode"
                    label="ProfilePicture"
                    [allowedTypes]="profilePictureAllowedFileTypes"
                    fileName="profilePicture"
                    [maxFileSize]="5242880"
                    aspectRatio="1:1"
                    >
                    </tnz-file-upload>
                </div>
              </div>
            </tnz-input-group>
        </ng-template>
      </tnz-expansion-tab>
        
        <!-- Settings Tab -->
        <tnz-expansion-tab tabTitle="Settings" tabKey="settings" 
        [visible]="shared.checkComponentViewPermission(shared.permissionKeys.generalInformation,shared.permissionKeys.settings)"
        [editable]="shared.checkComponentEditPermission(shared.permissionKeys.generalInformation,shared.permissionKeys.settings)"
        >
          <ng-template>
            <tnz-input-group
            [path]="shared.headerPath"
            [primaryKey]="shared.primaryKey"
            [sharedData]="shared.formData"
            [loading]="shared.isLoading()"
            [nonVisibleAttrs]="shared.nonVisibleAttrs?.[shared.permissionKeys.generalInformation]?.[shared.permissionKeys.settings]?.fields"
            [nonEditableAttrs]="shared.nonEditableAttrs?.[shared.permissionKeys.generalInformation]?.[shared.permissionKeys.settings]?.fields"
            [disabledAttrs]="shared.disabledAttrs"
            [mode]="shared.mode"
            [schema]="shared.schema"
          >
              <form class="form-expansion-content-wrapper">
                <div class="tnz-wid-2">
                    <tnz-password [key]="headerfields.password" 
                    label="Password" 
                    [hasPassword]="shared.isEditMode()"
                    [validators]="!shared.isViewMode()?passwordValidator:''"
                    [placeHolder]="shared.getHeaderData()?.passwordAvailable == 1 ? '•••••••••••••••' : ''"                
                    (valueChanged)="checkUserPasswordMatch($event)"
                    #userPassword
                    >
                  </tnz-password>

                  <tnz-type-select [textKey]="headerfields.passwordLifeSpan"
                  [selectKey]="headerfields.lifeSpanPeriod"
                  textLabel="PasswordLifeSpan" 
                  validators="required"
                  [path]="shared.headerPath"
                  [primaryKey]="shared.primaryKey"
                  [sharedData]="shared.formData"
                  [loading]="shared.isLoading()"
                  [nonVisibleAttrs]="shared.nonVisibleAttrs?.[shared.permissionKeys.generalInformation]?.[shared.permissionKeys.settings]?.fields"
                  [nonEditableAttrs]="shared.nonVisibleAttrs?.[shared.permissionKeys.generalInformation]?.[shared.permissionKeys.settings]?.fields"
                  [disabledAttrs]="shared.disabledAttrs"
                  [mode]="shared.mode"
                  [schema]="shared.schema"
                  [textValidators]=passwordLifeSpanValidator
                  selectValidators="required"
                  apiKey="LOOKUPLIST"
                  selectDisplayKey="meaning"
                  selectReturnKey="lookupValueId"
                  [selectParams]="passwordlifeSpanPeriodParams"
                  (selectValueChange)="setPasswordLifeSpanLimits($event)"
                  >
                  </tnz-type-select>

                  <tnz-select [key]="headerfields.timeFormat" 
                  label="DefaultTimeFormat" 
                  displayKey="valueDesc"
                  returnKey="value"
                  apiKey="VALIDVALUESLIST"
                  [params]="timeFormatParams"

                  >      
                  </tnz-select>
                </div>

                <div  class="tnz-wid-2">
                    <tnz-password [key]="headerfields.confirmPassword" 
                    label="ConfirmPassword" 
                    [validators]="!shared.isViewMode()?passwordValidator:''"
                    [disable]="!shared.isViewMode()&&!userPassword?._dirty"
                    [placeHolder]="shared.getHeaderData()?.passwordAvailable == 1 ? '•••••••••••••••' : ''"
                    [hasPassword]="shared.isEditMode()&&!userPassword?._dirty"
                    (valueChanged)="checkUserPasswordMatch($event)"
                    #userConfirmPassword
                    >
                    </tnz-password>


                  <tnz-number [key]="headerfields.passwordRetry" 
                  label="PasswordRetry" 
                  validators="max:10;required;"
                  >
                      
                  </tnz-number>
                  <tnz-select [key]="headerfields.dateFormat" 
                  label="DefaultDateFormat" 
                  displayKey="valueDesc"
                  returnKey="value"
                  apiKey="VALIDVALUESLIST"
                  [params]="dateFormatParams"
                  >
                      
                  </tnz-select>
                </div>

                  <div class="tnz-wid-2 ">   
                  <tnz-select [key]="headerfields.timeZone" 
                  label="TimeZone"
                  validators="required"
                  displayKey="timeZoneName"
                  returnKey="timeZoneCode"
                  apiKey="TIMEZONELIST"
                  >
                  </tnz-select>
                  <tnz-type-select [textKey]="headerfields.inactiveDuration"
                  [selectKey]="headerfields.inactivePeriod"
                  textLabel="InactiveTime" 
                  validators="required"
                  [path]="shared.headerPath"
                  [primaryKey]="shared.primaryKey"
                  [sharedData]="shared.formData"
                  [loading]="shared.isLoading()"
                  [nonVisibleAttrs]="shared.nonVisibleAttrs?.[shared.permissionKeys.generalInformation]?.[shared.permissionKeys.settings]?.fields"
                  [nonEditableAttrs]="shared.nonVisibleAttrs?.[shared.permissionKeys.generalInformation]?.[shared.permissionKeys.settings]?.fields"
                  [disabledAttrs]="shared.disabledAttrs"
                  [mode]="shared.mode"
                  [schema]="shared.schema"
                  [textValidators]=inactivePeriodValidator
                  selectValidators="required"
                  apiKey="LOOKUPLIST"
                  selectDisplayKey="meaning"
                  selectReturnKey="lookupValueId"
                  [selectParams]="inactivePeriodParams"
                  (selectValueChange)="setInactiveLimits($event)"

                  >

                  </tnz-type-select>
                  <tnz-select [key]="headerfields.currency" 
                  label="DefaultCurrency" 
                  displayKey="currencyCode"
                  returnKey="currencyId"
                  apiKey="CURRENCYVALUESLIST"
                  >
                      
                  </tnz-select>
                  </div>


                  <div class="tnz-wid-2 ">
                  
                      
                    <tnz-number [key]="headerfields.sessionTimeOut" 
                    label="SessionTimeOut"
                    validators="max:60;required"
                    >
                    </tnz-number>
                    
                    <tnz-select [key]="headerfields.preferredLanguage" 
                    label="PreferredLanguage" 
                    apiKey="VALIDVALUESLIST"
                    returnKey="value"
                    displayKey="valueDesc"
                    [params]="preferredLanguageParams"
                    [defaultFirst]="true"
                    >   
                    </tnz-select>
                    </div>
                  
                    <div class="checkbox-padding tnz-wid-2 last-child">
                      <tnz-checkbox
                        [key]="headerfields.switchTimezoneAccess"
                        label="AllowToSwitchTimeZone"
                        [defaultValue]="true"
                      >
                      </tnz-checkbox>
                    </div>
              </form>
            </tnz-input-group>
        </ng-template>
        </tnz-expansion-tab>
      </tnz-multi-tab-expansion-panel>


      <tnz-datatable
      tableId="user-roles"
      taskFlowId="USERROLES"
      [schema]="shared.schema"
      tableTitle="Role"
      [primaryListing]="false"
      [expansionTable]="true"
      [path]="shared.appPath + '.userRoles'"
      primaryKey="roleUserId"
      dataUrl="/trendz-proc-executer/USERFORMROLELIST"
      maxHeight="350px"
      [mode]="shared.mode"
      [apiParams]="userRolesTableParams"
      [customIconTemplate]="rolesIcon"
      [paginated]="false"
      (dataChange)="setUserRolesTableChanges($event)"
      (createdChange)="setUserRolesTableModifyChanges($event)"
      (discardChange)="resetUserRolesTableChanges($event)"
      [fetchAll]="true"
      [editable]="true"
      [visible]="shared.checkComponentViewPermission(shared.permissionKeys.roles)"
      [fieldsEditable]="shared.checkComponentEditPermission(shared.permissionKeys.roles)"
      [nonVisibleAttrs]="shared.nonVisibleAttrs?.[shared.permissionKeys.roles]?.fields"
      [nonEditableAttrs]="shared.nonEditableAttrs?.[shared.permissionKeys.roles]?.fields"
      [columnRouteUrls]="shared.routeUrls?.[shared.permissionKeys.roles]"           
      #userRoles
      >
      
        <tnz-datatable-input-column title="Role" field="roleName" [editableAttr]="false" 
        [lovPopup]="shared.lovPopup" [config]="roleLov" type='lov' objectField="role"  
        routeUrl="administration/security/role/${roleId}"      
        >
        </tnz-datatable-input-column>

        <tnz-datatable-input-column title="RoleCode" field="roleCode" [editableAttr]="false" [creatableAttr]="false"
        [disable]="true"
        >
        </tnz-datatable-input-column>

        <tnz-datatable-input-column title="StartDate" field="startDate" type="date" 
        [config]="userRoleTableStartDateConfig"
        (valueChangedFromUI)="modifyRolesTableDateValidations($event,'startDate')"
        >
        </tnz-datatable-input-column>

        <tnz-datatable-input-column title="EndDate" field="endDate" type="date"
        (valueChangedFromUI)="modifyRolesTableDateValidations($event,'endDate')"
        >
        </tnz-datatable-input-column>

        <tnz-datatable-input-column title="Priority" field="rolePriority" type="number" 
        >
        </tnz-datatable-input-column>

        <tnz-datatable-input-column title="Status" field="active" type="status" [colStyle]="{ width: '120px' }" 
        [config]="userRoleTableActiveConfig"
        (disableChange)="!shared.isViewMode()&&activateUserRolePopup($event)"
        [disable]="!shared.isViewMode()"
        >
        </tnz-datatable-input-column>


      </tnz-datatable>


      <tnz-tree
      tableId="userorganizations-list"
      tableTitle="Organization"
      taskFlowId="USERFORMORGANIZATION"
      [primaryListing]="false"
      [expansionTable]="true"
      [schema]="shared.schema"
      dataUrl="/trendz-proc-executer/USERFORMORGANIZATIONLIST"
      [maxNodeLevel]="2"
      [treeMaxHeight]="300"
      primaryKey="orgId"
      [path]="shared.appPath + '.userOrganizations'"
      [mode]="shared.mode"
      [editable]="true"
      [paginated]="false"
      [apiParams]="userOrganizationParams"
      [editableTableConfig]="{showCreateAction:false}"    
      [customIconTemplate]="organizationIcon" 
      [visible]="shared.checkComponentViewPermission(shared.permissionKeys.organization)"
      [fieldsEditable]="shared.checkComponentEditPermission(shared.permissionKeys.organization)"
      [nonVisibleAttrs]="shared.nonVisibleAttrs?.[shared.permissionKeys.organization]?.fields"
      [nonEditableAttrs]="shared.nonEditableAttrs?.[shared.permissionKeys.organization]?.fields"
      [columnRouteUrls]="shared.routeUrls?.[shared.permissionKeys.organization]" 
      #userOrganizations
    >

      <button toolbar-buttons *ngIf="!shared.isViewMode() && shared.checkComponentViewPermission(shared.permissionKeys.organization,'',shared.permissionKeys.createRow)" (click)="addOrganizationToUser($event)">
        <svg
          width="25"
          height="25"
          viewBox="0 0 25 25"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M12.8516 5.1167V19.1167"
            stroke="#003B81"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
          <path
            d="M5.85156 12.1167H19.8516"
            stroke="#003B81"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </button>
      <tnz-tree-column
        title="Division"
        field="divisionName"
        [disableDragging]="true"
        [disableManageColumnVisibility]="true"
        [nodeLevel]="1"
        nodeGroupId="divisionId"
        routeUrl="/administration/division/${divisionId}"
      ></tnz-tree-column>
      <tnz-tree-column
        title="Facility"
        field="facilityName"
        [disableDragging]="true"
        [disableManageColumnVisibility]="true"
        [nodeLevel]="2"
        nodeGroupId="facilityId"
        [showOnExpand]="false"
        routeUrl="/administration/facility/${facilityId}"
      ></tnz-tree-column>
      <tnz-tree-column
        title="Department"
        field="deptName"
        nodeGroupId="departmentId"
        [nodeLevel]="3"
        [disableDragging]="true"
        [disableManageColumnVisibility]="true"
        [showOnExpand]="false"
        routeUrl="/administration/department/${departmentId}"
      ></tnz-tree-column>

      <tnz-datatable-column field="associatedBy" title="AssociatedBy">
      </tnz-datatable-column>
      <tnz-datatable-input-column 
      title="Default"
      field="isDefault"
      [sortable]="false" 
      [filterable]="false"
      type="checkbox"
      (valueChangedFromUI)="defaultValuePropagate($event)"
      >
      </tnz-datatable-input-column>
      <tnz-tree-checkbox
        title="Access"
        field="isAllowed"
        [sortable]="false" 
        [filterable]="false"
        (valueChanged)="disableDefault($event)"
        [emitOnIntialize]="true"
      ></tnz-tree-checkbox>
     
    </tnz-tree>


   

      <tnz-tree
      tableId="userApplicationTree"
      tableTitle="Application"
      taskFlowId="USERFORMAPPLICATION"
      [primaryListing]="false"
      [expansionTable]="true"
      [schema]="shared.schema"
      dataUrl="/trendz-proc-executer/USERFORMAPPLICATIONLIST"
      [maxNodeLevel]="1"
      [treeMaxHeight]="300"
      primaryKey="appId"
      [path]="shared.appPath + '.userApplications'"
      [mode]="shared.mode"
      [editable]="true"
      [paginated]="false"
      [apiParams]="userApplicationParams"
      [editableTableConfig]="{showCreateAction:false}"    
      [customIconTemplate]="applicationIcon"        
      [editableTableConfig]="{showCreateAction:false}"    
      [visible]="shared.checkComponentViewPermission(shared.permissionKeys.application)"
      [fieldsEditable]="shared.checkComponentEditPermission(shared.permissionKeys.application)"
      [nonVisibleAttrs]="shared.nonVisibleAttrs?.[shared.permissionKeys.application]?.fields"
      [nonEditableAttrs]="shared.nonEditableAttrs?.[shared.permissionKeys.application]?.fields"
      [columnRouteUrls]="shared.routeUrls?.[shared.permissionKeys.application]" 
      #userApplications

    >

      <tnz-tree-column
        title="Module"
        field="moduleName"
        [nodeLevel]="1"
        nodeGroupId="moduleId"
        [disableDragging]="true"
        [disableManageColumnVisibility]="true"
      ></tnz-tree-column>
      <tnz-tree-column
        title="Application"
        field="applicationName"
        [disableDragging]="true"
        [disableManageColumnVisibility]="true"
        [showOnExpand]="false"
      ></tnz-tree-column>
      <tnz-tree-checkbox
      title="Read"
        field="isRead"
        (valueChangedFromUI)="checkFullAccess($event)"

        >
      </tnz-tree-checkbox>
      <tnz-tree-checkbox 
        title="Write"
        field="isCreate"
        (valueChangedFromUI)="checkFullAccess($event)"

        >
      </tnz-tree-checkbox>
      
      <tnz-tree-checkbox 
        title="Edit"
        field="isEdit"
        (valueChangedFromUI)="checkFullAccess($event)"

        >
      </tnz-tree-checkbox>
      <tnz-tree-checkbox 
        title="Execute"
        field="isExecute"
        (valueChangedFromUI)="checkFullAccess($event)"

        >
      </tnz-tree-checkbox>
      <tnz-tree-checkbox 
        title="Approve"
        field="isApprove"
        (valueChangedFromUI)="checkFullAccess($event)"
        >
      </tnz-tree-checkbox>
      <tnz-tree-checkbox 
        title="FullAccess"
        field="isFullAccess"
        (valueChangedFromUI)= "fullAccessPropagation($event)"
        >
      </tnz-tree-checkbox>
      

      
    </tnz-tree>





   

      <div class="form-action-buttons">
        <button
          mat-button
          class="cancel"
          *ngIf="!shared.isViewMode()"
          (click)="shared.cancelEdit()"
          data-test="cancel-button"
        >
          <tnz-label label="Cancel" [schema]="shared.schema"></tnz-label>
        </button>
        <button
          mat-button
          class="save"
          *ngIf="!shared.isViewMode()"
          (click)="shared.save(false)"
          data-test="save-button"
        >
          <tnz-label label="Save" [schema]="shared.schema"></tnz-label>
        </button>
      </div>
    </div>
</div>



<!-- Icons of the page -->


<ng-template #saveIcon>
  <svg
    width="24"
    height="25"
    viewBox="0 0 24 25"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M19 21.4775H5C4.46957 21.4775 3.96086 21.2668 3.58579 20.8918C3.21071 20.5167 3 20.008 3 19.4775V5.47754C3 4.94711 3.21071 4.4384 3.58579 4.06333C3.96086 3.68825 4.46957 3.47754 5 3.47754H16L21 8.47754V19.4775C21 20.008 20.7893 20.5167 20.4142 20.8918C20.0391 21.2668 19.5304 21.4775 19 21.4775Z"
      stroke="#003B81"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <path
      d="M17 21.4775V13.4775H7V21.4775"
      stroke="#003B81"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <path
      d="M7 3.47754V8.47754H15"
      stroke="#003B81"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
  </svg>
</ng-template>

<ng-template #closeIcon>
  <svg
    width="24"
    height="25"
    viewBox="0 0 24 25"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M18 6.47754L6 18.4775"
      stroke="#EF4444"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <path
      d="M6 6.47754L18 18.4775"
      stroke="#EF4444"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
  </svg>
</ng-template>

<ng-template #editIcon>
  <svg
    width="25"
    height="25"
    viewBox="0 0 25 25"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M11.2539 4.3866H4.25391C3.72347 4.3866 3.21477 4.59731 2.83969 4.97238C2.46462 5.34746 2.25391 5.85616 2.25391 6.3866V20.3866C2.25391 20.917 2.46462 21.4257 2.83969 21.8008C3.21477 22.1759 3.72347 22.3866 4.25391 22.3866H18.2539C18.7843 22.3866 19.293 22.1759 19.6681 21.8008C20.0432 21.4257 20.2539 20.917 20.2539 20.3866V13.3866"
      stroke="#003B81"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <path
      d="M18.7539 2.88658C19.1517 2.48875 19.6913 2.26526 20.2539 2.26526C20.8165 2.26526 21.3561 2.48875 21.7539 2.88658C22.1517 3.2844 22.3752 3.82397 22.3752 4.38658C22.3752 4.94919 22.1517 5.48875 21.7539 5.88658L12.2539 15.3866L8.25391 16.3866L9.25391 12.3866L18.7539 2.88658Z"
      stroke="#003B81"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
  </svg>
</ng-template>

<ng-template #createIcon>
  <svg
    width="25"
    height="25"
    viewBox="0 0 25 25"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M12.8555 5.3866V19.3866"
      stroke="#003B81"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
    <path
      d="M5.85547 12.3866H19.8555"
      stroke="#003B81"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
  </svg>
</ng-template>

<ng-template #rolesIcon>
    <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none">
    <path d="M16.2943 22.258C16.2547 22.2604 16.2128 22.2627 16.1733 22.2627H2.90044C1.85136 22.2627 1 21.4113 1 20.3599C1 18.1827 1.8816 16.2124 3.30519 14.7865C4.7311 13.3606 6.70365 12.4767 8.87858 12.4767H10.1952C10.4324 12.4767 10.6627 12.486 10.8953 12.5093C10.9186 13.242 11.3047 13.9422 11.9816 14.3353L12.0398 14.3702C12.0258 14.5609 12.0165 14.7493 12.0165 14.9401C12.0165 15.1308 12.0235 15.3215 12.0398 15.5123L11.9816 15.5449C10.9418 16.145 10.5813 17.4848 11.1838 18.5246L12.1863 20.2599C12.3777 20.591 12.6527 20.866 12.9838 21.0574C13.3149 21.2489 13.6904 21.3501 14.0728 21.3509C14.4566 21.3509 14.8334 21.2508 15.1638 21.0578L15.2219 21.0229C15.5359 21.2392 15.8639 21.4299 16.2082 21.5951V21.6626C16.2105 21.8649 16.2408 22.0673 16.2943 22.258ZM13.8076 6.53346C13.8076 7.32899 13.589 8.078 13.2075 8.71536C12.8854 9.25696 12.4478 9.72081 11.9258 10.0738C11.2212 10.5504 10.3899 10.8048 9.5392 10.8042C7.18051 10.8042 5.26843 8.89214 5.26843 6.53346C5.26843 4.17477 7.18051 2.2627 9.5392 2.2627C11.8956 2.2627 13.8076 4.17477 13.8076 6.53346Z" fill="#DCE1E9"/>
    <path d="M25.9406 17.0383L24.8497 16.4079C24.9753 15.9404 25.0427 15.4495 25.0427 14.9401C25.0427 14.4307 24.9753 13.9422 24.8497 13.4723L25.9406 12.842C26.1593 12.7164 26.2337 12.4372 26.1081 12.2186L25.1079 10.4856C25.0779 10.4337 25.0381 10.3881 24.9906 10.3516C24.943 10.3151 24.8888 10.2883 24.8309 10.2727C24.773 10.2572 24.7126 10.2532 24.6532 10.261C24.5937 10.2688 24.5364 10.2882 24.4845 10.3181L23.3912 10.9485C22.6881 10.2446 21.812 9.73832 20.8511 9.48072V8.21996C20.8511 7.96874 20.6464 7.76404 20.3952 7.76404H18.3947C18.1435 7.76404 17.9388 7.96874 17.9388 8.21996V9.48072C16.9778 9.73832 16.1017 10.2446 15.3986 10.9485L14.3054 10.3181C14.0867 10.1925 13.8076 10.2669 13.682 10.4856L12.6817 12.2186C12.5561 12.4372 12.6306 12.7164 12.8492 12.842L13.9402 13.4723C13.8146 13.9399 13.7471 14.4307 13.7471 14.9401C13.7471 15.4495 13.8146 15.938 13.9402 16.4079L12.8492 17.0383C12.6306 17.1639 12.5561 17.443 12.6817 17.6617L13.682 19.3946C13.8076 19.6133 14.0867 19.6877 14.3054 19.5621L15.3986 18.9317C16.0918 19.6249 16.9641 20.139 17.9388 20.3995V21.6603C17.9388 21.9115 18.1435 22.1162 18.3947 22.1162H20.3952C20.6464 22.1162 20.8511 21.9115 20.8511 21.6603V20.3995C21.8257 20.139 22.698 19.6249 23.3912 18.9317L24.4845 19.5621C24.7031 19.6877 24.9823 19.6133 25.1079 19.3946L26.1081 17.6617C26.2337 17.443 26.1593 17.1639 25.9406 17.0383ZM19.3926 17.2453C18.1202 17.2453 17.0874 16.2148 17.0874 14.9401C17.0874 13.6677 18.1179 12.6349 19.3926 12.6349C20.665 12.6349 21.6978 13.6654 21.6978 14.9401C21.6978 16.2125 20.665 17.2453 19.3926 17.2453Z" fill="#7A8A9C"/>
    </svg>
</ng-template>

<ng-template #organizationIcon>
  <svg xmlns="http://www.w3.org/2000/svg" width="28" height="29" viewBox="0 0 28 29" fill="none">
    <path
      d="M25.1767 25.7446C25.1767 26.6955 24.8908 26.9813 23.9575 26.9813H18.5267C17.8325 26.9813 17.5175 26.678 17.5117 25.9896C17.5058 24.0763 17.5058 22.163 17.5117 20.2496C17.5117 19.6838 17.8733 19.328 18.4508 19.3221C19.0983 19.3105 19.7458 19.3221 20.4283 19.3221V15.2271H7.53667V19.3221H9.33334C10.1617 19.3221 10.4825 19.643 10.4825 20.483V25.9955C10.4825 26.6371 10.1325 26.9988 9.49667 26.9988H3.7975C3.15 26.9988 2.8175 26.6546 2.8175 26.0013V20.413C2.8175 19.6546 3.15 19.328 3.91417 19.328H5.67584C5.68167 19.1705 5.69917 19.0363 5.69917 18.9021V14.5038C5.69917 13.7221 6.03167 13.3838 6.8075 13.3838H13.055C13.055 0.384256 14.91 0.768277 14.91 13.3896H21.1808C21.9508 13.3896 22.2717 13.7105 22.2775 14.4805C22.2833 15.9446 22.2775 17.4146 22.2775 18.8788V19.3396H24.0975C24.8267 19.3396 25.1825 19.6896 25.1825 20.413C25.1767 22.1746 25.1767 23.9596 25.1767 25.7446Z"
      fill="#DCE1E9" />
    <rect x="10.1311" y="2.55615" width="7.64401" height="7.66353" rx="0.9" fill="#7A8A9C" />
  </svg>
  </ng-template>
  <ng-template #applicationIcon>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="28"
      height="29"
      viewBox="0 0 28 29"
      fill="none"
    >
      <path
        d="M9.35375 1.1123H3.77125C2.1717 1.1123 0.875 2.409 0.875 4.00855V9.59105C0.875 11.1906 2.1717 12.4873 3.77125 12.4873H9.35375C10.9533 12.4873 12.25 11.1906 12.25 9.59105V4.00855C12.25 2.409 10.9533 1.1123 9.35375 1.1123Z"
        fill="#DCE1E9"
      />
      <path
        d="M24.2288 1.1123H18.6462C17.0467 1.1123 15.75 2.409 15.75 4.00855V9.59105C15.75 11.1906 17.0467 12.4873 18.6462 12.4873H24.2288C25.8283 12.4873 27.125 11.1906 27.125 9.59105V4.00855C27.125 2.409 25.8283 1.1123 24.2288 1.1123Z"
        fill="#DCE1E9"
      />
      <path
        d="M9.35375 15.9873H3.77125C2.1717 15.9873 0.875 17.284 0.875 18.8836V24.4661C0.875 26.0656 2.1717 27.3623 3.77125 27.3623H9.35375C10.9533 27.3623 12.25 26.0656 12.25 24.4661V18.8836C12.25 17.284 10.9533 15.9873 9.35375 15.9873Z"
        fill="#DCE1E9"
      />
      <path
        d="M21.4375 27.3623C24.5786 27.3623 27.125 24.8159 27.125 21.6748C27.125 18.5337 24.5786 15.9873 21.4375 15.9873C18.2964 15.9873 15.75 18.5337 15.75 21.6748C15.75 24.8159 18.2964 27.3623 21.4375 27.3623Z"
        fill="#7A8A9C"
      />
    </svg>
  </ng-template>