<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
      class="btn-help btn-help--sm m-t-auto m-b-auto"
      type="button"
      [attr.aria-label]="'Help' | translate"
      [popover]="to.description"
      placement="right"
      triggers="focus"
      *ngIf="to.description"
    ></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 | c8yArrayTypeInjectTemplate: customTemplate"></formly-field>
    <ng-container
      *ngIf="ifield.type === 'formly-group' || ifield.type === 'array'"
      [ngTemplateOutlet]="customTemplate"
    ></ng-container>
    <ng-template #customTemplate>
      <div class="input-group-btn delete-row">
        <button
          class="btn btn-dot btn-dot--danger flex-item-right"
          type="button"
          [attr.aria-label]="'Delete' | translate"
          tooltip="{{ 'Delete' | translate }}"
          [delay]="500"
          placement="right"
          [disabled]="to.disabled || (field.fieldGroup.length === 1 && to.required)"
          (click)="remove(i)"
        >
          <i c8yIcon="minus-circle"></i>
        </button>
      </div>
    </ng-template>
  </div>

  <div class="p-t-8">
    <button
      class="btn btn-sm btn-default"
      type="button"
      title="{{
        (field.templateOptions?.addText | translate) || 'Add \{\{ label \}\}'
          | translate: fieldArrayProps
      }}"
      [disabled]="to.disabled"
      (click)="add()"
      [attr.data-cy]="field.templateOptions?.addTextDataCy || 'add-array-item'"
    >
      <i c8yIcon="plus-circle" class="m-r-4"></i>
      <span
        *ngIf="!field.templateOptions?.addText"
        ngNonBindable
        translate
        [translateParams]="fieldArrayProps"
      >
        Add {{ label }}
      </span>
      <span *ngIf="field.templateOptions?.addText">
        {{ field.templateOptions?.addText | translate }}
      </span>
    </button>
  </div>
</div>