@if (visibleFields && visibleFields.length > 0) {
  <div class="po-row" [class.po-dynamic]="hasContainers">
    <ng-container
      *ngTemplateOutlet="
        hasContainers ? poContentContainer : poContent;
        context: { $implicit: hasContainers ? containerFields : visibleFields }
      "
    ></ng-container>
  </div>
}

<ng-template #poContent let-fields>
  @for (field of fields; track trackBy($index, field)) {
    @if (field?.divider?.trim()) {
      <po-divider class="po-sm-12" [p-label]="field.divider"> </po-divider>
    }
    @if (compareTo(field.control, 'datepicker')) {
      <po-datepicker
        #component
        [name]="field.property"
        [(ngModel)]="value[field.property]"
        [ngClass]="field.componentClass"
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-clean]="field.clean"
        [p-disabled]="isDisabled(field)"
        [p-error-pattern]="field.errorMessage"
        [p-error-limit]="field.errorLimit"
        [p-error-async]="field.errorAsyncFunction"
        [p-auto-focus]="field.focus"
        [p-format]="field.format"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-iso-format]="field.isoFormat"
        [p-label]="field.label"
        [p-locale]="field.locale"
        [p-max-date]="field.maxValue"
        [p-min-date]="field.minValue"
        [p-no-autocomplete]="field.noAutocomplete"
        [p-optional]="field.optional"
        [p-readonly]="field.readonly"
        [p-required]="field.required"
        [p-required-field-error-message]="field.requiredFieldErrorMessage"
        [p-size]="field.size || componentsSize"
        [p-show-required]="field.showRequired"
        (p-change)="onChangeField(field)"
        [p-placeholder]="field.placeholder"
        (p-additional-help)="field.additionalHelp?.($event)"
        (p-keydown)="field.keydown?.($event)"
      >
      </po-datepicker>
    }
    @if (compareTo(field.control, 'datepickerrange')) {
      <po-datepicker-range
        #component
        [name]="field.property"
        [(ngModel)]="value[field.property]"
        [ngClass]="field.componentClass"
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-clean]="field.clean"
        [p-disabled]="isDisabled(field)"
        [p-auto-focus]="field.focus"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-label]="field.label"
        [p-literals]="field.literals"
        [p-max-date]="field.maxValue"
        [p-min-date]="field.minValue"
        [p-no-autocomplete]="field.noAutocomplete"
        [p-optional]="field.optional"
        [p-readonly]="field.readonly"
        [p-required]="field.required"
        [p-field-error-message]="field.errorMessage"
        [p-error-limit]="field.errorLimit"
        [p-show-required]="field.showRequired"
        [p-size]="field.size || componentsSize"
        (p-additional-help)="field.additionalHelp?.($event)"
        (p-change)="onChangeField(field)"
        (p-keydown)="field.keydown?.($event)"
      >
      </po-datepicker-range>
    }
    @if (compareTo(field.control, 'input')) {
      <po-input
        #component
        [name]="field.property"
        [(ngModel)]="value[field.property]"
        [ngClass]="field.componentClass"
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-clean]="field.clean"
        [p-disabled]="isDisabled(field)"
        [p-error-pattern]="field.errorMessage"
        [p-error-limit]="field.errorLimit"
        [p-error-async-properties]="field.errorAsyncProperties"
        [p-auto-focus]="field.focus"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-label]="field.label"
        [p-mask-format-model]="field.maskFormatModel"
        [p-mask-no-length-validation]="field.maskNoLengthValidation"
        [p-mask]="field.mask"
        [p-maxlength]="field.maxLength"
        [p-minlength]="field.minLength"
        [p-no-autocomplete]="field.noAutocomplete"
        [p-optional]="field.optional"
        [p-pattern]="field.pattern"
        [p-required]="field.required"
        [p-required-field-error-message]="field.requiredFieldErrorMessage"
        [p-show-required]="field.showRequired"
        [p-size]="field.size || componentsSize"
        (p-additional-help)="field.additionalHelp?.($event)"
        (p-change)="onChangeField(field)"
        (p-change-model)="onChangeFieldModel(field)"
        (p-keydown)="field.keydown?.($event)"
        [p-icon]="field.icon"
        [p-placeholder]="field.placeholder"
        [p-readonly]="field.readonly"
      >
      </po-input>
    }
    @if (compareTo(field.control, 'number')) {
      <po-number
        #component
        [name]="field.property"
        [(ngModel)]="value[field.property]"
        [ngClass]="field.componentClass"
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-clean]="field.clean"
        [p-disabled]="isDisabled(field)"
        [p-error-pattern]="field.errorMessage"
        [p-error-limit]="field.errorLimit"
        [p-error-async-properties]="field.errorAsyncProperties"
        [p-auto-focus]="field.focus"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-label]="field.label"
        [p-min]="field.minValue"
        [p-max]="field.maxValue"
        [p-maxlength]="field.maxLength"
        [p-minlength]="field.minLength"
        [p-no-autocomplete]="field.noAutocomplete"
        [p-optional]="field.optional"
        [p-step]="field.step"
        [p-readonly]="field.readonly"
        [p-required]="field.required"
        [p-required-field-error-message]="field.requiredFieldErrorMessage"
        [p-show-required]="field.showRequired"
        [p-size]="field.size || componentsSize"
        (p-additional-help)="field.additionalHelp?.($event)"
        (p-change)="onChangeField(field)"
        (p-change-model)="onChangeFieldModel(field)"
        (p-keydown)="field.keydown?.($event)"
        [p-icon]="field.icon"
        [p-placeholder]="field.placeholder"
      >
      </po-number>
    }
    @if (compareTo(field.control, 'decimal')) {
      <po-decimal
        #component
        [name]="field.property"
        [(ngModel)]="value[field.property]"
        [ngClass]="field.componentClass"
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-clean]="field.clean"
        [p-error-pattern]="field.errorMessage"
        [p-error-limit]="field.errorLimit"
        [p-error-async-properties]="field.errorAsyncProperties"
        [p-disabled]="isDisabled(field)"
        [p-decimals-length]="field.decimalsLength"
        [p-thousand-maxlength]="field.thousandMaxlength"
        [p-icon]="field.icon"
        [p-auto-focus]="field.focus"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-label]="field.label"
        [p-locale]="field.locale"
        [p-mask-no-length-validation]="field.maskNoLengthValidation"
        [p-min]="field.minValue"
        [p-max]="field.maxValue"
        [p-maxlength]="field.maxLength"
        [p-minlength]="field.minLength"
        [p-no-autocomplete]="field.noAutocomplete"
        [p-optional]="field.optional"
        [p-readonly]="field.readonly"
        [p-required]="field.required"
        [p-required-field-error-message]="field.requiredFieldErrorMessage"
        [p-show-required]="field.showRequired"
        [p-size]="field.size || componentsSize"
        (p-additional-help)="field.additionalHelp?.($event)"
        (p-change)="onChangeField(field)"
        (p-change-model)="onChangeFieldModel(field)"
        (p-keydown)="field.keydown?.($event)"
        [p-placeholder]="field.placeholder"
      >
      </po-decimal>
    }
    @if (compareTo(field.control, 'select')) {
      <po-select
        #component
        [name]="field.property"
        [(ngModel)]="value[field.property]"
        [ngClass]="field.componentClass"
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-field-label]="field.fieldLabel"
        [p-field-value]="field.fieldValue"
        [p-disabled]="isDisabled(field)"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-label]="field.label"
        [p-optional]="field.optional"
        [p-options]="field.options"
        [p-required]="field.required"
        [p-field-error-message]="field.errorMessage"
        [p-error-limit]="field.errorLimit"
        [p-show-required]="field.showRequired"
        [p-size]="field.size || componentsSize"
        (p-additional-help)="field.additionalHelp?.($event)"
        (p-change)="onChangeField(field)"
        (p-keydown)="field.keydown?.($event)"
        [p-placeholder]="field.placeholder"
        [p-readonly]="field.readonly"
      >
      </po-select>
    }
    @if (compareTo(field.control, 'radioGroup')) {
      <po-radio-group
        #component
        [name]="field.property"
        [(ngModel)]="value[field.property]"
        [ngClass]="field.componentClass"
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-columns]="field.columns || 3"
        [p-auto-focus]="field.focus"
        [p-disabled]="isDisabled(field)"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-label]="field.label"
        [p-optional]="field.optional"
        [p-options]="field.options"
        [p-required]="field.required"
        [p-field-error-message]="field.errorMessage"
        [p-error-limit]="field.errorLimit"
        [p-show-required]="field.showRequired"
        [p-size]="field.size || componentsSize"
        (p-additional-help)="field.additionalHelp?.($event)"
        (p-change)="onChangeField(field)"
        (p-keydown)="field.keydown?.($event)"
      >
      </po-radio-group>
    }
    @if (compareTo(field.control, 'switch')) {
      <po-switch
        #component
        [name]="field.property"
        [(ngModel)]="value[field.property]"
        [ngClass]="field.componentClass"
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-disabled]="isDisabled(field)"
        [p-error-limit]="field.errorLimit"
        [p-field-error-message]="field.errorMessage"
        [p-format-model]="field.formatModel"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-label]="field.label"
        [p-label-off]="field.booleanFalse"
        [p-label-on]="field.booleanTrue"
        [p-label-position]="field.labelPosition"
        [p-hide-label-status]="field.hideLabelStatus"
        [p-invalid-value]="field.invalidValue"
        [p-size]="field.size || componentsSize"
        (p-additional-help)="field.additionalHelp?.($event)"
        (p-change)="onChangeField(field)"
        (p-keydown)="field.keydown?.($event)"
      >
      </po-switch>
    }
    @if (compareTo(field.control, 'checkbox')) {
      <po-checkbox
        #component
        [name]="field.property"
        [(ngModel)]="value[field.property]"
        [ngClass]="field.componentClass"
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-auto-focus]="field.focus"
        [p-disabled]="isDisabled(field)"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-label]="field.label"
        [p-size]="field.size || componentsSize"
        (p-additional-help)="field.additionalHelp?.($event)"
        (p-change)="onChangeField(field)"
        (p-keydown)="field.keydown?.($event)"
      >
      </po-checkbox>
    }
    @if (compareTo(field.control, 'combo')) {
      <po-combo
        #component
        [name]="field.property"
        [(ngModel)]="value[field.property]"
        [ngClass]="field.componentClass"
        p-emit-object-value
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-auto-focus]="field.focus"
        [p-clean]="field.clean"
        [p-disabled]="isDisabled(field)"
        [p-field-label]="field.fieldLabel"
        [p-field-value]="field.fieldValue"
        [p-filter-params]="field.params"
        [p-filter-service]="field.optionsService"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-infinite-scroll]="field.infiniteScroll"
        [p-infinite-scroll-distance]="field.infiniteScrollDistance || 100"
        [p-label]="field.label"
        [p-literals]="field.literals"
        [p-options]="field.options"
        [p-optional]="field.optional"
        [p-sort]="field.sort"
        [p-required]="field.required"
        [p-field-error-message]="field.errorMessage"
        [p-error-limit]="field.errorLimit"
        [p-show-required]="field.showRequired"
        (p-change)="onChangeField(field, $event)"
        [p-icon]="field.icon"
        [p-placeholder]="field.placeholder"
        [p-filter-minlength]="field.filterMinlength"
        [p-filter-mode]="field.filterMode"
        [p-disabled-init-filter]="field.disabledInitFilter"
        [p-disabled-tab-filter]="field.disabledTabFilter"
        [p-debounce-time]="field.debounceTime"
        [p-change-on-enter]="field.changeOnEnter"
        [p-remove-initial-filter]="field.removeInitialFilter"
        [p-size]="field.size || componentsSize"
        (p-keydown)="field.keydown?.($event)"
        (p-additional-help)="field.additionalHelp?.($event)"
        [p-listbox-control-position]="field.listboxControlPosition"
      >
      </po-combo>
    }
    @if (compareTo(field.control, 'lookup')) {
      <po-lookup
        #component
        [name]="field.property"
        [(ngModel)]="value[field.property]"
        p-field-label="label"
        p-field-value="value"
        [ngClass]="field.componentClass"
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-clean]="field.clean"
        [p-columns]="field.columns"
        [p-disabled]="isDisabled(field)"
        [p-field-label]="field.fieldLabel || 'label'"
        [p-field-value]="field.fieldValue || 'value'"
        [p-filter-params]="field.params"
        [p-filter-service]="field.searchService"
        [p-auto-focus]="field.focus"
        [p-auto-height]="field.autoHeight"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-field-format]="field.format"
        [p-infinite-scroll]="field.infiniteScroll"
        [p-label]="field.label"
        [p-literals]="field.literals"
        [p-multiple]="field.multiple"
        [p-no-autocomplete]="field.noAutocomplete"
        [p-optional]="field.optional"
        [p-required]="field.required"
        [p-field-error-message]="field.errorMessage"
        [p-error-limit]="field.errorLimit"
        [p-show-required]="field.showRequired"
        [p-size]="field.size || componentsSize"
        (p-change)="onChangeField(field)"
        [p-placeholder]="field.placeholder"
        [p-advanced-filters]="field.advancedFilters"
        (p-additional-help)="field.additionalHelp?.($event)"
        (p-change-visible-columns)="field.changeVisibleColumns?.($event)"
        (p-keydown)="field.keydown?.($event)"
        (p-restore-column-manager)="field.columnRestoreManager?.($event)"
      >
      </po-lookup>
    }
    @if (compareTo(field.control, 'checkboxGroup')) {
      <po-checkbox-group
        #component
        [name]="field.property"
        [(ngModel)]="value[field.property]"
        [ngClass]="field.componentClass"
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-columns]="field.columns || 3"
        [p-auto-focus]="field.focus"
        [p-disabled]="isDisabled(field)"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-label]="field.label"
        [p-optional]="field.optional"
        [p-options]="field.options"
        [p-required]="field.required"
        [p-show-required]="field.showRequired"
        [p-field-error-message]="field.errorMessage"
        [p-error-limit]="field.errorLimit"
        [p-size]="field.size || componentsSize"
        (p-additional-help)="field.additionalHelp?.($event)"
        (p-change)="onChangeField(field)"
        (p-keydown)="field.keydown?.($event)"
      >
      </po-checkbox-group>
    }
    @if (compareTo(field.control, 'multiselect')) {
      <po-multiselect
        #component
        [name]="field.property"
        [(ngModel)]="value[field.property]"
        [ngClass]="field.componentClass"
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-disabled]="isDisabled(field)"
        [p-auto-focus]="field.focus"
        [p-auto-height]="field.autoHeight"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-label]="field.label"
        [p-literals]="field.literals"
        [p-optional]="field.optional"
        [p-options]="field.options"
        [p-required]="field.required"
        [p-field-error-message]="field.errorMessage"
        [p-error-limit]="field.errorLimit"
        [p-show-required]="field.showRequired"
        (p-change)="onChangeField(field)"
        [p-placeholder]="field.placeholder"
        [p-field-label]="field.fieldLabel"
        [p-field-value]="field.fieldValue"
        [p-filter-service]="field.optionsService"
        [p-filter-mode]="field.filterMode"
        [p-debounce-time]="field.debounceTime"
        [p-sort]="field.sort"
        [p-placeholder-search]="field.placeholderSearch"
        [p-hide-search]="field.hideSearch"
        [p-hide-select-all]="field.hideSelectAll"
        [p-size]="field.size || componentsSize"
        (p-additional-help)="field.additionalHelp?.($event)"
        (p-keydown)="field.keydown?.($event)"
        [p-listbox-control-position]="field.listboxControlPosition"
      >
      </po-multiselect>
    }
    @if (compareTo(field.control, 'textarea')) {
      <po-textarea
        #component
        [name]="field.property"
        [(ngModel)]="value[field.property]"
        [ngClass]="field.componentClass"
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-disabled]="isDisabled(field)"
        [p-auto-focus]="field.focus"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-label]="field.label"
        [p-maxlength]="field.maxLength"
        [p-minlength]="field.minLength"
        [p-optional]="field.optional"
        [p-readonly]="field.readonly"
        [p-required]="field.required"
        [p-field-error-message]="field.errorMessage"
        [p-error-limit]="field.errorLimit"
        [p-show-required]="field.showRequired"
        [p-rows]="field.rows"
        [p-size]="field.size || componentsSize"
        (p-additional-help)="field.additionalHelp?.($event)"
        (p-change)="onChangeField(field)"
        (p-change-model)="onChangeFieldModel(field)"
        (p-keydown)="field.keydown?.($event)"
        [p-placeholder]="field.placeholder"
      >
      </po-textarea>
    }
    @if (compareTo(field.control, 'password')) {
      <po-password
        #component
        [name]="field.property"
        [(ngModel)]="value[field.property]"
        [ngClass]="field.componentClass"
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-clean]="field.clean"
        [p-disabled]="isDisabled(field)"
        [p-error-pattern]="field.errorMessage"
        [p-error-limit]="field.errorLimit"
        [p-error-async-properties]="field.errorAsyncProperties"
        [p-auto-focus]="field.focus"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-hide-password-peek]="field.hidePasswordPeek"
        [p-icon]="field.icon"
        [p-label]="field.label"
        [p-maxlength]="field.maxLength"
        [p-minlength]="field.minLength"
        [p-no-autocomplete]="field.noAutocomplete"
        [p-optional]="field.optional"
        [p-pattern]="field.pattern"
        [p-readonly]="field.readonly"
        [p-required]="field.required"
        [p-required-field-error-message]="field.requiredFieldErrorMessage"
        [p-show-required]="field.showRequired"
        [p-size]="field.size || componentsSize"
        (p-additional-help)="field.additionalHelp?.($event)"
        (p-change)="onChangeField(field)"
        (p-change-model)="onChangeFieldModel(field)"
        (p-keydown)="field.keydown?.($event)"
        [p-placeholder]="field.placeholder"
      >
      </po-password>
    }
    @if (compareTo(field.control, 'upload')) {
      <po-upload
        #component
        [(ngModel)]="value[field.property]"
        [ngClass]="field.componentClass"
        [additionalHelpEventTrigger]="field.additionalHelp ? 'event' : 'noEvent'"
        [p-additional-help-tooltip]="field.additionalHelpTooltip"
        [p-auto-upload]="field.autoUpload"
        [p-directory]="field.directory"
        [p-disabled]="isDisabled(field)"
        [p-drag-drop]="field.dragDrop"
        [p-drag-drop-height]="field.dragDropHeight"
        [p-restrictions]="field.restrictions"
        [p-form-field]="field.formField"
        [p-headers]="field.headers"
        [p-help]="field.help"
        [p-helper]="field.helper"
        [p-hide-restrictions-info]="field.hideRestrictionsInfo"
        [p-hide-select-button]="field.hideSelectButton"
        [p-hide-send-button]="field.hideSendButton"
        [p-multiple]="field.multiple"
        [p-label]="field.label"
        [p-literals]="field.literals"
        [name]="field.property"
        [p-custom-action]="field.customAction"
        (p-custom-action-click)="field.customActionClick($event)"
        (p-error)="field.onError($event)"
        (p-success)="field.onSuccess($event)"
        (p-upload)="field.onUpload($event)"
        [p-optional]="field.optional"
        [p-required]="field.required"
        [p-show-required]="field.showRequired"
        [p-show-thumbnail]="field.showThumbnail ?? true"
        [p-size]="field.size || componentsSize"
        (p-additional-help)="field.additionalHelp?.($event)"
        (p-change)="onChangeField(field)"
        (p-change-model)="onChangeFieldModel(field)"
        (p-keydown)="field.keydown?.($event)"
        [p-url]="field.url"
      >
      </po-upload>
    }
  }
</ng-template>

<ng-template #poContentContainer let-fields>
  <po-dynamic-container [p-fields]="fields" [p-content]="poContent"></po-dynamic-container>
</ng-template>