<div class="mb-3">
  <legend *ngIf="props.label"
          class="cd-header mt-1"
          i18n>{{ props.label }}</legend>
  <p *ngIf="props.description"
     i18n>{{ props.description }}</p>

  <div *ngFor="let field of field.fieldGroup; let i = index"
       class="d-flex">
    <formly-field class="col"
                  [field]="field"></formly-field>
    <div class="action-btn">
      <button class="btn btn-light ms-1"
              type="button"
              (click)="addWrapper()">
        <i [ngClass]="icons.add"></i>
      </button>
      <button class="btn btn-light ms-1"
              type="button"
              (click)="remove(i)"
              *ngIf="field.props.removable !== false">
        <i [ngClass]="icons.trash"></i>
      </button>
    </div>
  </div>
  <div *ngIf="field.fieldGroup.length === 0"
       class="text-right">
    <button class="btn btn-light"
            type="button"
            (click)="addWrapper()"
            i18n>
      <i [ngClass]="icons.add"></i>
      Add {{ props.label }}
    </button>
  </div>

  <span class="invalid-feedback"
        role="alert"
        *ngIf="showError && formControl.errors">
    <formly-validation-message [field]="field"></formly-validation-message>
  </span>
</div>
