<div class="chart-config-manager">
  <h2>Chart Configuration Manager</h2>
  
  <!-- Chart Types Section -->
  <clr-tabs>
    <clr-tab>
      <button clrTabLink>Chart Types</button>
      <clr-tab-content>
        <div class="card">
          <div class="card-header">
            <h3>Chart Types</h3>
            <button class="btn btn-sm btn-primary" (click)="showAddChartTypeForm = true">
              Add Chart Type
            </button>
          </div>
          
          <!-- Add Chart Type Form -->
          <div class="card-block" *ngIf="showAddChartTypeForm">
            <form clrForm>
              <clr-input-container>
                <label>Name</label>
                <input clrInput type="text" [(ngModel)]="newChartType.name" name="chartTypeName" required />
              </clr-input-container>
              
              <clr-input-container>
                <label>Display Name</label>
                <input clrInput type="text" [(ngModel)]="newChartType.displayName" name="chartTypeDisplayName" />
              </clr-input-container>
              
              <clr-textarea-container>
                <label>Description</label>
                <textarea clrTextarea [(ngModel)]="newChartType.description" name="chartTypeDescription"></textarea>
              </clr-textarea-container>
              
              <clr-checkbox-container>
                <label>Is Active</label>
                <clr-checkbox-wrapper>
                  <input type="checkbox" clrCheckbox [(ngModel)]="newChartType.isActive" name="chartTypeIsActive" />
                  <label>Active</label>
                </clr-checkbox-wrapper>
              </clr-checkbox-container>
              
              <div class="form-actions">
                <button class="btn btn-primary" (click)="createChartType()" [disabled]="!newChartType.name">Save</button>
                <button class="btn" (click)="showAddChartTypeForm = false">Cancel</button>
              </div>
            </form>
          </div>
          
          <!-- Chart Types Table -->
          <div class="card-block">
            <clr-datagrid>
              <clr-dg-column>Name</clr-dg-column>
              <clr-dg-column>Display Name</clr-dg-column>
              <clr-dg-column>Description</clr-dg-column>
              <clr-dg-column>Status</clr-dg-column>
              <clr-dg-column>Actions</clr-dg-column>
              
              <clr-dg-row *clrDgItems="let chartType of chartTypes" [clrDgItem]="chartType">
                <clr-dg-cell>{{chartType.name}}</clr-dg-cell>
                <clr-dg-cell>{{chartType.displayName}}</clr-dg-cell>
                <clr-dg-cell>{{chartType.description}}</clr-dg-cell>
                <clr-dg-cell>
                  <span class="label" [class.label-success]="chartType.isActive" [class.label-danger]="!chartType.isActive">
                    {{chartType.isActive ? 'Active' : 'Inactive'}}
                  </span>
                </clr-dg-cell>
                <clr-dg-cell>
                  <button class="btn btn-sm btn-icon" (click)="selectChartTypeForEdit(chartType)">
                    <cds-icon shape="pencil"></cds-icon>
                  </button>
                  <button class="btn btn-sm btn-icon" (click)="deleteChartType(chartType.id)">
                    <cds-icon shape="trash"></cds-icon>
                  </button>
                  <button class="btn btn-sm btn-icon" (click)="onChartTypeSelect(chartType)">
                    <cds-icon shape="eye"></cds-icon>
                  </button>
                </clr-dg-cell>
              </clr-dg-row>
              
              <clr-dg-footer>
                {{chartTypes.length}} chart types
              </clr-dg-footer>
            </clr-datagrid>
          </div>
          
          <!-- Edit Chart Type Form -->
          <div class="card-block" *ngIf="selectedChartType">
            <h4>Edit Chart Type</h4>
            <form clrForm>
              <clr-input-container>
                <label>Name</label>
                <input clrInput type="text" [(ngModel)]="selectedChartType.name" name="editChartTypeName" required />
              </clr-input-container>
              
              <clr-input-container>
                <label>Display Name</label>
                <input clrInput type="text" [(ngModel)]="selectedChartType.displayName" name="editChartTypeDisplayName" />
              </clr-input-container>
              
              <clr-textarea-container>
                <label>Description</label>
                <textarea clrTextarea [(ngModel)]="selectedChartType.description" name="editChartTypeDescription"></textarea>
              </clr-textarea-container>
              
              <clr-checkbox-container>
                <label>Is Active</label>
                <clr-checkbox-wrapper>
                  <input type="checkbox" clrCheckbox [(ngModel)]="selectedChartType.isActive" name="editChartTypeIsActive" />
                  <label>Active</label>
                </clr-checkbox-wrapper>
              </clr-checkbox-container>
              
              <div class="form-actions">
                <button class="btn btn-primary" (click)="updateChartType()" [disabled]="!selectedChartType.name">Update</button>
                <button class="btn" (click)="selectedChartType = null">Cancel</button>
              </div>
            </form>
          </div>
        </div>
      </clr-tab-content>
    </clr-tab>
    
    <!-- UI Components Section -->
    <clr-tab *ngIf="selectedChartType">
      <button clrTabLink>UI Components</button>
      <clr-tab-content>
        <div class="card">
          <div class="card-header">
            <h3>UI Components for {{selectedChartType?.name}}</h3>
            <button class="btn btn-sm btn-primary" (click)="showAddUiComponentForm = true">
              Add UI Component
            </button>
          </div>
          
          <!-- Add UI Component Form -->
          <div class="card-block" *ngIf="showAddUiComponentForm">
            <form clrForm>
              <clr-input-container>
                <label>Component Name</label>
                <input clrInput type="text" [(ngModel)]="newUiComponent.componentName" name="componentName" required />
              </clr-input-container>
              
              <clr-input-container>
                <label>Component Type</label>
                <input clrInput type="text" [(ngModel)]="newUiComponent.componentType" name="componentType" />
              </clr-input-container>
              
              <clr-input-container>
                <label>Display Label</label>
                <input clrInput type="text" [(ngModel)]="newUiComponent.displayLabel" name="displayLabel" />
              </clr-input-container>
              
              <clr-input-container>
                <label>Placeholder</label>
                <input clrInput type="text" [(ngModel)]="newUiComponent.placeholder" name="placeholder" />
              </clr-input-container>
              
              <clr-input-container>
                <label>Sort Order</label>
                <input clrInput type="number" [(ngModel)]="newUiComponent.sortOrder" name="sortOrder" />
              </clr-input-container>
              
              <clr-checkbox-container>
                <label>Is Required</label>
                <clr-checkbox-wrapper>
                  <input type="checkbox" clrCheckbox [(ngModel)]="newUiComponent.isRequired" name="isRequired" />
                  <label>Required</label>
                </clr-checkbox-wrapper>
              </clr-checkbox-container>
              
              <div class="form-actions">
                <button class="btn btn-primary" (click)="createUiComponent()" [disabled]="!newUiComponent.componentName">Save</button>
                <button class="btn" (click)="showAddUiComponentForm = false">Cancel</button>
              </div>
            </form>
          </div>
          
          <!-- UI Components Table -->
          <div class="card-block">
            <clr-datagrid>
              <clr-dg-column>Component Name</clr-dg-column>
              <clr-dg-column>Component Type</clr-dg-column>
              <clr-dg-column>Display Label</clr-dg-column>
              <clr-dg-column>Placeholder</clr-dg-column>
              <clr-dg-column>Required</clr-dg-column>
              <clr-dg-column>Sort Order</clr-dg-column>
              <clr-dg-column>Actions</clr-dg-column>
              
              <clr-dg-row *clrDgItems="let uiComponent of uiComponents" [clrDgItem]="uiComponent">
                <clr-dg-cell>{{uiComponent.componentName}}</clr-dg-cell>
                <clr-dg-cell>{{uiComponent.componentType}}</clr-dg-cell>
                <clr-dg-cell>{{uiComponent.displayLabel}}</clr-dg-cell>
                <clr-dg-cell>{{uiComponent.placeholder}}</clr-dg-cell>
                <clr-dg-cell>
                  <span class="label" [class.label-success]="uiComponent.isRequired" [class.label-danger]="!uiComponent.isRequired">
                    {{uiComponent.isRequired ? 'Yes' : 'No'}}
                  </span>
                </clr-dg-cell>
                <clr-dg-cell>{{uiComponent.sortOrder}}</clr-dg-cell>
                <clr-dg-cell>
                  <button class="btn btn-sm btn-icon" (click)="selectUiComponentForEdit(uiComponent)">
                    <cds-icon shape="pencil"></cds-icon>
                  </button>
                  <button class="btn btn-sm btn-icon" (click)="deleteUiComponent(uiComponent.id)">
                    <cds-icon shape="trash"></cds-icon>
                  </button>
                </clr-dg-cell>
              </clr-dg-row>
              
              <clr-dg-footer>
                {{uiComponents.length}} UI components
              </clr-dg-footer>
            </clr-datagrid>
          </div>
          
          <!-- Edit UI Component Form -->
          <div class="card-block" *ngIf="selectedUiComponent">
            <h4>Edit UI Component</h4>
            <form clrForm>
              <clr-input-container>
                <label>Component Name</label>
                <input clrInput type="text" [(ngModel)]="selectedUiComponent.componentName" name="editComponentName" required />
              </clr-input-container>
              
              <clr-input-container>
                <label>Component Type</label>
                <input clrInput type="text" [(ngModel)]="selectedUiComponent.componentType" name="editComponentType" />
              </clr-input-container>
              
              <clr-input-container>
                <label>Display Label</label>
                <input clrInput type="text" [(ngModel)]="selectedUiComponent.displayLabel" name="editDisplayLabel" />
              </clr-input-container>
              
              <clr-input-container>
                <label>Placeholder</label>
                <input clrInput type="text" [(ngModel)]="selectedUiComponent.placeholder" name="editPlaceholder" />
              </clr-input-container>
              
              <clr-input-container>
                <label>Sort Order</label>
                <input clrInput type="number" [(ngModel)]="selectedUiComponent.sortOrder" name="editSortOrder" />
              </clr-input-container>
              
              <clr-checkbox-container>
                <label>Is Required</label>
                <clr-checkbox-wrapper>
                  <input type="checkbox" clrCheckbox [(ngModel)]="selectedUiComponent.isRequired" name="editIsRequired" />
                  <label>Required</label>
                </clr-checkbox-wrapper>
              </clr-checkbox-container>
              
              <div class="form-actions">
                <button class="btn btn-primary" (click)="updateUiComponent()" [disabled]="!selectedUiComponent.componentName">Update</button>
                <button class="btn" (click)="selectedUiComponent = null">Cancel</button>
              </div>
            </form>
          </div>
        </div>
      </clr-tab-content>
    </clr-tab>
    
    <!-- Component Properties Section -->
    <clr-tab *ngIf="selectedUiComponent">
      <button clrTabLink>Component Properties</button>
      <clr-tab-content>
        <div class="card">
          <div class="card-header">
            <h3>Properties for {{selectedUiComponent?.componentName}}</h3>
            <button class="btn btn-sm btn-primary" (click)="showAddComponentPropertyForm = true">
              Add Property
            </button>
          </div>
          
          <!-- Add Component Property Form -->
          <div class="card-block" *ngIf="showAddComponentPropertyForm">
            <form clrForm>
              <clr-input-container>
                <label>Property Name</label>
                <input clrInput type="text" [(ngModel)]="newComponentProperty.propertyName" name="propertyName" required />
              </clr-input-container>
              
              <clr-input-container>
                <label>Property Value</label>
                <input clrInput type="text" [(ngModel)]="newComponentProperty.propertyValue" name="propertyValue" />
              </clr-input-container>
              
              <clr-input-container>
                <label>Property Type</label>
                <input clrInput type="text" [(ngModel)]="newComponentProperty.propertyType" name="propertyType" />
              </clr-input-container>
              
              <div class="form-actions">
                <button class="btn btn-primary" (click)="createComponentProperty()" [disabled]="!newComponentProperty.propertyName">Save</button>
                <button class="btn" (click)="showAddComponentPropertyForm = false">Cancel</button>
              </div>
            </form>
          </div>
          
          <!-- Component Properties Table -->
          <div class="card-block">
            <clr-datagrid>
              <clr-dg-column>Property Name</clr-dg-column>
              <clr-dg-column>Property Value</clr-dg-column>
              <clr-dg-column>Property Type</clr-dg-column>
              <clr-dg-column>Actions</clr-dg-column>
              
              <clr-dg-row *clrDgItems="let property of componentProperties" [clrDgItem]="property">
                <clr-dg-cell>{{property.propertyName}}</clr-dg-cell>
                <clr-dg-cell>{{property.propertyValue}}</clr-dg-cell>
                <clr-dg-cell>{{property.propertyType}}</clr-dg-cell>
                <clr-dg-cell>
                  <button class="btn btn-sm btn-icon" (click)="selectComponentPropertyForEdit(property)">
                    <cds-icon shape="pencil"></cds-icon>
                  </button>
                  <button class="btn btn-sm btn-icon" (click)="deleteComponentProperty(property.id)">
                    <cds-icon shape="trash"></cds-icon>
                  </button>
                </clr-dg-cell>
              </clr-dg-row>
              
              <clr-dg-footer>
                {{componentProperties.length}} properties
              </clr-dg-footer>
            </clr-datagrid>
          </div>
          
          <!-- Edit Component Property Form -->
          <div class="card-block" *ngIf="selectedComponentProperty">
            <h4>Edit Component Property</h4>
            <form clrForm>
              <clr-input-container>
                <label>Property Name</label>
                <input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyName" name="editPropertyName" required />
              </clr-input-container>
              
              <clr-input-container>
                <label>Property Value</label>
                <input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyValue" name="editPropertyValue" />
              </clr-input-container>
              
              <clr-input-container>
                <label>Property Type</label>
                <input clrInput type="text" [(ngModel)]="selectedComponentProperty.propertyType" name="editPropertyType" />
              </clr-input-container>
              
              <div class="form-actions">
                <button class="btn btn-primary" (click)="updateComponentProperty()" [disabled]="!selectedComponentProperty.propertyName">Update</button>
                <button class="btn" (click)="selectedComponentProperty = null">Cancel</button>
              </div>
            </form>
          </div>
        </div>
      </clr-tab-content>
    </clr-tab>
    
    <!-- Chart Templates Section -->
    <clr-tab *ngIf="selectedChartType">
      <button clrTabLink>Chart Templates</button>
      <clr-tab-content>
        <div class="card">
          <div class="card-header">
            <h3>Templates for {{selectedChartType?.name}}</h3>
            <button class="btn btn-sm btn-primary" (click)="showAddChartTemplateForm = true">
              Add Template
            </button>
          </div>
          
          <!-- Add Chart Template Form -->
          <div class="card-block" *ngIf="showAddChartTemplateForm">
            <form clrForm>
              <clr-input-container>
                <label>Template Name</label>
                <input clrInput type="text" [(ngModel)]="newChartTemplate.templateName" name="templateName" required />
              </clr-input-container>
              
              <clr-textarea-container>
                <label>HTML Template</label>
                <textarea clrTextarea [(ngModel)]="newChartTemplate.templateHtml" name="templateHtml" rows="5"></textarea>
              </clr-textarea-container>
              
              <clr-textarea-container>
                <label>CSS Template</label>
                <textarea clrTextarea [(ngModel)]="newChartTemplate.templateCss" name="templateCss" rows="5"></textarea>
              </clr-textarea-container>
              
              <clr-checkbox-container>
                <label>Is Default</label>
                <clr-checkbox-wrapper>
                  <input type="checkbox" clrCheckbox [(ngModel)]="newChartTemplate.isDefault" name="isDefault" />
                  <label>Default Template</label>
                </clr-checkbox-wrapper>
              </clr-checkbox-container>
              
              <div class="form-actions">
                <button class="btn btn-primary" (click)="createChartTemplate()" [disabled]="!newChartTemplate.templateName">Save</button>
                <button class="btn" (click)="showAddChartTemplateForm = false">Cancel</button>
              </div>
            </form>
          </div>
          
          <!-- Chart Templates Table -->
          <div class="card-block">
            <clr-datagrid>
              <clr-dg-column>Template Name</clr-dg-column>
              <clr-dg-column>Is Default</clr-dg-column>
              <clr-dg-column>Actions</clr-dg-column>
              
              <clr-dg-row *clrDgItems="let template of chartTemplates" [clrDgItem]="template">
                <clr-dg-cell>{{template.templateName}}</clr-dg-cell>
                <clr-dg-cell>
                  <span class="label" [class.label-success]="template.isDefault" [class.label-danger]="!template.isDefault">
                    {{template.isDefault ? 'Yes' : 'No'}}
                  </span>
                </clr-dg-cell>
                <clr-dg-cell>
                  <button class="btn btn-sm btn-icon" (click)="selectChartTemplateForEdit(template)">
                    <cds-icon shape="pencil"></cds-icon>
                  </button>
                  <button class="btn btn-sm btn-icon" (click)="deleteChartTemplate(template.id)">
                    <cds-icon shape="trash"></cds-icon>
                  </button>
                </clr-dg-cell>
              </clr-dg-row>
              
              <clr-dg-footer>
                {{chartTemplates.length}} templates
              </clr-dg-footer>
            </clr-datagrid>
          </div>
          
          <!-- Edit Chart Template Form -->
          <div class="card-block" *ngIf="selectedChartTemplate">
            <h4>Edit Chart Template</h4>
            <form clrForm>
              <clr-input-container>
                <label>Template Name</label>
                <input clrInput type="text" [(ngModel)]="selectedChartTemplate.templateName" name="editTemplateName" required />
              </clr-input-container>
              
              <clr-textarea-container>
                <label>HTML Template</label>
                <textarea clrTextarea [(ngModel)]="selectedChartTemplate.templateHtml" name="editTemplateHtml" rows="5"></textarea>
              </clr-textarea-container>
              
              <clr-textarea-container>
                <label>CSS Template</label>
                <textarea clrTextarea [(ngModel)]="selectedChartTemplate.templateCss" name="editTemplateCss" rows="5"></textarea>
              </clr-textarea-container>
              
              <clr-checkbox-container>
                <label>Is Default</label>
                <clr-checkbox-wrapper>
                  <input type="checkbox" clrCheckbox [(ngModel)]="selectedChartTemplate.isDefault" name="editIsDefault" />
                  <label>Default Template</label>
                </clr-checkbox-wrapper>
              </clr-checkbox-container>
              
              <div class="form-actions">
                <button class="btn btn-primary" (click)="updateChartTemplate()" [disabled]="!selectedChartTemplate.templateName">Update</button>
                <button class="btn" (click)="selectedChartTemplate = null">Cancel</button>
              </div>
            </form>
          </div>
        </div>
      </clr-tab-content>
    </clr-tab>
    
    <!-- Dynamic Fields Section -->
    <clr-tab *ngIf="selectedChartType">
      <button clrTabLink>Dynamic Fields</button>
      <clr-tab-content>
        <div class="card">
          <div class="card-header">
            <h3>Dynamic Fields for {{selectedChartType?.name}}</h3>
            <button class="btn btn-sm btn-primary" (click)="showAddDynamicFieldForm = true">
              Add Field
            </button>
          </div>
          
          <!-- Add Dynamic Field Form -->
          <div class="card-block" *ngIf="showAddDynamicFieldForm">
            <form clrForm>
              <clr-input-container>
                <label>Field Name</label>
                <input clrInput type="text" [(ngModel)]="newDynamicField.fieldName" name="fieldName" required />
              </clr-input-container>
              
              <clr-input-container>
                <label>Field Label</label>
                <input clrInput type="text" [(ngModel)]="newDynamicField.fieldLabel" name="fieldLabel" />
              </clr-input-container>
              
              <clr-input-container>
                <label>Field Type</label>
                <input clrInput type="text" [(ngModel)]="newDynamicField.fieldType" name="fieldType" />
              </clr-input-container>
              
              <clr-textarea-container>
                <label>Field Options</label>
                <textarea clrTextarea [(ngModel)]="newDynamicField.fieldOptions" name="fieldOptions"></textarea>
              </clr-textarea-container>
              
              <clr-input-container>
                <label>Sort Order</label>
                <input clrInput type="number" [(ngModel)]="newDynamicField.sortOrder" name="fieldSortOrder" />
              </clr-input-container>
              
              <clr-checkbox-container>
                <label>Is Required</label>
                <clr-checkbox-wrapper>
                  <input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.isRequired" name="fieldIsRequired" />
                  <label>Required</label>
                </clr-checkbox-wrapper>
              </clr-checkbox-container>
              
              <clr-checkbox-container>
                <label>Show in UI</label>
                <clr-checkbox-wrapper>
                  <input type="checkbox" clrCheckbox [(ngModel)]="newDynamicField.showInUi" name="fieldShowInUi" />
                  <label>Show in UI</label>
                </clr-checkbox-wrapper>
              </clr-checkbox-container>
              
              <div class="form-actions">
                <button class="btn btn-primary" (click)="createDynamicField()" [disabled]="!newDynamicField.fieldName">Save</button>
                <button class="btn" (click)="showAddDynamicFieldForm = false">Cancel</button>
              </div>
            </form>
          </div>
          
          <!-- Dynamic Fields Table -->
          <div class="card-block">
            <clr-datagrid>
              <clr-dg-column>Field Name</clr-dg-column>
              <clr-dg-column>Field Label</clr-dg-column>
              <clr-dg-column>Field Type</clr-dg-column>
              <clr-dg-column>Required</clr-dg-column>
              <clr-dg-column>Show in UI</clr-dg-column>
              <clr-dg-column>Sort Order</clr-dg-column>
              <clr-dg-column>Actions</clr-dg-column>
              
              <clr-dg-row *clrDgItems="let field of dynamicFields" [clrDgItem]="field">
                <clr-dg-cell>{{field.fieldName}}</clr-dg-cell>
                <clr-dg-cell>{{field.fieldLabel}}</clr-dg-cell>
                <clr-dg-cell>{{field.fieldType}}</clr-dg-cell>
                <clr-dg-cell>
                  <span class="label" [class.label-success]="field.isRequired" [class.label-danger]="!field.isRequired">
                    {{field.isRequired ? 'Yes' : 'No'}}
                  </span>
                </clr-dg-cell>
                <clr-dg-cell>
                  <span class="label" [class.label-success]="field.showInUi" [class.label-danger]="!field.showInUi">
                    {{field.showInUi ? 'Yes' : 'No'}}
                  </span>
                </clr-dg-cell>
                <clr-dg-cell>{{field.sortOrder}}</clr-dg-cell>
                <clr-dg-cell>
                  <button class="btn btn-sm btn-icon" (click)="selectDynamicFieldForEdit(field)">
                    <cds-icon shape="pencil"></cds-icon>
                  </button>
                  <button class="btn btn-sm btn-icon" (click)="deleteDynamicField(field.id)">
                    <cds-icon shape="trash"></cds-icon>
                  </button>
                </clr-dg-cell>
              </clr-dg-row>
              
              <clr-dg-footer>
                {{dynamicFields.length}} fields
              </clr-dg-footer>
            </clr-datagrid>
          </div>
          
          <!-- Edit Dynamic Field Form -->
          <div class="card-block" *ngIf="selectedDynamicField">
            <h4>Edit Dynamic Field</h4>
            <form clrForm>
              <clr-input-container>
                <label>Field Name</label>
                <input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldName" name="editFieldName" required />
              </clr-input-container>
              
              <clr-input-container>
                <label>Field Label</label>
                <input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldLabel" name="editFieldLabel" />
              </clr-input-container>
              
              <clr-input-container>
                <label>Field Type</label>
                <input clrInput type="text" [(ngModel)]="selectedDynamicField.fieldType" name="editFieldType" />
              </clr-input-container>
              
              <clr-textarea-container>
                <label>Field Options</label>
                <textarea clrTextarea [(ngModel)]="selectedDynamicField.fieldOptions" name="editFieldOptions"></textarea>
              </clr-textarea-container>
              
              <clr-input-container>
                <label>Sort Order</label>
                <input clrInput type="number" [(ngModel)]="selectedDynamicField.sortOrder" name="editFieldSortOrder" />
              </clr-input-container>
              
              <clr-checkbox-container>
                <label>Is Required</label>
                <clr-checkbox-wrapper>
                  <input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.isRequired" name="editFieldIsRequired" />
                  <label>Required</label>
                </clr-checkbox-wrapper>
              </clr-checkbox-container>
              
              <clr-checkbox-container>
                <label>Show in UI</label>
                <clr-checkbox-wrapper>
                  <input type="checkbox" clrCheckbox [(ngModel)]="selectedDynamicField.showInUi" name="editFieldShowInUi" />
                  <label>Show in UI</label>
                </clr-checkbox-wrapper>
              </clr-checkbox-container>
              
              <div class="form-actions">
                <button class="btn btn-primary" (click)="updateDynamicField()" [disabled]="!selectedDynamicField.fieldName">Update</button>
                <button class="btn" (click)="selectedDynamicField = null">Cancel</button>
              </div>
            </form>
          </div>
        </div>
      </clr-tab-content>
    </clr-tab>
  </clr-tabs>
</div>
