<div role="group" [attr.aria-labelledby]="id + '-fieldset'">
  <div id="{{ id + '-fieldset' }}" class="legend form-block" *ngIf="to.label || to.description">
    {{ to.label | humanize }}
    <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 ifield of field.fieldGroup; let i = index" class="input-group-array">
    <formly-field [field]="ifield"> </formly-field>
    <div class="input-group-btn">
      <button
        type="button"
        class="btn btn-clean flex-item-right"
        title="{{ 'Delete' | translate }}"
        [disabled]="to.disabled || field.fieldGroup.length === 1"
        (click)="remove(i)"
      >
        <i c8yIcon="minus-circle" class="text-danger"></i>
      </button>
    </div>
  </div>

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