@if (visibleFields.length) {
  <div class="po-row po-dynamic-view" [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 field) {
    @if (field?.divider?.trim()) {
      <po-divider class="po-sm-12" [p-label]="field.divider"> </po-divider>
    }
    <ng-container
      *ngTemplateOutlet="
        !field.tag && !field.image ? poInfo : !field.image ? poTag : poImage;
        context: { $implicit: field }
      "
    >
    </ng-container>
  }
</ng-template>

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

<ng-template #poInfo let-field>
  <po-info
    [ngClass]="field.cssClass"
    [class.po-info-value-pre]="textWrap && containsLineBreak(setFieldValue(field))"
    [p-label]="field.label"
    [p-size]="componentsSize"
    [p-value]="setFieldValue(field)"
  >
  </po-info
></ng-template>

<ng-template #poTag let-field>
  <po-tag
    [ngClass]="field.cssClass"
    [p-color]="field.color"
    [p-icon]="field.icon"
    [p-label]="field.label"
    [p-text-color]="field.textColor"
    [p-value]="setFieldValue(field)"
  >
  </po-tag>
</ng-template>

<ng-template #poImage let-field>
  <po-image [p-alt]="field.alt" [p-height]="field.height" [p-src]="field.value"> </po-image>
</ng-template>