<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 m-t-auto m-b-auto"
      [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" [ngClass]="{ 'm-t-24': i === 0 }">
      <button
        type="button"
        class="btn btn-clean m-l-auto"
        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 btn-default"
      [disabled]="to.disabled"
      (click)="add()"
      [attr.data-cy]="field.templateOptions?.addTextDataCy || 'add-array-item'"
    >
      <i c8yIcon="plus-circle"></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>