<div role="group"
  [attr.aria-labelledby]="id + '-fieldset'"
>
  <div id="{{id + '-fieldset'}}"
    class="legend form-block"
    *ngIf="to.label || to.description"
  >
    {{ to.label }}
    <button
      *ngIf="to.description"
      class="btn-clean text-14 m-l-4 flex-item-middle"
      [popover]="to.description"
      placement="right"
      outsideClick="true"
      type="button"
    >
      <i c8yIcon="question-circle-o" class="text-primary"></i>
    </button>
  </div>

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

  <div *ngFor="let field of field.fieldGroup; let i = index" class="input-group-array">
    <formly-field [field]="field">
    </formly-field>
    <div class="input-group-btn">
      <button
        class="btn btn-clean flex-item-right"
        title="{{ 'Delete' | translate }}"
        (click)="remove(i)"
      >
        <i c8yIcon="minus-circle" class="text-danger"></i>
      </button>
    </div>
  </div>

  <div class="p-t-8">
    <button
      title="{{ 'Add \{\{ label \}\}' | translate: field?.fieldArray?.templateOptions }}"
      class="btn-add-block"
      (click)="add()"
    >
      <i c8yIcon="plus-square"></i>
      <span ngNonBindable translate [translateParams]="field?.fieldArray?.templateOptions"
        >Add {{ label }}</span
      >
    </button>
  </div>
</div>