<div class="container-fluid">
  <form class="form-horizontal" [formGroup]="formGroup">

    <ds-dynamic-form
      [formId]="formId"
      [formGroup]="formGroup"
      [formModel]="formModel"
      [formLayout]="formLayout"
      (change)="$event.stopPropagation();"
      (dfBlur)="onBlur($event)"
      (dfChange)="onChange($event)"
      (dfFocus)="onFocus($event)">

      <ng-template modelType="ARRAY" let-group let-index="index" let-context="context">

        <!--Array with repeatable items-->
        <div *ngIf="!context.notRepeatable"
             class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
          <div class="btn-group" role="group" aria-label="Add and remove button">
            <button type="button" class="btn btn-secondary"
                    [disabled]="isItemReadOnly(context, index)"
                    (click)="insertItem($event, group.context, group.index + 1)">
              <i class="fas fa-plus" aria-hidden="true"></i>
            </button>
            <button type="button" class="btn btn-secondary"
                    (click)="removeItem($event, context, index)"
                    [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
              <i class="fas fa-trash" aria-hidden="true"></i>
            </button>
          </div>
        </div>

        <!--Array with non repeatable items - Only delete button-->
        <div *ngIf="context.notRepeatable && group.context.groups.length > 1"
             class="col-xs-2 d-flex flex-column justify-content-sm-start align-items-end">
          <div class="btn-group" role="group" aria-label="Remove button">
            <button type="button" class="btn btn-secondary"
                    (click)="removeItem($event, context, index)"
                    [disabled]="group.context.groups.length === 1 || isItemReadOnly(context, index)">
              <i class="fas fa-trash" aria-hidden="true"></i>
            </button>
          </div>
        </div>
      </ng-template>

    </ds-dynamic-form>

    <ng-content></ng-content>

    <div *ngIf="displaySubmit">
      <hr>
      <div class="form-group row">

        <div class="col text-right">
          <button type="reset" class="btn btn-default" (click)="reset()">{{cancelLabel | translate}}</button>
          <button type="submit" class="btn btn-primary" (click)="onSubmit()"
                  [disabled]="!(isValid() | async)">{{submitLabel | translate}}
          </button>
        </div>
      </div>
    </div>

  </form>

</div>
